By default both Android and iOS applications open the normal multi purpose keyboard with Alphabetic Keys, Numeric Keys and Special Symbol Keys. But when developer needs to exclusively get phone number or any other numeric value from user then this is must that only Numeric Keyboard opens on TextInput selection time, So user cannot enter alphabetic value by mistake. So in this tutorial we would going to create a react native app to accept Get Only Numeric Value From TextInput by opening Numeric-Number Keypad on TextInput selection using keyboardType={‘numeric’} prop.
Contents in this project Get Only Numeric Value From TextInput Example :
1. Import AppRegistry, StyleSheet, View and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, TextInput} from ‘react-native’;
|
2. Create a root view in render’s return block and inside that root view create TextInput component with keyboardType={‘numeric’} prop. This Prop would allow us to open only Number keypad on selection of TextInput.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Text Input For Numeric Value”
style={styles.TextInputStyle}
keyboardType={‘numeric’}
/>
</View>
);
}
|
3. Create Style :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyle: {
textAlign: ‘center’,
}
});
|
4. 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 { AppRegistry, StyleSheet, View, TextInput} from ‘react-native’;
export default class MainProject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Text Input For Numeric Value”
style={styles.TextInputStyle}
keyboardType={‘numeric’}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyle: {
textAlign: ‘center’,
}
});
|
Screenshot in iOS mobile phone :
Screenshot in Android mobile phone :
Also Read :
React Native Swipeable Tab Navigation View Android iOS Tutorial
React Native set View Align Horizontally Center dynamically on button click
React Native Vertical ScrollView Android iOS Example Tutorial
React Native Runtime PermissionsAndroid Request Android Example Tutorial
React Native Show Image Icon Inside Activity Header Title Bar in React Navigation
