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 :

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.