I’m here to share with you today another native implementation of a common problem, if you work with react native you know that it’s a library that does not provide you every feature to build an application which makes it flexible as well in terms of using it. But quite often we notice people often relying on libraries to achieve even the smallest of tasks, something like hiding & showing password on click of an icon. In react i firmly believe that try to achieve things natively & logically if not you can seek out a library for help. Today we are going to make something as below
I was looking for something similar like every other developer & i did find a library but than i gave it a thought & looked out on the support that library has offered hasn’t been great. Why, rely on them when you can make your own & i came up with an implementation of my own as below.
Here we have a PasswordTextBox component which helps us in achieving the above results. I have used native base for UI but it does not matter which UI framework you are using, its more off a conceptual thing in this. You can follow the below steps to achieve this using any UI library including react-native itself
- Declare a state with default icon & to hide/show password
- Render the icon with the state & text box in password mode on load
- On icon tap, trigger the event to update the state of text & icon
You can use the component as below
<PasswordTextBox icon=”lock” label=”New Password” onChange={(v) => this._updateState(‘new’, v)} />
You can find the source from the repo mentioned below
