react-native-phone-number-input
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published
    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

    Install

    npm i react-native-phone-number-input

    DownloadsWeekly Downloads

    9,237

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    12

    Last publish

    Collaborators

    • garganurag