'LinearGradient Will no Render on Expo App
I have a rather deeply nested component with a wrapper around the entire thing. I made sure its properly installed and imported from expo, so no errors and the component renders, just with no Linear Gradient above it. The code is as follows, NOTE that the colors are 'black' and 'white' for testing, but eventually 'white' will be changed with a transparent value
import React from 'react';
import { View, TouchableWithoutFeedback, Keyboard, ImageBackground, Image } from 'react-native';
import { LandingStyles } from '../../Styles/LandingPageStyles';
import LandingPageContainer from './LandingComponents/LandingPageContainer';
import Title from './LandingComponents/Title';
import backgroundImage from '../../assets/loginBackground.png'
import {LinearGradient} from 'expo-linear-gradient';
const LandingPage = ({ handleLoggedIn }) => {
return (
<LinearGradient colors={['black' ,'white']} start={{x: 0.5, y: 1 }} end={{x: 0.5, y: 0.7 }} style={{flex: 1}}>
<View style={LandingStyles.container}>
<ImageBackground style={LandingStyles.backdrop} source={backgroundImage} resizeMode="cover">
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={{backgroundColor: 'rgba(52, 52, 52, 0.4) !important',}}>
<View style={LandingStyles.titleIcon}>
<Title />
</View>
<LandingPageContainer handleLoggedIn={handleLoggedIn} />
</View>
</TouchableWithoutFeedback>
</ImageBackground>
</View>
</LinearGradient>
);
};
export default LandingPage;
Whenever I run the app to test, there's just no difference. I can comment out the Gradient and nothing changes. I've tried having it wrap the component (as shown above) or just being placed in as a single component (<LinearGradient /> instead of <LinearGradient> </LinearGradient>) but nothing works. Any ideas?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
