/react-native-phone-number-input

React Native component for phone number.

Primary LanguageJavaScriptMIT LicenseMIT

Anurag Garg Anurag Garg

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

build build build build

Want to show your love?

Click on 🌟 button.

Table of Contents

Installation

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

OR

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

Features

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

Support

Reach out to me at one of the following places!

License

License

Hire

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