Skip to main content

Migration Guide

The package was renamed

react-native-international-phone-number is now published as rn-international-phone-number. Same author, same repository, same component — shorter name.

:::danger Update your dependency The npm account that published react-native-international-phone-number is no longer under the author's control. That package is not maintained by this project: it is frozen at v0.12.3 and will receive no fixes, features or security patches from here, and the author cannot deprecate or unpublish it.

Every release from v0.13.0 on is published only as rn-international-phone-number. If your package.json still points at the old name, switch it. :::

npm uninstall react-native-international-phone-number
npm install rn-international-phone-number react-native-safe-area-context
npx pod-install ios
- import PhoneInput from 'react-native-international-phone-number';
+ import PhoneInput from 'rn-international-phone-number';

:::caution New required peer dependency Since v0.13, the country selector modal comes from rn-country-select, which needs react-native-safe-area-context. Install it or the modal will fail to render. :::


From v0.12.x to v0.14.x

Renamed props

Before (v0.12)Now (v0.14)
selectedCountrycountry
onChangeSelectedCountryonChangeCountry
defaultValuedefaultPhoneNumber

defaultValue still works but is deprecated and will be dropped in a future release.

<PhoneInput
- defaultValue="+12505550199"
+ defaultPhoneNumber="+12505550199"
value={phone}
onChangePhoneNumber={setPhone}
- selectedCountry={country}
- onChangeSelectedCountry={setCountry}
+ country={country}
+ onChangeCountry={setCountry}
/>

Renamed ref properties

Before (v0.12)Now (v0.14)
value / getValue()nationalPhoneNumber / getNationalPhoneNumber()
valueFormatted / getValueFormatted()nationalPhoneNumberFormatted / getNationalPhoneNumberFormatted()
fullPhoneNumber / getFullPhoneNumber()internationalPhoneNumberFormatted / getInternationalPhoneNumberFormatted()
phoneNumberLengthinternationalPhoneNumberLength
selectedCountry / getSelectedCountry()country / getCountry()
isValidisValidPhoneNumber
- ref.current?.fullPhoneNumber // '+55 11 91234-5678'
+ ref.current?.internationalPhoneNumberFormatted // '+55 11 91234 5678'
+ ref.current?.internationalPhoneNumber // '+5511912345678' (E.164)

- ref.current?.isValid
+ ref.current?.isValidPhoneNumber

- ref.current?.selectedCountry
+ ref.current?.country

internationalPhoneNumber is new: the unformatted E.164 string, which is usually what you want to persist. See the Ref API.

Renamed utility

- import {getPhoneNumberLength} from 'react-native-international-phone-number';
+ import {getInternationalPhoneNumberLength} from 'rn-international-phone-number';

New in v0.13/v0.14 (nothing to change, but worth adopting)


From v0.6.xv0.11.x

Everything above applies, plus these older renames:

BeforeNow
showOnlyvisibleCountries
excludedCountrieshiddenCountries
modalHeightinitialBottomsheetHeight
customMask={['#### ####']} (array)customMask="(###) ###-####" (single string)
country.name.encountry.name.common or country.translations.eng.common
country.callingCodecountry.idd.root
- <PhoneInput showOnly={['BR', 'PT']} excludedCountries={['RU']} modalHeight="80%" />
+ <PhoneInput visibleCountries={['BR', 'PT']} hiddenCountries={['RU']} initialBottomsheetHeight="80%" />

- <PhoneInput customMask={['#### ####', '##### ####']} />
+ <PhoneInput customMask="##### ####" />

- {`${selectedCountry?.name?.en} ${selectedCountry?.callingCode}`}
+ {`${country?.name?.common} ${country?.idd?.root}`}

The font moved packages

The flag font now ships inside rn-country-select, so the asset path changed:

assets: [
- './node_modules/react-native-international-phone-number/lib/assets/fonts',
+ './node_modules/rn-country-select/lib/assets/fonts',
],

Full setup in the Installation guide.

Language codes

v0.12 accepted only ISO 639-2 codes (eng, por, spa). v0.13+ accepts both ISO 639-1 and ISO 639-2, so language="pt" and language="por" are equivalent. See the i18n guide.


Older versions

Pre-v0.7 source and READMEs stay available on their branches:

Something not covered here? Open an issue.