How to open numeric keyboard in React Native? Code Example

If you want to restrict the data in input field to be of type numeric only, then you can use keyboardType prop of <TextInput> component and set it to –

• number-pad – For numbers only
• decimal-pad – For numbers and decimals
• numeric – Same as decimal-pad

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View, Text } from "react-native";

const NumericTextInput = () => {
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>keyboardType = number-pad</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          keyboardType="number-pad"
        />

        <Text>keyboardType = decimal-pad</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          keyboardType="decimal-pad"
        />

        <Text>keyboardType = numeric</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          keyboardType="numeric"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default NumericTextInput;

Output –

From the image you can see that the keyboard layout is different for iOS phones for all the input fields. But Android has the same numeric layout for all the three values – number-pad, decimal-pad, numeric.

In the code we are setting the keyboardType=number-pad at line 15, keyboardType=decimal-pad at line 23 and keyboardType=numeric at line 31.

Live Demo

Conclusion

There are many types of keyboards in mobiles. For restricting the input to numeric, we can set keyboardType prop to any of the numeric values like number-pad, decimal-pad and numeric. It works with TextInput component of React native.