Check Mobile App
Read now
Start a Project

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

Save

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 🙂

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

When I think in getting solutions for my Ecommerce Platform, I think of Webkul. They have been such a blessing in our business. We have spent thousands of dollars in support and modules from them. We love their support team. They work very closely with us, and they always go the extra mile when we need help.

Michael Urresta

Michael Urresta

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home