Securing password by not showing while typing is very important feature for both Android and iOS applications. Because each time when we are trying to Login, Registering and doing something that needs security, so the people who stay close to use would never see our password is very important task. So in this tutorial we would going to hide the TextInput inside typed text in star dotted format using secureTextEntry={true} prop in react native application.
Contents in this project Set TextInput Type Style Password Android iOS Example :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add AppRegistry, StyleSheet, TextInput and View component in import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View} from ‘react-native’;
|
3. Add View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View>
</View>
);
}
}
|
4. Create css class named as MainContainer and TextInputStyle just above the AppRegistry.registerComponent line.
MainContainer : This css class will call in parent View component.
TextInputStyle : This CSS class will set Text Input style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyle: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: ‘#D50000’,
// Set border Radius.
borderRadius: 6 ,
}
});
|
5. Call the MainContainer class in View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
}
|
6. Implement TextInput component inside the View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Text Input For Password”
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyle}
// Making the Text Input Text Hidden.
secureTextEntry={true}
/>
</View>
|
7. Complete source code of index.android.js / index.ios.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View} from ‘react-native’;
class MainProject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Text Input For Password”
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyle}
// Making the Text Input Text Hidden.
secureTextEntry={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyle: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: ‘#D50000’,
// Set border Radius.
borderRadius: 6 ,
}
});
AppRegistry.registerComponent(‘MainProject’, () => MainProject);
|
Screenshot in iOS device :
Screenshot in Android device :
Also Read :
React Native flexDirection Row Column Explained iOS Android example
Change ActivityIndicator color in React Native Android iOS Tutorial
React Native Material Design Button Android iOS Example Tutorial
Set Text Align Vertically Horizontally Center in React Native Android iOS
React Native User Registration With PHP MySQL Android iOS Tutorial
