Linear Gradient In React-Native

Question

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 1

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.

Solution 2

You can achieve an angled gradient by setting start and end positions as props. In your case, those should be:

start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}

If you mean that you don't see any gradient at all, did you link the library according to the install instructions?

Comments

[Tarik Sahni]

it is not showing any gradinet at all , I have installed the library using npm and imported it in my project , what else i have to do