Navigate back to the homepage

How to show and hide password using eye icon in react native?

Infinitbility
React Native
January 10th, 2022 · 1 min read
How to show and hide password using eye icon in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React Native provides an option to create password text input using secureTextEntry props but for the eye icon, we have to write some extra code to handle it.

Today, we will see how we can implement an eye icon with toggle password functionality.

In this tutotial, we are using react-native-paper for textinput and react-native-vector-icons for icons.

Let start today’s tutorial How to show and hide password using eye icon in react native?

Basically,

We will change state in boolean status when the user clicks on the eye icon and in textinput secureTextEntry props we will pass the same state data so when the user clicks on the eye it will store the value state and through the state, it will automatically pass in textinput.

Let understand with an example of code.

1import React, { useState } from 'react';
2import { TextInput } from 'react-native-paper';
3
4const MyComponent = () => {
5 const [text, setText] = useState('');
6 const [passwordVisible, setPasswordVisible] = useState(true);
7
8 return (
9 <TextInput
10 label="Password"
11 secureTextEntry={passwordVisible}
12 right={<TextInput.Icon name={passwordVisible ? "eye" : "eye-off"} onPress={() => setPasswordVisible(!passwordVisible)} />}
13 />
14 );
15};
16
17export default MyComponent;

Output

React native toggle password example
React native toggle password example
  • Try it yourself

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

React native detox with react navigation example

React native detox with react navigation example

React Native, detox guide to test multiple screen example

January 9th, 2022 · 1 min read
React native detox multiple typeText crash issues

React native detox multiple typeText crash issues

React native detox, typeText method showing error when using more than two times.

January 8th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]