React Native Set Hint PlaceHolder Align Center Inside TextInput

This tutorial explains how to display Hint or Placeholder field inside the TextInput component. This placeholder provides information to user, about fields input parameter pattern. In this example we will use TextInput component and display the placeholder or hint in centered align order. In order to display hint or placeholder in centered align, we need to use css style-sheet property this is textAlign: 'center'.

React Native Set Hint or PlaceHolder Inside TextInput 

Lets see the below source code that helps to display hint or placeholder in TextInput component in react native application.

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

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

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>

        <TextInput
          placeholder="Enter Your Userame"
          underlineColorAndroid='transparent'
          style={styles.TextInputStyle}
        />

        <TextInput
          placeholder="Enter Your Password"
          underlineColorAndroid='transparent'
          style={styles.TextInputStyle}
          secureTextEntry={true}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  TextInputStyle: {
    textAlign: 'center',
    height: 40,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#009688',
    marginBottom: 10
  }
});

Screenshot :

This is all about React Native Set Hint PlaceHolder Align Center Inside TextInput. 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.