Skip to content

Instantly share code, notes, and snippets.

@haydenbleasel
Created January 25, 2020 12:32
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haydenbleasel/ff4b8eb40543364d937301a588284c34 to your computer and use it in GitHub Desktop.
Save haydenbleasel/ff4b8eb40543364d937301a588284c34 to your computer and use it in GitHub Desktop.
React Native phone input with country code selector
import React, { useState } from 'react';
import CountryPicker from 'react-native-country-picker-modal';
import PNF, { PhoneNumberUtil } from 'google-libphonenumber';
const [countryCode, setCountryCode] = useState('AU');
const [phoneNumber, setPhoneNumber] = useState('');
const phoneUtil = PhoneNumberUtil.getInstance();
function setCode ({ cca2 }) {
setCountryCode(cca2);
}
function submit() {
const number = phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
const internationalNumber = phoneUtil.formatOutOfCountryCallingNumber(number);
// ...
}
return (
<PhoneInput>
<CountryPicker
countryCode={countryCode}
onSelect={setCode}
withFilter
withFlag
withCallingCode
withCallingCodeButton
withAlphaFilter
withEmoji
/>
<TextInput
style={phoneInputStyle}
placeholder="0123 456 789"
value={phoneNumber}
onChangeText={setPhoneNumber}
/>
</PhoneInput>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment