React Native Phone Number Input

Performance oriented React Native Phone Number Input with typings and proper validation for any country.

Made with ❤️ by developer for developers

Want to show your love?

Click on 🌟 button.

Table of Contents

• Table of Contents
• Installation
• Features
• Usage
• Props
• Methods
• FAQ
  • Is it supported and tested both on android and iOS?
  • NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?
• Contributing
  • Step 1
  • Step 2
  • Step 3
• Support
• License
• Hire

Installation

1$ yarn add react-native-phone-number-input

OR

1$ npm i react-native-phone-number-input --save

Features

• :iphone: Works with iOS and Android, Cross-platform :100:
• :crossed_flags: Built-in country picker (uses react-native-country-picker-modal)
• :wrench: Completely customizable UI!
• :heavy_check_mark: Proper validation (uses google-libphonenumber)

Usage

For more complete example open App.tsx

1import React, { useState, useRef } from "react";
2import {
3  SafeAreaView,
4  StyleSheet,
5  View,
6  StatusBar,
7  TouchableOpacity,
8  Text,
9} from "react-native";
10import PhoneInput from "react-native-phone-number-input";
11import { Colors } from "react-native/Libraries/NewAppScreen";
12
13const App: React.FC = () => {
14  const [value, setValue] = useState("");
15  const [formattedValue, setFormattedValue] = useState("");
16  const [valid, setValid] = useState(false);
17  const [showMessage, setShowMessage] = useState(false);
18  const phoneInput = useRef<PhoneInput>(null);
19  return (
20    <>
21      <StatusBar barStyle="dark-content" />
22      <View style={styles.container}>
23        <SafeAreaView style={styles.wrapper}>
24          {showMessage && (
25            <View style={styles.message}>
26              <Text>Value : {value}</Text>
27              <Text>Formatted Value : {formattedValue}</Text>
28              <Text>Valid : {valid ? "true" : "false"}</Text>
29            </View>
30          )}
31          <PhoneInput
32            ref={phoneInput}
33            defaultValue={value}
34            defaultCode="DM"
35            layout="first"
36            onChangeText={(text) => {
37              setValue(text);
38            }}
39            onChangeFormattedText={(text) => {
40              setFormattedValue(text);
41            }}
42            withDarkTheme
43            withShadow
44            autoFocus
45          />
46          <TouchableOpacity
47            style={styles.button}
48            onPress={() => {
49              const checkValid = phoneInput.current?.isValidNumber(value);
50              setShowMessage(true);
51              setValid(checkValid ? checkValid : false);
52            }}
53          >
54            <Text>Check</Text>
55          </TouchableOpacity>
56        </SafeAreaView>
57      </View>
58    </>
59  );
60};
61
62export default App;

Props

• defaultCode?: CountryCode
• withDarkTheme?: boolean
• withShadow?: boolean
• autoFocus?: boolean
• defaultValue?: string
• value?: string
• disabled?: boolean
• disableArrowIcon?: boolean
• placeholder?: string;
• onChangeCountry?: (country: Country) => void;
• onChangeText?: (text: string) => void;
• onChangeFormattedText?: (text: string) => void;
• containerStyle?: StyleProp<ViewStyle>;
• textContainerStyle?: StyleProp<ViewStyle>;
• renderDropdownImage?: JSX.Element;
• textInputProps?: TextInputProps;
• textInputStyle?: StyleProp<TextStyle>;
• codeTextStyle?: StyleProp<TextStyle>;
• flagButtonStyle?: StyleProp<ViewStyle>;
• countryPickerButtonStyle : StyleProp<ViewStyle>;
• layout?: "first" | "second";
• filterProps?: CountryFilterProps;
• countryPickerProps?: any;

Methods

• getCountryCode: () => CountryCode
• getCallingCode: () => string | undefined
• getNumberAfterPossiblyEliminatingZero: () => {number: string , formattedNumber: string };
• isValidNumber: (number: string) => boolean

FAQ

Is it supported and tested both on android and iOS?

YES

NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?

Upgrade versions['Flipper'] ||= '~> 0.37.0' in podfile.

Contributing

To get started...

Step 1

• Option 1

  • 🍴 Fork this repo!

• Option 2

  • 👯 Clone this repo to your local machine using https://github.com/garganurag893/react-native-phone-number-input

Step 2

• HACK AWAY! 🔨🔨🔨

Step 3

• 🔃 Create a new pull request using https://github.com/garganurag893/react-native-phone-number-input.

Support

Reach out to me at one of the following places!

• Twitter at https://twitter.com/AnuragG94634191
• Medium at https://medium.com/@garganurag893
• Instagram at https://www.instagram.com/the_only_anurag/
• Email at garganurag893@gmail.com

License

• MIT license

Hire

Looking for a React/React-Native Freelance Expert? Email at garganurag893@gmail.com