Package Exports

react-native-phone-number-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-phone-number-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
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

$ 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 garganurag893@gmail.com

License

MIT license

Hire

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