react-native-phone-number-input

react-native-phone-number-input copied to clipboard

Hello the package is very useful so far but I just need to know how to set the country code after the component has already rendered.

For example if I have the string "+44" what function would I need to call in order to update the country code that appears in the text input? Is there anyway of doing this?

Thanks!

Seems you cannot set the defaultCode from a variable, like defaultCode={country}

defaultCode?: CountryCode

You could map the +44 to a CountryCode item and then set the defaultCode

Obtain your country code, number without country code, code (number) using google-libphonenumber.

import PhoneInput from 'react-native-phone-number-input';
import { CountryCode } from 'react-native-country-picker-modal';
import { PhoneNumberUtil } from 'google-libphonenumber';

const phoneUtil = PhoneNumberUtil.getInstance();
const phoneInput = useRef<PhoneInput>(null);

const parsedNo = phoneUtil.parse('1234567890', '');
if (parsedNo.hasNationalNumber()) {
  const nationalNumber = parsedNo.getNationalNumberOrDefault().toString();
  const code = parsedNo.getCountryCodeOrDefault();
  const countryCode = phoneUtil.getRegionCodeForCountryCode(code) as CountryCode;

  // it's ugly, but it works
  phoneInput.current?.setState({
    countryCode: countryCode,
    code: code.toString(),
    number: nationalNumber,
  });
}

...

<PhoneInput
  ...
  ref={phoneInput}
  ...
/>

is there any better way to do it. This should be a built-in feature in this package

is there any better way to do it. This should be a built-in feature in this package

But this would reduce the flexibility