Create a password view in React Native with show/hide password functionality

anchit

5 March 2021

In this blog, we will learn about how to create a password view in React Native with show/hide password functionality.

While working with React Native, I recently learned that the Password view is missing and no special emphasis has been given to it. Being from Android Background, I always loved the show/hide password functionality. So, I started looking for it and when I could not find any suitable inbuilt core components for this, I ended up creating a component for my React Native Application.

Let’s get started with the code :

Things You Need To Get Started :

react-native-vector-icons/MaterialIcons (Refer here for installation of this package)
react-native-material-textinput (Refer here for installation of this package)

Before You Start Coding :

Make sure the above two packages are installed and in a working state before you start writing code.

APPROACH :

Step 1) We will create an independent component (say PasswordInputView) that will provide a text filed to enter the password and will contain an icon in the right that will change according to the state of the text field and will allow us to execute the showing and hiding of the password.

Step2) We will then look into how we can use this component in our application code.

CODE :

PasswordInputView Component class file –>

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { View, Text, TouchableHighlight ,StyleSheet} from 'react-native';
import TextInput from 'react-native-material-textinput';
export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default class PasswordInputView extends React.Component {
    constructor(props) {
        super(props);

this.state = {
            icEye: 'visibility-off', // default icon to show that password is currently hidden
            password: '', // actual value of password entered by the user
            showPassword: true // boolean to show/hide the password

}
    }

changePwdType = () => {
        let newState;
        if (this.state.showPassword) {
            newState = {
                icEye: 'visibility',
                showPassword: false,
                password: this.state.password
            }
        } else {
            newState = {
                icEye: 'visibility-off',
                showPassword: true,
                password: this.state.password
            }
        }
        // set new state value
        this.setState(newState)
    };
    handlePassword = (password) => {
        let newState = {
            icEye: this.state.icEye,
            showPassword: this.state.showPassword,
            password: password
        }
        this.setState(newState);
        this.props.callback(password); // used to return the value of the password to the caller class, skip this if you are creating this view in the caller class itself
    };

render() {
        return (
            <TouchableHighlight>
                <View style={styles.passwordViewContainer}>
                    <TextInput
                        placeholder={this.props.label}
                        label={this.props.label}
                        value={this.state.password}
                        onChangeText={this.handlePassword}
                        secureTextEntry={this.state.showPassword}
                        width={SCREEN_WIDTH - 100}
                        height={40}
                        labelActiveColor={componentColors.password_icon_color}
                        labelColor={componentColors.password_icon_color}
                        placeholderColor={componentColors.password_icon_color}
                        underlineColor={componentColors.password_icon_color}
                        underlineActiveColor={componentColors.password_icon_color}
                        underlineActiveHeight={2}
                        underlineHeight={1}
                    >
                    </TextInput>
                    <Icon style={styles.icon}
                        name={this.state.icEye}
                        size={30}
                        color={componentColors.password_icon_color}
                        onPress={this.changePwdType}
                    />
                </View>
            </TouchableHighlight>
        );
    }
}

export const styles = StyleSheet.create({
    passwordViewContainer: {
        flexDirection: 'row'
    },
    icon: {
        position: 'absolute',
        top: 33,
        right: 0
    }

});
export const componentColors = {
    password_icon_color:'#9E9E9E',
};

import React from 'react';

import Icon from 'react-native-vector-icons/MaterialIcons';

import { View, Text, TouchableHighlight ,StyleSheet} from 'react-native';

import TextInput from 'react-native-material-textinput';

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default class PasswordInputView extends React.Component {

constructor(props) {

super(props);

this.state = {

icEye: 'visibility-off', // default icon to show that password is currently hidden

password: '', // actual value of password entered by the user

showPassword: true // boolean to show/hide the password

}

changePwdType = () => {

let newState;

if (this.state.showPassword) {

newState = {

icEye: 'visibility',

showPassword: false,

password: this.state.password

}

} else {

newState = {

icEye: 'visibility-off',

showPassword: true,

password: this.state.password

}

// set new state value

this.setState(newState)

};

handlePassword = (password) => {

let newState = {

icEye: this.state.icEye,

showPassword: this.state.showPassword,

password: password

}

this.setState(newState);

this.props.callback(password); // used to return the value of the password to the caller class, skip this if you are creating this view in the caller class itself

};

render() {

return (

<TextInput

placeholder={this.props.label}

label={this.props.label}

value={this.state.password}

onChangeText={this.handlePassword}

secureTextEntry={this.state.showPassword}

width={SCREEN_WIDTH - 100}

height={40}

labelActiveColor={componentColors.password_icon_color}

labelColor={componentColors.password_icon_color}

placeholderColor={componentColors.password_icon_color}

underlineColor={componentColors.password_icon_color}

underlineActiveColor={componentColors.password_icon_color}

underlineActiveHeight={2}

underlineHeight={1}

</TextInput>

<Icon style={styles.icon}

name={this.state.icEye}

size={30}

color={componentColors.password_icon_color}

onPress={this.changePwdType}

</View>

</TouchableHighlight>

);

}

export const styles = StyleSheet.create({

passwordViewContainer: {

flexDirection: 'row'

icon: {

position: 'absolute',

top: 33,

right: 0

}

});

export const componentColors = {

password_icon_color:'#9E9E9E',

};

Now that you have created the component for password input, let’s have a look at the code to call this component.

Say Your Caller Class is Login Page, so in your Login Page apart from other functionalities, you will need to import this class and then in render function, you will need to add this component as per your use.

Your login page will be something like :–>

import React from "react";
// add your other import lines over here

import PasswordInputView from '../components/PasswordInputView'; // The path after from will vary as per your file structure so do manage it like that.

export default class LoginPage extends React.Component {
   constructor(props) {
        super(props);
        // other constructor related code
    }
    // your other functions and code goes here
    
    // This function will be used for retaining the value entered by the user in the password field.
    handlePassword = (password) => {
        let newState = this.state
        newState.password = password
        this.setState(newState)
    }
    // your other functions and code goes here

render() {
        return ( 
         <View style={styles.container}>

// your other components and design goes here
            <PasswordInputView 
                ref={passwordView => { this.passwordView = passwordView }} 
                callback={this.handlePassword} 
                label={'Password'} />
                        
          // your other components and design goes here
         </View>
        );
     }
}

import React from "react";

// add your other import lines over here

import PasswordInputView from '../components/PasswordInputView'; // The path after from will vary as per your file structure so do manage it like that.

export default class LoginPage extends React.Component {

constructor(props) {

super(props);

// other constructor related code

}

// your other functions and code goes here

// This function will be used for retaining the value entered by the user in the password field.

handlePassword = (password) => {

let newState = this.state

newState.password = password

this.setState(newState)

}

// your other functions and code goes here

render() {

return (

// your other components and design goes here

<PasswordInputView

ref={passwordView => { this.passwordView = passwordView }}

callback={this.handlePassword}

label={'Password'} />

// your other components and design goes here

</View>

);

}

And You have completed your objective.

Keep coding and Keep Sharing