How to Get Only Numeric Value From TextInput in React Native

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.

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.

3. Create Style :

4. Complete source code for App.js File :

Screenshot in iOS mobile phone :

Screenshot in Android mobile phone :

Get Only Numeric Value

3 Comments

  1. in this example , if you run , you can enter dot(.) also in text input , how you can disable dot(.) in the numeric keypad.

    • Sachin you cannot disable dot(.) because dot is a part of this keypad but Using the String functions you can disable dot so if the dot is entered then it will show a alert message.

  2. yeah , thats the trick which i also did , but i have seen few apps , which just provide only number in numberpad.

Leave a Reply

Your email address will not be published. Required fields are marked *