loading...

React Native TextInput that only accepts numeric characters

skptricks profile image skptricks Originally published at skptricks.com on ・2 min read

source : React Native TextInput That Only Accepts Numeric Characters

This tutorial explains How to Get Only Numeric Value From TextInput in React Native application. By default TextInput component will not display numeric text qwerty keyboard. 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, So that user cannot enter alphabetic value by mistake.

React Native TextInput that only accepts numeric characters

In this example we are going to create TextInput component, which will accept only numeric characters via Numeric Number Keyboard. For that we need to explicitly specify the keyboardType={‘numeric’} prop in TextInput Component.

Lets see the below complete source code that helps to display numeric value in android or ios qwerty keyboard.

/\*\*  
 \* Sample React Native App  
 \* https://github.com/facebook/react-native  
 \* @flow  
 \*/  

import React, { Component } from "react";  
import { Platform, StyleSheet, View, Button, TextInput, } from "react-native";  

export default class App extends Component {  

  render() {  
return (  
<View style={styles.container}>  

<TextInput  
          placeholder="Enter Your Mobile Number"  
          underlineColorAndroid='transparent'  
          style={styles.TextInputStyle}  
**keyboardType={'numeric'}**  
/>  

</View>  
);  
}  
}  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
TextInputStyle: {  
    textAlign: 'center',  
    height: 40,  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: '#009688',  
    marginBottom: 10  
}  
});

Screenshot :

React Native TextInput that only accepts numeric characters
This is all about React Native TextInput that only accepts numeric characters. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Posted on by:

skptricks profile

skptricks

@skptricks

Welcome to skptricks, I have written and developed this site so that Learner may learn computer science related technologies and various programming ...

Discussion

pic
Editor guide
 

This just makes sure that the input keyboard is numeric not that you can only input numeric characters. If someone copy and pastes in some string characters it is still valid. Also the inputs are still just a string and not an actual numeric.