- Create Components folder under src folder
- Add OnlyNumericKeyPadTextInput.js file and add below Code
import React from "react";
import { StyleSheet, View, TextInput, Text } from "react-native";
const OnlyNumericKeyPadTextInput = () => {
return (
<View style={styles.MainContainer}>
<Text>TextInput that only accepts numeric characters</Text>
<TextInput
placeholder="Text Input For Numeric Value"
style={styles.TextInputStyle}
keyboardType={"numeric"}
/>
</View>
);
};
export default OnlyNumericKeyPadTextInput;
const styles = StyleSheet.create({
MainContainer: {
justifyContent: "center",
flex: 1,
margin: 10
},
TextInputStyle: {
textAlign: "center"
}
});
- Open App.js file and update code as below
import React from 'react';
import { View,StyleSheet } from 'react-native';
import OnlyNumericKeyPadTextInput from './src/Component/OnlyNumericKeyPadTextInput'
const App=()=> {
return (
<View style={styles.container}>
<OnlyNumericKeyPadTextInput/>
</View>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop:80
},
});
