In our previous tutorial we have discussed about showing Place Holder text inside TextInput, Now this tutorial is the extend part of Place Holder tutorial. PlaceHolder Text Color can be modified using placeholderTextColor = “” prop, This prop would allow us to set Change TextInput PlaceHolder Text Color for both Android and iOS react native applications.
Contents in this project Set Change TextInput PlaceHolder Text Color iOS Android React Native 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. Creating a Root View in render’s return block, This view is our main view.
|
1
2
3
4
5
6
7
8
9
10
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
)
}
|
3. Creating a TextInput component in your Root View.
placeholder : Used to set Place Holder.
placeholderTextColor : Used to set Place Holder Text Color style.
|
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”
placeholderTextColor = “#D50000”
style={styles.textInput}
underlineColorAndroid=‘transparent’
/>
</View>
)
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInput:
{
width: ‘85%’,
height: 40,
textAlign:‘center’,
borderWidth: 1,
borderColor: ‘#FF9800’,
backgroundColor: ‘#fff’,
}
|
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”
placeholderTextColor = “#D50000”
style={styles.textInput}
underlineColorAndroid=‘transparent’
/>
</View>
)
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInput:
{
width: ‘85%’,
height: 40,
textAlign:‘center’,
borderWidth: 1,
borderColor: ‘#FF9800’,
backgroundColor: ‘#fff’,
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
Create Simple Splash Screen in React Native Android iOS App Tutorial
React Native Creating & Calling Function From Same Class Example
React Native Chart Kit Android iOS Example Creating Line Chart
Add Show Image Icon Inside Button in React Native Application
React Native Set TextInput maxLength Validation iOS Android Example
