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.
Top comments (2)
Gradients indeed make app UI colourful and more modern. One should know how to play with colors to make an attractive gradient. The article is short and sweet. However, it would have been better if the code was placed in a code snippet format. Nice tutorial on React Native Gradient using react native linear gradient package.
good work! You can use syntax highlighting for code to make it more readable
github.com/adam-p/markdown-here/wi...