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 :
Screenshot in iOS device :
Also Read :
React Native Copy Text to Clipboard Android iOS Example
Create Bottom Tab Navigation Navigator in React Native with Tab Icon
React Native Sort String Array into Alphabetical Order Example
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
Android project not found Are you sure this is a React Native project? Error Solution
