React Native International Phone Number Input

(null); const [inputValue, setInputValue] = useState(''); function handleInputValue(phoneNumber: string) { setInputValue(phoneNumber); } function handleSelectedCountry(country: ICountry) { setSelectedCountry(country); } return ( Country:{' '} {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`} Phone Number:{' '} {`${selectedCountry?.callingCode} ${inputValue}`} isValid:{' '} {isValidPhoneNumber(inputValue, selectedCountry) ? 'true' : 'false'} ); } ```
## Intermediate Usage - ### Typescript + useRef ```tsx import React, { useRef } from 'react'; import { View, Text } from 'react-native'; import PhoneInput, { ICountry, IPhoneInputRef, } from 'react-native-international-phone-number'; export default function App() { const phoneInputRef = useRef(null); function onSubmitRef() { Alert.alert( 'Intermediate Result', `Country: ${inputRef.current?.selectedCountry?.name?.en} \nPhone Number: ${inputRef.current?.fullPhoneNumber} \nisValid: ${inputRef.current?.isValid}` ); } return ( Submit ); } ``` > Observation: Don't use the useRef hook combined with the useState hook to manage the phoneNumber and selectedCountry values. Instead, choose to use just one of them (useRef or useState).
## Advanced Usage - ### React-Hook-Form + Typescript + Default Phone Number Value ```tsx import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity, Alert } from 'react-native'; import PhoneInput, { ICountry, isValidPhoneNumber, } from 'react-native-international-phone-number'; import { Controller, FieldValues } from 'react-hook-form'; interface FormProps extends FieldValues { phoneNumber: string; } export default function App() { const [selectedCountry, setSelectedCountry] = useState< undefined | ICountry >(undefined); function handleSelectedCountry(country: ICountry) { setSelectedCountry(country); } function onSubmit(form: FormProps) { const phoneNumber = `${selectedCountry?.callingCode} ${form.phoneNumber}`; const isValid = isValidPhoneNumber( form.phoneNumber, selectedCountry as ICountry ); Alert.alert( 'Advanced Result', `Country: ${selectedCountry?.name?.en} \nPhone Number: ${phoneNumber} \nisValid: ${isValid}` ); } return ( ( )} /> Submit ); } ``` > Observations: > > 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)` > 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above).
## Customizing lib - ### Dark Mode: ```jsx ... ... ``` - ### Custom Lib Styles: ```jsx ... ... ``` - ### Custom Caret: ```jsx ... } // react-native-vector-icons /> ... ``` - ### Custom Placeholders/Messages: ```jsx ... ... ``` - ### Custom Modal Height: ```jsx ... ... ``` - ### Country Modal Disabled Mode: ```jsx ... ... ``` - ### Phone Input Disabled Mode: ```jsx ... ... ``` - ### Custom Disabled Mode Style: ```jsx const [isDisabled, setIsDisabled] = useState(true) ... ... ``` - ### Change Default Language: ```jsx ... ... ``` - ### Custom Phone Mask: ```jsx ... ... ``` - ### Custom Default Flag/Country: ```jsx ... ... ``` - ### Default Phone Number Value: ```jsx ... ... ``` > Observations: > > 1. You need to use a default value with the [e164](https://en.wikipedia.org/wiki/E.164) format: `+(country callling code)(area code)(number phone)` > 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above). - ### Show Only Some Countries Inside Modal: ```jsx ... ... ``` - ### Exclude Some Countries Inside Modal: ```jsx ... ... ``` - ### Show Popular Countries at the Top of the Countries List Inside Modal: ```jsx ... ... ``` - ### Custom Modal Section Titles: ```jsx ... ... ``` - ### Hide the Modal Section Titles: ```jsx ... ... ``` - ### Right to Left Input: ```jsx import { I18nManager } from "react-native"; ... ... ``` - ### Don't allow Zero After Calling Code: ```jsx ... ... ```
## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts)) - `language?:` [ILanguage](lib/interfaces/language.ts); - `customMask?:` string[]; - `defaultValue?:` string; - `value?:` string; - `onChangePhoneNumber?:` (phoneNumber: string) => void; - `defaultCountry?:` [ICountryCca2](lib/interfaces/countryCca2.ts); - `selectedCountry?:` [ICountry](lib/interfaces/country.ts); - `onChangeSelectedCountry?:` (country: [ICountry](lib/interfaces/country.ts)) => void; - `showOnly?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts); - `excludedCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts); - `popularCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts); - `popularCountriesSectionTitle?:` string; - `restOfCountriesSectionTitle?:` string; - `modalSectionTitleDisabled?:` boolean; - `rtl?:` boolean; - `disabled?:` boolean; - `modalDisabled?:` boolean; - `modalHeight?:` number | string; - `theme?:` [ITheme](lib/interfaces/theme.ts); - `phoneInputStyles?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts); - `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts); - `modalSearchInputPlaceholder?:` string; - `modalSearchInputPlaceholderTextColor?:` string; - `modalSearchInputSelectionColor?:` string; - `modalNotFoundCountryMessage?:` string; - `customCaret?:` [ReactNode](https://reactnative.dev/docs/react-node); - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>; - `allowZeroAfterCallingCode?:` boolean.
## Functions - `getAllCountries:` () => [ICountry](lib/interfaces/country.ts)[]; - `getCountriesByCallingCode:` (callingCode: string) => [ICountry](lib/interfaces/country.ts)[] | undefined; - `getCountryByCca2:` (cca2: string) => [ICountry](lib/interfaces/country.ts) | undefined; - `getCountriesByName:` (name: string, language: [ILanguage](lib/interfaces/language.ts)) => [ICountry](lib/interfaces/country.ts)[] | undefined; - `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](lib/interfaces/country.ts) | undefined; - `isValidPhoneNumber:` (phoneNumber: string, country: [ICountry](lib/interfaces/country.ts)) => boolean.
## 🎌 Supported languages 🎌 ```js "name": { "bg": "Bulgarian", "by": "Belarusian", "cn": "Chinese", "cz": "Czech", "de": "German", "ee": "Estonian", "el": "Greek", "en": "English", "es": "Espanol", "fr": "French", "he": "Hebrew", "it": "Italian", "jp": "Japanese", "nl": "Dutch", "pl": "Polish", "pt": "Portuguese", "ro": "Romanian", "ru": "Russian", "ua": "Ukrainian", "zh": "Chinese (Simplified)", "ar": "Arabic", "tr": "Turkish" }, ```
## Testing When utilizing this package, you may need to target the PhoneInput component in your automated tests. To facilitate this, we provide a testID props for the PhoneInput component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with PhoneInput elements within your tests, ensuring a robust and reliable testing experience. ```jsx // Assuming PhoneInput has testID="phone-number" const phoneInput = getByTestId('phone-number-flag'); ```
## Contributing - Fork or clone this repository ```bash $ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git ``` - Repair, Update and Enjoy 🛠️🚧⚙️ - Create a new PR to this repository
## License [ISC](LICENSE.md)

Thanks for stopping by! 😁