React Native Set TextInput Type Style Password Example

This tutorial explains how do you style a TextInput component in react native for password input. In react native application when you are entering any text or value in TextInput layout component, then by default entered text is visible to user. But sometime we need to encrypt the value present in TextInput layout component, so that details are not exposed to any other people/users.

Just take an example of password field in basic HTML Form, where the password field value is encrypted to asterisk symbol. Similarly In this tutorial we are going to encrypt or hide the password value in TextInput layout component in react native application.

To create secure password field, you need to use secureTextEntry props inside the TextInput component. (i.e : secureTextEntry={true})

code snippet to create secure password field using TextInput component :

<TextInput
style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
// Adding hint in TextInput using Placeholder option.
placeholder=" Enter Your Password"          
// Making the Under line Transparent.
underlineColorAndroid="transparent"
// Making the Text Input Text Hidden.
secureTextEntry={true}
/>

Secure Password Field In React Native Application :

Lets follow the below steps to Set TextInput Type Style Password in React Native.

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 index.android.js  / index.ios.js  in your favourite 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 { Platform, StyleSheet, Text, View, TextInput } from "react-native";

Step-4:  Implement render  method and return TextInput component wrapped by root View  component.

• secureTextEntry : This prop field helps to hide or encrypt the value for password field. (Example :  secureTextEntry={true}) 

<TextInput
style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
// Adding hint in TextInput using Placeholder option.
placeholder=" Enter Your First Name"          
// Making the Under line Transparent.
underlineColorAndroid="transparent"
// Making the Text Input Text Hidden.
secureTextEntry={true}
/>

Complete Source Code for App.js 

Lets see the complete source code that helps to encrypt or hide the password value in TextInput layout component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

export default class HomeActivity extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
        Secure Password Field In React Native Application
        </Text>

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          // Adding hint in TextInput using Placeholder option.
          placeholder=" Enter Your Password"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
          // Making the Text Input Text Hidden.
          secureTextEntry={true}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Screenshot :

This is all about React Native Set TextInput Type Style Password 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.