How to Add an Icon inside TextInput in React Native

Sometimes, you may want to show an icon inside your TextInput, specifically saying- an icon aligned to the left of the TextInput. React Native TextInput has inlineImageLeft prop to add an icon inside it. Unfortunately, inlineImageLeft supports only the 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 the image as the reference.

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 at the official doc.

Here’s the example code:

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.