With blur and focus capabilities

Adding placeholder formatted on country would be nice (ie. 00 00 00 or 000 000 000).

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

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

OR

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

Features

• 📱 Works with iOS and Android, Cross-platform 💯
• 🎌 Built-in country picker (uses react-native-country-picker-modal)
• 🔧 Completely customizable UI!
• ✔️ Proper validation (uses google-libphonenumber)

Usage

For more complete example open App.tsx

import React, { useState, useRef } from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  TouchableOpacity,
  Text,
} from "react-native";
import PhoneInput from "react-native-phone-number-input";
import { Colors } from "react-native/Libraries/NewAppScreen";

const App: React.FC = () => {
  const [value, setValue] = useState("");
  const [formattedValue, setFormattedValue] = useState("");
  const [valid, setValid] = useState(false);
  const [showMessage, setShowMessage] = useState(false);
  const phoneInput = useRef<PhoneInput>(null);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}>
        <SafeAreaView style={styles.wrapper}>
          {showMessage && (
            <View style={styles.message}>
              <Text>Value : {value}</Text>
              <Text>Formatted Value : {formattedValue}</Text>
              <Text>Valid : {valid ? "true" : "false"}</Text>
            </View>
          )}
          <PhoneInput
            ref={phoneInput}
            defaultValue={value}
            defaultCode="DM"
            layout="first"
            onChangeText={(text) => {
              setValue(text);
            }}
            onChangeFormattedText={(text) => {
              setFormattedValue(text);
            }}
            withDarkTheme
            withShadow
            autoFocus
          />
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              const checkValid = phoneInput.current?.isValidNumber(value);
              setShowMessage(true);
              setValid(checkValid ? checkValid : false);
            }}
          >
            <Text>Check</Text>
          </TouchableOpacity>
        </SafeAreaView>
      </View>
    </>
  );
};

export 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 [email protected]

License

• MIT license

Hire

Looking for a React/React-Native Freelance Expert? Email at [email protected]