The PlaceHolder prop is used to show some user define default text inside TextInput component. This text can be anything with a specific message which tells the application user regarding to that particular TextInput. Using the PlaceHolder user knows what type of value(information) he needs to fill inside Text Input component. So in this tutorial we would going to Set Default PlaceHolder Text in TextInput Component in Android iOS React native application.
Contents in this project Set Default PlaceHolder Text in TextInput Component in React Native Android iOS app:
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 Parent View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
)
}
|
3. Create TextInput component inside Parent View with placeholder prop.
placeholder : Used to set Place Holder default text in Text Input component.
style : Used to call Style.
underlineColorAndroid : Hiding the bottom bar in Android devices.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render()
{
return(
<View style = { styles.MainContainer }>
<TextInput
placeholder = “Enter Your Name”
style={styles.textInput_Style}
underlineColorAndroid=‘transparent’
/>
</View>
)
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInput_Style:
{
width: ‘90%’,
height: 42,
borderColor: ‘#009688’,
borderWidth: 1,
backgroundColor: ‘#fff’,
textAlign:‘center’
}
});
|
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
44
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput } from ‘react-native’;
export default class MyApp extends Component
{
render()
{
return(
<View style = { styles.MainContainer }>
<TextInput
placeholder = “Enter Your Name”
style={styles.textInput_Style}
underlineColorAndroid=‘transparent’
/>
</View>
)
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInput_Style:
{
width: ‘90%’,
height: 42,
borderColor: ‘#009688’,
borderWidth: 1,
backgroundColor: ‘#fff’,
textAlign:‘center’
}
});
|
Screenshot in Android device:
Screenshot in iOS device :
Also Read :
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
How to use Multiple States in React Native Hooks Functional Component
React Native Create Custom Countdown Timer for Android iOS Tutorial
IF-Else & Nested IF-Else conditional statement in React Native example
React Native Integrate Google Maps in Android iOS App Example Tutorial
