Gradient Effect in React-Native

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.

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


My Gradient Button


...

// 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
style={height: '100%'}
activeOpacity={0.9}
onPress={() => console.log('Beep Beep')}
style={ width: 312,
height: '17.5%',
marginBottom: '3%'
}>
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,
}>
Log in

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.