In our previous tutorial we have created Button with Gradient Effect using the react-native-linear-gradient GitHub NPM library. This tutorial is the second part of Gradient Button Tutorial. In this tutorial we would going to create a react native app with Set Gradient Effect Background on TextInput with rounded corner border in react native android and iOS application. We are using the Linear gradient with Silver and white color combination. This type of TextInput is very common in iOS devices and it is also popular between developer as iPhone EditText.
Contents in this project Set Gradient Effect Background on TextInput in React Native Android iOS example tutorial:
1. We are using the react-native-linear-gradient library in to make the Gradient effect, So we have to install react-native-linear-gradient library in our project. To install Open your React Native Project folder in CMD and run this command
npm install react–native–linear–gradient —save . See the below screenshot .
Screenshot of Command Prompt/Terminal after successfully installation of this library :
2. Now run the
react–native link command in CMD in your project. This command would re-arrange the complete React Native project and add the Linear gradient library in its own index.
3. Import StyleSheet, View and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput } from ‘react-native’;
|
4. Import the LinearGradient module from react-native-linear-gradient library.
|
1
|
import LinearGradient from ‘react-native-linear-gradient’;
|
5. 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>
);
}
|
6. Create the LinearGradient component in Root View. This would render the Gradient Effect background on TextInput.
colors : This prop is used to pass the color combination of Gradient. You can also pass more then 2 colors in this prop.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render() {
return (
<View style={styles.MainContainer}>
<LinearGradient colors={[‘#c3c3c3’, ‘#FFFFFF’]} style={styles.LinearGradientStyle} >
</LinearGradient>
</View>
);
}
|
7. Create a Sub Child View inside the LinearGradient. We would wrap the TextInput in this child View.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<LinearGradient colors={[‘#c3c3c3’, ‘#FFFFFF’]} style={styles.LinearGradientStyle} >
<View style={styles.ChildViewStyle}>
<TextInput
placeholder=“Enter Your Text Here”
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}/>
</View>
</LinearGradient>
</View>
);
}
|
8. Create CSS Style for Root View, Child View, TextInput and LinearGradient 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
30
31
32
33
34
35
36
37
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : ‘#fff’
},
LinearGradientStyle: {
height: 50,
borderRadius: 10,
height: 50,
width: ‘80%’
},
ChildViewStyle:{
borderWidth: 1,
borderColor: ‘#028b53’,
width: ‘100%’,
height: 50,
borderRadius: 10,
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 50,
width: ‘90%’
}
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput } from ‘react-native’;
import LinearGradient from ‘react-native-linear-gradient’;
export default class MainActivity extends Component {
render() {
return (
<View style={styles.MainContainer}>
<LinearGradient colors={[‘#c3c3c3’, ‘#FFFFFF’]} style={styles.LinearGradientStyle} >
<View style={styles.ChildViewStyle}>
<TextInput
placeholder=“Enter Your Text Here”
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}/>
</View>
</LinearGradient>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : ‘#fff’
},
LinearGradientStyle: {
height: 50,
borderRadius: 10,
height: 50,
width: ‘80%’
},
ChildViewStyle:{
borderWidth: 1,
borderColor: ‘#028b53’,
width: ‘100%’,
height: 50,
borderRadius: 10,
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 50,
width: ‘90%’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native set View Align Horizontally Center dynamically on button click
Debug React Native App in Android Emulator Using Chrome Debug Tool
Create File Picker in React Native Android iOS Example Tutorial
React Native Scroll To Given FlatList JSON Item in ScrollView Example
How to Create Custom Circle Round Oval Shape View in React Native
