/react-native-hide-show-password-input

React-Native Hide Show Password InputText Component

Primary LanguageJavaScriptMIT LicenseMIT

React-Native Hide Show Password InputText Component

npm version

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

demo

Installation.

Install the package with NPM.

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

Or with YARN

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

How to use.

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

// import packages
import React, { Component } from 'react';
import { View } from 'react-native';
import PasswordInputText from 'react-native-hide-show-password-input';


// use in your class
export default class App extends Component {
    state = {
        password: '',
    };

    render() {
        return (
            <View style={{margin: 20}}>
                <PasswordInputText
                    value={this.state.password}
                    onChangeText={ (password) => this.setState({ password }) }
                />
            </View>
        );
    }
}

To focus the text input automatically, you can pass a textFieldRef property

export default class App extends Component {
    state = {
        password: '',
    };

    setTextFieldRef = (ref) => {
      this.passwordInputRef = ref.input
    }

    focusPasswordInput = () => {
      this.passwordInputRef.focus()
    }

    render() {
        return (
            <View style={{margin: 20}}>
                <PasswordInputText
                    value={this.state.password}
                    onChangeText={ (password) => this.setState({ password }) }
                    textFieldRef={this.setTextFieldRef}
                />
            </View>
        );
    }
}