React Native TextInput that only accepts numeric characters
Tags: android, mobileapplicationd, reactnative
Published: 2019-01-26 11:54:05

---
title: React Native TextInput that only accepts numeric characters
published: true
tags: android,Mobile Application D,React Native
canonical_url: 
---

-----------
source : <a href="https://www.skptricks.com/2019/01/react-native-textinput-that-only-accept-numeric-characters.html" >React Native TextInput That Only Accepts Numeric Characters </a>
-------

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.  
  

[![](https://3.bp.blogspot.com/-m1BlWXvRN2Y/XEQXS4OzPCI/AAAAAAAACV0/sKgV7RolY6wneF9qiTeJQhfe3z2RFqzFACLcBGAs/s640/numeric.png)](https://3.bp.blogspot.com/-m1BlWXvRN2Y/XEQXS4OzPCI/AAAAAAAACV0/sKgV7RolY6wneF9qiTeJQhfe3z2RFqzFACLcBGAs/s1600/numeric.png)
  

## **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](https://www.skptricks.com/2018/07/working-with-textinput-in-react-native.html)**.
  
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](https://2.bp.blogspot.com/-Ul2szA7SpNc/XEQWizz4daI/AAAAAAAACVs/HikdDNlb3XM63yOOCzlQfmIQgIQTRy_TQCLcBGAs/s400/Screenshot_1547526127.png "React Native TextInput that only accepts numeric characters")](https://2.bp.blogspot.com/-Ul2szA7SpNc/XEQWizz4daI/AAAAAAAACVs/HikdDNlb3XM63yOOCzlQfmIQgIQTRy_TQCLcBGAs/s1600/Screenshot_1547526127.png)
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.