React Native Set Hint PlaceHolder Align Center Inside TextInput

The style’s attribute textAlign: ‘center’ is used to Set Hint PlaceHolder Align Center Inside TextInput component and also it can centralize the TextInput inside typed text. So let’s get started ðŸ™‚ .

Contents in this project Set Hint PlaceHolder Align Center Inside TextInput in React Native :

1. Import StyleSheet, View and TextInput component in your project.

import React, { Component } from 'react';

import { StyleSheet, View, TextInput } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, View, TextInput } from 'react-native';

2. Create a Root View in render’s return block.

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

        

      </View>
    );
  }

render() {

return (

</View>

);

}

3. Create the TextInput component in View. Now we would set the hint in TextInput using placeholder=””. We would also call the Custom style class TextInputStyle and inside the class we would call textAlign: ‘center’ attribute to center the Hint and Typed text align center.

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

        <TextInput
                  
              placeholder="Enter Text Here"
          
              style={styles.TextInputStyle}

           / >

      </View>
    );
  }

render() {

return (

<TextInput

placeholder="Enter Text Here"

style={styles.TextInputStyle}

/ >

</View>

);

}

4. Create Style for View and TextInput.

const styles = StyleSheet.create({

  MainContainer: {

    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },

  TextInputStyle:{
    
       textAlign: 'center',
       height: 50,
       width: '93%',
     }

  
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

TextInputStyle:{

textAlign: 'center',

height: 50,

width: '93%',

}

});

5. Complete source code for App.js File :

import React, { Component } from 'react';

import { StyleSheet, View, TextInput } from 'react-native';

export default class App extends Component<{}> {

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

        <TextInput
                  
              placeholder="Enter Text Here"
          
              style={styles.TextInputStyle}

           / >

      </View>
    );
  }
}

const styles = StyleSheet.create({

  MainContainer: {

    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },

  TextInputStyle:{
    
       textAlign: 'center',
       height: 50,
       width: '93%',
     }

  
});