Gradient effect is a smoothly color changeable effect on a particular defined location with fix height and width. Gradient is common between all type of developer who wish to make their app or websites looks better then others. So in this tutorial we would going to create a react native app with Gradient Shade Effect Button using react-native-linear-gradient GitHub library and wrap the button with TouchableOpacity to make the gradient button clickable.
There are basically 2 types of gradient effects available in react native :
- Linear Gradient(Top to bottom, Bottom to top, Left to right, right to Left and Diagonally).
- Radial Gradient(Defined different center color).
Contents in this project Create Gradient Shade Effect Button in React Native Android iOS App Example:
1. We are using the react-native-linear-gradient GitHub npm library in our this project because there are no certain method available in react native to make the Gradient Shade Effect. So open your project name folder in command prompt and run the npm install react-native-linear-gradient --save command inside it to install this library. See the below screenshot for more details 🙂 .
2. After done installation execute the
react-native link command. This command would refresh the whole project and index the newly installed modules in react native’s own library.
3. Import StyleSheet, View, TouchableOpacity, Text and Alert command in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'; |
4. Import the LinearGradient module from react-native-linear-gradient library in your project.
|
1 |
import LinearGradient from 'react-native-linear-gradient'; |
5. Create a function named as SampleFunction() in your class. We would call this function on Gradient button click.
|
1 2 3 4 |
SampleFunction=()=>{ Alert.alert("Gradient Button Clicked :)"); } |
6. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
7. Now finally we would create 2 types of Gradient shade effect button in Root View. We would wrap the LinearGradient component in TouchableOpacity to make the LinearGradient clickable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
render() { return ( <View style={styles.MainContainer}> <TouchableOpacity activeOpacity = { .5 } onPress={this.SampleFunction}> <LinearGradient colors={['#B2EBF2', '#00BCD4']} style={styles.LinearGradientStyle} > <Text style={styles.buttonText}> Sign in with ReactNativeCode </Text> </LinearGradient> </TouchableOpacity> <TouchableOpacity activeOpacity = { .5 } onPress={this.SampleFunction}> <LinearGradient colors={['#fe8c00', '#f83600', '#fe8c00']} style={styles.LinearGradientStyle} start={{x: 0, y: 1}} end={{x: 1, y: 0.9}} locations={[0, 0.3, 0.9]} > <Text style={styles.buttonText}> Sign in with ReactNativeCode </Text> </LinearGradient> </TouchableOpacity> </View> ); } |
8. Create Style for LinearGradient, Root View and Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const styles = StyleSheet.create({ MainContainer :{ flex:1, paddingTop: 30, justifyContent: 'center', alignItems: 'center' }, LinearGradientStyle: { height: 40, paddingLeft: 15, paddingRight: 15, borderRadius: 5, marginBottom: 20 }, buttonText: { fontSize: 18, textAlign: 'center', margin: 7, color : '#fff', backgroundColor: 'transparent' }, }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import React, { Component } from 'react'; import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; export default class MainActivity extends Component { SampleFunction=()=>{ Alert.alert("Gradient Button Clicked :)"); } render() { return ( <View style={styles.MainContainer}> <TouchableOpacity activeOpacity = { .5 } onPress={this.SampleFunction}> <LinearGradient colors={['#B2EBF2', '#00BCD4']} style={styles.LinearGradientStyle} > <Text style={styles.buttonText}> Sign in with ReactNativeCode </Text> </LinearGradient> </TouchableOpacity> <TouchableOpacity activeOpacity = { .5 } onPress={this.SampleFunction}> <LinearGradient colors={['#fe8c00', '#f83600', '#fe8c00']} style={styles.LinearGradientStyle} start={{x: 0, y: 1}} end={{x: 1, y: 0.9}} locations={[0, 0.3, 0.9]} > <Text style={styles.buttonText}> Sign in with ReactNativeCode </Text> </LinearGradient> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ flex:1, paddingTop: 30, justifyContent: 'center', alignItems: 'center' }, LinearGradientStyle: { height: 40, paddingLeft: 15, paddingRight: 15, borderRadius: 5, marginBottom: 20 }, buttonText: { fontSize: 18, textAlign: 'center', margin: 7, color : '#fff', backgroundColor: 'transparent' }, }); |
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Auto Scale Image Width Height Dimension Example Tutorial
React Native LightBox to Highlight Image View Using Animation Android iOS Example Tutorial
React Native Set Gradient Effect Background on TextInput Android iOS
React Native justifyContent style Explained With Example Tutorial
React Native Custom Common Toast for both Android iOS App Tutorial
app get crashed, not running the program, I think react-native-linear-gradient is not working for me. Now how do i do such gradient background view and view border shadow color?
Rohit you can give the view to shadow using elevation: 4 style. Please re-install the Linear Gradient plugin.
By using elevation i can set the default shadow of the view but not able to set custom shadow like shadow color.
Yes Rothit this option is currently not available in android in react native but you can change the shadow color in iOS.
I think its only work for IOS not for android. Is it true?
Yes it is True Rohit .
Considered using the library but I ended up stretching a 1px image for mine.
Please explain your question more briefly Chris ?
Hi, i’ve tried your tutorial but i receive this error when running the project with npm start:
“Invariant Violation: Native component for “BVLinearGradient” does not exist”
How can i fix this?. Thanks!
Guillermo you need to first install the gradient library using npm install react-native-linear-gradient –save command then execute the react-native link command to link to project .
How can i run this code with android .Thank!
You need to install the library first then you can easily run this code in Android 🙂 .