react-native-input-secure-text/src/InputSecureText.js

Componente serve para entradas de senha e já vem personalizado com o botão de mostrar e esconder senha

'use strict';

import React, { Component } from "react";
import PropTypes from "prop-types";
import { TextInput, SafeAreaView, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

import styles from "./styles";

export default class InputSecureText extends Component {
    static propTypes = {
        containerStyle: PropTypes.any,
        inputStyle: PropTypes.any,
        iconStyle: PropTypes.any,
        placeholder: PropTypes.string,
        placeholderTextColor: PropTypes.string,
        iconColor: PropTypes.any,
        iconSize: PropTypes.number,
        password: PropTypes.string.isRequired,
        setPassword: PropTypes.func.isRequired,
        submit: PropTypes.func.isRequired,
        optionTextStyle: PropTypes.any,
    }

    static defaultProps = {
        placeholderTextColor: "#48626f",
        iconColor: "#48626f",
        iconSize: 25,
    }
    constructor(props) {
        super(props);
        this.state = {
            showSenha: true,
        };
    }

    focus() {
        this.input.focus();
      }

      blur() {
        this.input.blur();
      }

      clear() {
        this.input.clear();
      }

      isFocused() {
        return this.input.isFocused();
      }

    _renderInput(){
        const {
            iconSize,
            containerStyle,
            inputStyle,
            placeholder,
            placeholderTextColor,
            iconColor,
            iconStyle,
            setPassword,
            password,
            submit,
        } = this.props
        return (

             <SafeAreaView style={[styles.container, containerStyle]}>
                <TextInput
                    autoCorrect={false}
                    ref={ref => {
                        this.input = ref;
                      }}
                    onSubmitEditing={() => submit && submit()}
                    value={password}
                    onChangeText={setPassword}
                    style={[styles.input, inputStyle]}
                    placeholder={placeholder}
                    secureTextEntry={this.state.showSenha}
                    placeholderTextColor={placeholderTextColor}
                    autoCapitalize="none"
                />

                <Icon
                    name={this.state.showSenha ? "eye-off" : "eye"}
                    color={iconColor}
                    onPress={() =>
                        this.setState({ showSenha: !this.state.showSenha })
                    }
                    size={iconSize}
                    style={[styles.icon, iconStyle]}
                />
            </SafeAreaView>


        );
    }

    render() {
        return (

            this._renderInput()

        );
    }
}