Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/garganurag893/react-native-phone-number-input
React Native component for phone number.
https://github.com/garganurag893/react-native-phone-number-input
phone-number react react-native reactjs
Last synced: 13 days ago
JSON representation
React Native component for phone number.
- Host: GitHub
- URL: https://github.com/garganurag893/react-native-phone-number-input
- Owner: garganurag893
- License: mit
- Created: 2020-07-25T16:46:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-05T10:24:52.000Z (4 months ago)
- Last Synced: 2024-10-21T04:59:31.327Z (20 days ago)
- Topics: phone-number, react, react-native, reactjs
- Language: JavaScript
- Homepage:
- Size: 5.73 MB
- Stars: 373
- Watchers: 4
- Forks: 216
- Open Issues: 110
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
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
## 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
```
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](https://github.com/google/libphonenumber))
## Usage
For more complete example open [App.tsx](https://github.com/garganurag893/react-native-phone-number-input/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
/>
{
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;
## 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...
### 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 [email protected]
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**
## Hire
Looking for a React/React-Native Freelance Expert? Email at [email protected]
[react-native-country-picker-modal]: https://github.com/xcarpentier/react-native-country-picker-modal