• Stars
    star
    353
  • Rank 120,322 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native component for phone number.
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 [email protected]