Categories
React Answers

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

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.