How to put an icon inside a TextInput in React Native?

Sometimes, we want to put an icon inside a TextInput in React Native.

In this article, we’ll look at how to put an icon inside a TextInput in React Native.

How to put an icon inside a TextInput in React Native?

To put an icon inside a TextInput in React Native, we can put an Icon and a TextInput in the same View.

For instance, we write:

import * as React from 'react';
import { Text, View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View style={{ flexDirection: 'row', gap: 5, alignItems: 'center' }}>
      <Icon name="ios-search" size={20} color="#000" />
      <TextInput
        placeholder="User Nickname"
        onChangeText={(searchString) => console.log(searchString)}
        underlineColorAndroid="transparent"
      />
    </View>
  );
}

to add a View that has flexDirection set to 'row' to let us add the Icon and TextInput side by side.

Then we add the Icon to the left of the TextInput.

Conclusion

To put an icon inside a TextInput in React Native, we can put an Icon and a TextInput in the same View.