How to Create Gradient Background Color in React Native

We expect react native to support Gradient color upright but unfortunately, it is not. You have to make some native changes for this- that’s why I use react native linear gradient library.

The react native gradient library is pretty straight forward as you can setup it using the following commands:
npm install react-native-linear-gradient –save
react-native link react-native-linear-gradient

If you want manual linking instructions or want to know more about the library, you can go here.

You can follow the code below to make a linear gradient background with two colors:

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

<LinearGradient
        style={styles.container}
        colors={[
          "#00d2ff",
          "#3a7bd5"
        ]}
      >
<View style={{flex: 1}} />
</LinearGradient>

Leave a Reply

%d bloggers like this: