[SOLVED] Linear Gradient In React-Native

Linear Gradient In React-Native

I have a component and I want a linear gradient from right bottom to top left in react native, I tried using from 'react-native-linear-gradient' but it's not working.

Component :

// render return

   return( 
      <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} >
       <View style={styles.container}>
         <View  style={styles.topPart}>
           <Header ></Header>
           <Content ></Content>
        </View>  
        <Footer style={styles.footer}></Footer>
      </View>
    </LinearGradient>  
);

Please guide how to achieve this.

Solution

After installing react-native-linear-gradient library by:

npm install --save react-native-linear-gradient

Try to link your project's all dependencies as,

react-native link

And make sure you are importing LinearGradient as,

import LinearGradient from 'react-native-linear-gradient';

And the last but most important thing set some flex value to your LinearGradient,

<LinearGradient 
     colors={['#6e45e2', '#88d3ce']}
     style = { styles.container }>

          <View>
               //your elements here
          </View> 
 </LinearGradient>

Your LinearGradient style as,

const styles = StyleSheet.create({
  container: {
      flex: 1,
  }
});

Note I am sure your gradient is not visible because of flex value, just add it. It will definitely work.