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.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, TextInput } from 'react-native'; |
2. Create a Root View in render’s return block.
1 2 3 4 5 6 7 8 9 |
render() { return ( <View style={styles.MainContainer}> </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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Text Here" style={styles.TextInputStyle} / > </View> ); } |
4. Create Style for View and TextInput.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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%', } }); |
Screenshot in Android device :
