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 use the TextInput component in the react-native-paper module.

We import it with

import { TextInput } from "react-native-paper";

Then we add the TextInput with the icon with

<TextInput
  label="Password"
  secureTextEntry
  right={<TextInput.Icon name="eye" />}
/>;

We set the right prop to the Icon to show the eye icon on the right of the input.

Conclusion

To put an icon inside a TextInput in React Native, we can use the TextInput component in the react-native-paper module.