Native Shopify Mobile App with 20 new features
Kickstart your hyperlocal marketplace in Corona pandemic with a starter guide
Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 184.108.40.206 release ready!
Owner and Founder. Opencart
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 :
Make sure the above two packages are installed and in a working state before you start writing code.
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.
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
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.