React Native Phone Number Input With Mask
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](#table-of-contents)
- [Installation](#installation)
- [Features](#features)
- [Usage](#usage)
- [Props](#props)
- [Methods](#methods)
- [FAQ](#faq)
- [Is it supported and tested both on android and iOS?](#is-it-supported-and-tested-both-on-android-and-ios)
- [NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?](#nsurlresponse-allheaderfields-unrecognized-selector-sent-to-instance-xx-crash)
- [Contributing](#contributing)
- [Step 1](#step-1)
- [Step 2](#step-2)
- [Step 3](#step-3)
- [Support](#support)
- [License](#license)
- [Hire](#hire)
## Installation
```bash
$ yarn add react-native-phone-number-input-with-mask
```
OR
```bash
$ npm i react-native-phone-number-input-with-mask --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](https://github.com/google/libphonenumber))
## Usage
For more complete example open [App.tsx](https://github.com/otaviollneto/react-native-phone-number-input-with-mask/blob/master/example/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"}
)}
{
setValue(text);
}}
onChangeFormattedText={(text) => {
setFormattedValue(text);
}}
withDarkTheme
withShadow
autoFocus
mask={'([00]) [0] [0000]-[0000]'}
/>
{
const checkValid = phoneInput.current?.isValidNumber(value);
setShowMessage(true);
setValid(checkValid ? checkValid : false);
}}
>
Check
);
};
export default App;
```
## Props
- `defaultCode?`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252)
- `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](https://reactnative.dev/docs/textinput);
- `textInputStyle?`: `StyleProp`;
- `codeTextStyle?`: `StyleProp`;
- `flagButtonStyle?`: `StyleProp`;
- `countryPickerButtonStyle` : `StyleProp`;
- `layout?`: "first" | "second";
- `filterProps?`: CountryFilterProps;
- `countryPickerProps?`: any;
- `onBlur?`: any;
## Methods
- `getCountryCode`: () => [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252)
- `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...
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**
## Hire
[react-native-country-picker-modal]: https://github.com/xcarpentier/react-native-country-picker-modal
