Gradient Effect in React-Native

Let's add some colors to our app…

Want any of this in your app's background?

Gradients add a very modern touch to your mobile apps, specially to button backgrounds.

To add this we'll use react-native-linear-gradient cause it's totally designed for gradients, lightweight and allows both top-bottom and left-right gradient effects.pod ‘BVLinearGradient’, :path => ‘../node_modules/react-native-linear-gradient’

To install library run

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

and for iOS:

$ cd ios && pod install && cd ..

as it installs all the pod dependencies to your project, make sure to restart your packager after making any changes on native side.

Now let's go code…

import the library to your file:

import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
    My Gradient Button
</Text>
</LinearGradient>
...

// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});

Above code will add a top-bottom gradient of shades of blue to your button styled text. Simple as that, you have to just pass array of colors you want your gradient as.

That was easy, now see what can we do if we need a left-right or vice versa. For that LinearGradient give us start and end property where you can define axis.

//in return statement
<TouchableOpacity
style={{height: '100%'}}
activeOpacity={0.9}
onPress={() => console.log('Beep Beep')}
style={ width: 312,
height: '17.5%',
marginBottom: '3%'
}>
<LinearGradient
start={{x: 1, y: 0}} //here we are defined x as start position
end={{x: 0, y: 0}} //here we can define axis but as end position
colors={['#3393E4', '#715886']}
style={{
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
}}>
<Text> Log in </Text>
</LinearGradient>
</TouchableOpacity>

Here we developed a react-native button with gradient effect. You can play around with axis to meet your desires. Here's output of above code:

Yeyyy!!!

And that's a wrap. If you find any difficulties ping me. If you like the article high-five I mean drop a clap!