React Native Set Default PlaceHolder Text in TextInput Component

This tutorial explains how to add or set default PlaceHolder text in TextInput Component in react native application. PlaceHolder text can be anything with a specific message or short information that tells the application user regarding to that particular TextInput. By seeing the  PlaceHolder user knows what type of value or information required to fill inside Text Input component.When user starts typing the user’s entered text replaces the placeholder and when user erased all the text from TextInput  then again placeholder becomes visible.

Basically Placeholder provides hints or message about that particular TextInput Component, To add PlaceHolder text in TextInput Component, you need to specify placeholder=" Enter Your First Name" Props inside the TextInput Component.

Code Snippet to display placholder in TextInput Component

<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"
/>

ReactNative TextInput placeholder Example

Lets follow the below steps to add placeholder default text in TextInput Component.

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. Also specify the placeholder props inside the TextInput component.

• placeholder : Used to set Place Holder default text in Text Input component.
• underlineColorAndroid : Used to Hide the bottom bar in Android devices.

<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"
/>

Complete Source Code for App.js 

Lets see the complete source code that helps to set default placeholder text inside the TextInput Component.

/**
 * 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}>
          React Native TextInput PlaceHolder Text Example
        </Text>

        <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"
        />
      </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 setting default text inside TextInput layoutComponent with helps of placeholder props in React Native. 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.