React-Native Hide Show Password InputText Component

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

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.