Last Updated on December 10, 2020.
Sometimes, you may want to show icon inside your TextInput, specifically saying- an icon aligned to the left of the TextInput. React Native TextInput has inlineImageLeft prop to add icon inside it. Unfortunately inlineImageLeft supports only Android platform.
There’s also another prop named inlineImagePadding to adjust the padding of the image inside TextInput. As the inlineImageLeft works natively, you have to add the image inside /android/app/src/main/res/drawable folder. Then you have to call the name of
In the example below, I have placed an image named ‘username’ inside /android/app/src/main/res/drawable. Then I called it as a reference. Once you made this change, you need to execute react-native run-android to see the changes in your project. For more details, you can look into the official doc.
Here’s the example code:
Class based component
import React, { Component } from 'react';
import { View, Text,TextInput} from 'react-native';
export default class componentName extends Component {
constructor(props) {
super(props);
this.state = { text: '' };
}
render() {
return (
<View style={{flex: 1, justifyContent:'center', alignItems:'center'}}>
<Text style={{margin: 10}}>TextInput with icon</Text>
<TextInput
style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
inlineImageLeft='username'
inlineImagePadding={2}
underlineColorAndroid= 'transparent'
value={this.state.text}
/>
</View>
);
}
}
Function based component
import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
const Home = () => {
const [input, setInput] = useState('');
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{margin: 10}}>TextInput with icon</Text>
<TextInput
style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => setInput(text)}
inlineImageLeft="username"
inlineImagePadding={2}
underlineColorAndroid="transparent"
value={input}
/>
</View>
);
};
export default Home;
Here’s the output:

I hope this tutorial will be helpful for you.