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 theTextInput
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.
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:
Step 4: Install required dependency
- Install the @expo/vector-icons package with the command:
npm install @expo/vector-icons
Example:
- App.js
Javascript
import React, { useState } from 'react' ; import { TextInput, View, StyleSheet, Text, SafeAreaView } from 'react-native' ; import { MaterialCommunityIcons } from '@expo/vector-icons' ; const App = () => { // State variable to hold the password const [password, setPassword] = useState( '' ); // State variable to track password visibility const [showPassword, setShowPassword] = useState( false ); // Function to toggle the password visibility state const toggleShowPassword = () => { setShowPassword(!showPassword); }; return ( <SafeAreaView style={styles.mainContainer}> <Text style={styles.heading}> w3wiki || Password Show and Hide </Text> <View style={styles.container}> <TextInput // Set secureTextEntry prop to hide //password when showPassword is false secureTextEntry={!showPassword} value={password} onChangeText={setPassword} style={styles.input} placeholder= "Enter Password" placeholderTextColor= "#aaa" /> <MaterialCommunityIcons name={showPassword ? 'eye-off' : 'eye' } size={24} color= "#aaa" style={styles.icon} onPress={toggleShowPassword} /> </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ mainContainer: { marginTop: 70, margin: 40, }, container: { flexDirection: 'row' , alignItems: 'center' , justifyContent: 'center' , backgroundColor: '#f3f3f3' , borderRadius: 8, paddingHorizontal: 14, }, input: { flex: 1, color: '#333' , paddingVertical: 10, paddingRight: 10, fontSize: 16, }, icon: { marginLeft: 10, }, heading: { alignItems: 'center' , fontSize: 20, color: 'green' , marginBottom: 20, }, }); export default App; |
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: