react-native-hide-show-password-input

    1.2.0 • Public • Published

    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 add react-native-hide-show-password-input

    Link vector icons library

    react-native link react-native-vector-icons

    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';
    
    export default class App extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          password: '',
        };
      }
      
      render() {
        const { password } = this.state;
        
        return (
          <View style={{ margin: 20 }}>
    
            <PasswordInputText
              getRef={input => this.input = input}
              value={password}
              onChangeText={(password) => this.setState({ password })}
            />
    
            <Button
              title="Clear"
              onPress={() => this.input.clear()} />
              
          </View>
        );
      }
    }

    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 and TextInput.

    Keywords

    none

    Install

    npm i react-native-hide-show-password-input

    DownloadsWeekly Downloads

    966

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    3.18 MB

    Total Files

    84

    Last publish

    Collaborators

    • avatar