React Native Phone Number Input
Performance oriented React Native Phone Number Input with typings and proper validation for any country.
❤️ by developer for developers
Made with Want to show your love?
Click on
Table of Contents
Installation
$ yarn add react-native-phone-number-input
OR
$ 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?
: CountryCodewithDarkTheme?
: booleanwithShadow?
: booleanautoFocus?
: booleandefaultValue?
: stringvalue?
: stringdisabled?
: booleandisableArrowIcon?
: booleanplaceholder?
: 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
: () => CountryCodegetCallingCode
: () => string | undefinedgetNumberAfterPossiblyEliminatingZero
: () => {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 usinghttps://github.com/garganurag893/react-native-phone-number-input
Step 2
- HACK AWAY!
🔨 🔨 🔨
Step 3
🔃 Create a new pull request usinghttps://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
Hire
Looking for a React/React-Native Freelance Expert? Email at [email protected]