Sunday, May 26, 2019

React native dynamically show and hide Password Content Example

This tutorial explains how can we dynamically show and hide password on button click in react native application. You may have seen this feature in various application like Google, Facebook, Twitter, Instagram etc. By default password field is in hidden mode and when user writes anything in password textfield, then it will display the encrypted value or asterisk symbol in text field box. but when user clicks on show button, then it will display the password field content in simple text format.

React native dynamically show and hide Password Content Example


 Demo                 Download   

React native dynamically show and hide Password Example :

Lets follow the below steps to create hide and show password field in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.
import React, { Component } from 'react';
import { AppRegistry, View, Image, TouchableOpacity, TextInput, StyleSheet } from 'react-native';

Step 4: Lets create constructor block inside your App component.
constructor() {
    super();

    this.state = { hidePassword: true }
}

this.state variable helps to hide and show password textfield content.

Step 5: Implement setPasswordVisibility function inside your App component. hidePassword  boolean state variable is used to toggle the value of secureTextEntry  property of react native  TextInput  component. I am describing about secureTextEntry  property of TextInput  component in the next step.
setPasswordVisibility = () => {
    this.setState({ hidePassword: !this.state.hidePassword });
}

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() {
    return (
      <View style={styles.container}>
        <View style={styles.textBoxContainer}>
          <TextInput underlineColorAndroid="transparent" secureTextEntry={this.state.hidePassword} style={styles.textBox} />
          <TouchableOpacity activeOpacity={0.8} style={styles.touachableButton} onPress={this.setPasswordVisibility}>
            <Image source={(this.state.hidePassword) ? require('./images/hide.png') : require('./images/view.png')} style={styles.buttonImage} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Step 7 : Apply the below style sheet design.
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    textBoxContainer: {
      position: 'relative',
      alignSelf: 'stretch',
      justifyContent: 'center'
    },
    textBox: {
      fontSize: 20,
      alignSelf: 'stretch',
      height: 45,
      paddingRight: 45,
      paddingLeft: 8,
      borderWidth: 1,
      paddingVertical: 0,
      borderColor: 'grey',
      borderRadius: 5,
    },
    touachableButton: {
      position: 'absolute',
      right: 3,
      height: 40,
      width: 35,
      padding: 2
    },
    buttonImage: {
      resizeMode: 'contain',
      height: '100%',
      width: '100%',
    }

  });


Complete Source Code for App.js 

Lets see the complete source code that helps to dynamically show and hide Password textfield in react native application.

import React, { Component } from 'react';
import { AppRegistry, View, Image, TouchableOpacity, TextInput, StyleSheet } from 'react-native';


export default class App extends Component {

  constructor() {
    super();

    this.state = { hidePassword: true }
  }

  setPasswordVisibility = () => {
    this.setState({ hidePassword: !this.state.hidePassword });
  }


  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textBoxContainer}>
          <TextInput underlineColorAndroid="transparent" secureTextEntry={this.state.hidePassword} style={styles.textBox} />
          <TouchableOpacity activeOpacity={0.8} style={styles.touachableButton} onPress={this.setPasswordVisibility}>
            <Image source={(this.state.hidePassword) ? require('./images/hide.png') : require('./images/view.png')} style={styles.buttonImage} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    textBoxContainer: {
      position: 'relative',
      alignSelf: 'stretch',
      justifyContent: 'center'
    },
    textBox: {
      fontSize: 20,
      alignSelf: 'stretch',
      height: 45,
      paddingRight: 45,
      paddingLeft: 8,
      borderWidth: 1,
      paddingVertical: 0,
      borderColor: 'grey',
      borderRadius: 5,
    },
    touachableButton: {
      position: 'absolute',
      right: 3,
      height: 40,
      width: 35,
      padding: 2
    },
    buttonImage: {
      resizeMode: 'contain',
      height: '100%',
      width: '100%',
    }

  });

Screenshot :


React native dynamically show and hide Password Content Example

React native dynamically show and hide Password Content Example

This is all about React native dynamically show and hide Password Content Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

2 comments:

  1. Works fine in iOS(simulator, real device) and Android Emulator, not working in real android device, there is something wrong with secureTextEntry prop.

    ReplyDelete