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

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

OR

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

Features

- :iphone: Works with iOS and Android, Cross-platform :100:
- :crossed_flags: Built-in country picker (uses [react-native-country-picker-modal][react-native-country-picker-modal])
- :wrench: Completely customizable UI!
- :heavy_check_mark: Proper validation (uses google-libphonenumber)

Usage

For more complete example open App.tsx

`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(null);
return (
<>



{showMessage && (

Value : {value}
Formatted Value : {formattedValue}
Valid : {valid ? "true" : "false"}

)}
ref={phoneInput}
defaultValue={value}
defaultCode="DM"
layout="first"
onChangeText={(text) => {
setValue(text);
}}
onChangeFormattedText={(text) => {
setFormattedValue(text);
}}
withDarkTheme
withShadow
autoFocus
/>
style={styles.button}
onPress={() => {
const checkValid = phoneInput.current?.isValidNumber(value);
setShowMessage(true);
setValid(checkValid ? checkValid : false);
}}
>
Check




);
};

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;
- textContainerStyle?: StyleProp;
- renderDropdownImage?: JSX.Element;
- textInputProps?: TextInputProps;
- textInputStyle?: StyleProp;
- codeTextStyle?: StyleProp;
- flagButtonStyle?: StyleProp;
- countryPickerButtonStyle : StyleProp;
- layout?: "first" | "second";
- filterProps?: CountryFilterProps;
- countryPickerProps?: any;

Methods

- getCountryCode: () => CountryCode
- getCallingCode: () => string | undefined
- getNumberAfterPossiblyEliminatingZero: () => {number: string , formattedNumber: string };
- isValidNumber: (number: string) => boolean

FAQ

$3

YES

$3

Upgrade versions['Flipper'] ||= '~> 0.37.0' in podfile.

Contributing

> To get started...

$3

- Option 1

- 🍴 Fork this repo!

- Option 2
- 👯 Clone this repo to your local machine using https://github.com/garganurag893/react-native-phone-number-input

$3

- HACK AWAY! 🔨🔨🔨

$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

[react-native-country-picker-modal]: https://github.com/xcarpentier/react-native-country-picker-modal