How to Show and Hide Password in React Native ?

In this article, we'll see how we can add password show and hide features in React Native applications.

In mobile apps, users often need to toggle password visibility for better user experience and accuracy. React Native simplifies this with the `SecureTextEntry` prop in the `TextInput` component, enabling easy implementation of password show/hide functionality.

Prerequisites:

• Introduction to React Native
• React Native Components
• React Native State
• Expo CLI
• Node.js and npm (Node Package Manager)

Approach:

• Create a React Native component with a password input field and a toggle button/icon.
• Maintain a state variable to track the visibility of the password.
• Use the SecureTextEntry prop of the TextInput component to toggle the visibility of the password.
• Implement an event handler for the toggle button/icon to update the state variable.
• Toggle the value of the SecureTextEntry prop based on the state variable to show or hide the password.

Adding password visibility toggles improves user experience in login forms. This can be achieved using TextInput with secure text entry features.

Step 1: Set Up the Development Environment​

Install Expo CLI globally by running this command:

npm install -g expo-cli​

Step 2: Create React Native Application With Expo CLI

Create a new react native project with Expo CLI by using this command:

expo init showhide-passowrd

Step 3:​Navigate to project directory by using this command:

cd showhide-password

Project Structure:

👁 React-Native-Project-Structure.png

Step 4: Install required dependency

• Install the @expo/vector-icons package with the command:

npm install @expo/vector-icons

Example:

• App.js

Steps to run: To run the react native application, open the Terminal/CMD and enter the following command:

npx expo start

To run on Android:

npx react-native run-android

To run on ios:

npx react-native run-ios

Output: