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 .
Screenshot of CMD / Terminal after successfully installed the library :
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 Create Custom Sliding Drawer Using Animation iOS Android
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
React Native TranslateY Position Animation Android iOS Tutorial
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
React Native Count TextInput Inside Text Length Automatically
