TextInput with Image icon would make the TextInput looks beautiful. In all of the advanced and newly build react native Android + iOS applications all developers is using this type of Login and Registration Forms .In this tutorial we would going to create a react native application with the combination of Image Icon + TextInput Component. So here is the complete step by step tutorial for Set Image Icon Inside TextInput in React Native Android iOS Example. You can freely download Icons for your apps from Google Material Design Icons.
Contents in this project Set Image Icon Inside TextInput in React Native Android iOS Example :
1. Create a Folder named as Images inside your Project.
2. Download the below ic_person.png icon and Put the icon inside the Images folder.
3. Import StyleSheet, View, TextInput and Image component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput, Image} from ‘react-native’;
|
4. Create a Root View in render’s return block. This is the Main container view.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.container}>
</View>
);
}
|
5. Now create another View inside the Root Main View. This View contain the Image + TextInput component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
</View>
</View>
);
}
|
6. Add Image component inside the 2nd SectionStyle View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image source={require(‘./Images/ic_person.png’)} style={styles.ImageStyle} />
</View>
</View>
);
}
|
7. Add TextInput component after adding Image component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image source={require(‘./Images/ic_person.png’)} style={styles.ImageStyle} />
<TextInput
style={{flex:1}}
placeholder=“Enter Your Email Here”
underlineColorAndroid=“transparent”
/>
</View>
</View>
);
}
|
8. Create Custom Css Style classes for All Views.
|
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
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
SectionStyle: {
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#fff’,
borderWidth: .5,
borderColor: ‘#000’,
height: 40,
borderRadius: 5 ,
margin: 10
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode : ‘stretch’,
alignItems: ‘center’
},
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput, Image} from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image source={require(‘./Images/ic_person.png’)} style={styles.ImageStyle} />
<TextInput
style={{flex:1}}
placeholder=“Enter Your Email Here”
underlineColorAndroid=“transparent”
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
SectionStyle: {
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#fff’,
borderWidth: .5,
borderColor: ‘#000’,
height: 40,
borderRadius: 5 ,
margin: 10
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode : ‘stretch’,
alignItems: ‘center’
},
});
|
Screenshot in Android application :
Screenshot in iOS application :
Also Read :
Suggest Us Tutorial
Add Single Line And Multiple Line Comments Syntax in React Native JSX
React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
React Native Swipeable Tab Navigation View Android iOS Tutorial
