Performance oriented React Native Phone Number Input with typings and proper validation for any country.
Click on π button.
$ yarn add react-native-phone-number-input
OR
$ npm i react-native-phone-number-input --save
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;
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;getCountryCode
: () => CountryCodegetCallingCode
: () => string | undefinedgetNumberAfterPossiblyEliminatingZero
: () => {number: string , formattedNumber: string };isValidNumber
: (number: string) => booleanYES
Upgrade versions['Flipper'] ||= '~> 0.37.0'
in podfile.
To get started...
Option 1
Option 2
https://github.com/garganurag893/react-native-phone-number-input
https://github.com/garganurag893/react-native-phone-number-input
.Reach out to me at one of the following places!
Looking for a React/React-Native Freelance Expert? Email at garganurag893@gmail.com