https://github.com/vishaljadav24/react-native-hide-show-password-input

React-Native Hide Show Password InputText Component
https://github.com/vishaljadav24/react-native-hide-show-password-input

component hide-show password react-native react-native-component reactjs

Last synced: about 2 months ago
JSON representation

React-Native Hide Show Password InputText Component

• Host: GitHub
• URL: https://github.com/vishaljadav24/react-native-hide-show-password-input
• Owner: vishaljadav24
• License: mit
• Created: 2017-09-18T12:00:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T22:26:32.000Z (almost 2 years ago)
• Last Synced: 2024-09-26T07:06:53.294Z (3 months ago)
• Topics: component, hide-show, password, react-native, react-native-component, reactjs
• Language: Java
• Homepage:
• Size: 2.44 MB
• Stars: 63
• Watchers: 4
• Forks: 34
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-Native Hide Show Password InputText Component

[![npm version](https://badge.fury.io/js/react-native-hide-show-password-input.svg)](https://badge.fury.io/js/react-native-hide-show-password-input)

This is a custom component for React Native, a simple Hide Show Password InputText, compatible with both ios and android.

[![demo](https://i.imgur.com/kZ7ViHt.png)](https://i.imgur.com/kZ7ViHt.png)

# Installation.

Install the package with NPM.

```sh

npm install react-native-hide-show-password-input --save

```

Or with YARN

```sh

yarn add react-native-hide-show-password-input

```

Link vector icons library

```sh

react-native link react-native-vector-icons

```

# How to use.

Very simple to use just add this component in your file.

```js

// import packages

import React, { Component } from 'react';

import { View } from 'react-native';

import PasswordInputText from 'react-native-hide-show-password-input';

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      password: '',

    };

  }

  

  render() {

    const { password } = this.state;

    

    return (

      

         this.input = input}

          value={password}

          onChangeText={(password) => this.setState({ password })}

        />

         this.input.clear()} />

          

      

    );

  }

}

```

## Properties

 name                  | description                                 | type     | default

:--------------------- |:------------------------------------------- | --------:|:------------------

 iconSize              | Eye icon size                               |   Number | 25

 iconColor             | Eye icon color                              |   String | #222222

 label                 | Text Input animate label                    |   String | Password

 getRef                | Reference callback                          | Function | -

 

Note: You can use properties of [react-native-material-textfield](https://github.com/n4kz/react-native-material-textfield) and [TextInput](https://facebook.github.io/react-native/docs/textinput).