Start a Project

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

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 –>

 

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  :–>

 

And  You have completed your objective.

Keep coding and Keep Sharing 

Exit mobile version