How to create phone number input field with keyboard in React native?

A phone number is different from numeric field because it can have a + character. This is because the country codes starts with + like +1 for United States.

The keyboard should have easy access to numbers and + sign.

In React Native, you can create a phone number input field with appropriate keyboard using keyboardType=phone-pad prop in <TextInput> component. It works on both iOS and Android phones.

Code Example

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

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

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

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

export default PhoneNumberTextInput;

Output –

From the above image you can see that both iOS (left) and Android (right) phones are showing the keyboard with numeric keys and + key. This will help the user to type the phone numbers easily.

In the code we are setting keyboardType=phone-pad in line 15.

Live Demo

Conclusion

In conclusion the phone number fields can be implemented using keyboardType=phone-pad prop of TextInput component in React Native.