Version: Next 🚧

Country and phone number

A sign-up form where choosing a country also sets the phone number's dialing code, and the code can still be changed on its own, for someone living abroad. Both pickers are CountryPicker: the second one shows a compact 🇮🇱 +972 trigger.

Loading…

import { useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import { CountryPicker, getCountry } from '@elik56a/react-native-pickers';
import type { CountryCode } from '@elik56a/react-native-pickers';

const PREFERRED: CountryCode[] = ['US', 'GB', 'IL'];

export default function SignUp() {
  const [country, setCountry] = useState<CountryCode | null>(null);
  const [phoneCountry, setPhoneCountry] = useState<CountryCode | null>(null);
  const [phone, setPhone] = useState('');
  const prefix = phoneCountry ? getCountry(phoneCountry) : undefined;

  const chooseCountry = (code: CountryCode) => {
    setCountry(code);
    setPhoneCountry(code);
  };

  return (
    <View style={styles.form}>
      <CountryPicker label="Country" preferred={PREFERRED} value={country} onChange={chooseCountry} />
      <Text style={styles.label}>Phone</Text>
      <View style={styles.row}>
        <CountryPicker
          sheetTitle="Country code"
          preferred={PREFERRED}
          showDialCode
          value={phoneCountry}
          onChange={setPhoneCountry}
          renderTrigger={({ open }) => (
            <Pressable onPress={open} accessibilityRole="button" accessibilityLabel="Country code" style={styles.prefix}>
              <Text style={styles.text}>{prefix ? `${prefix.flag} ${prefix.dialCode}` : '+'}</Text>
            </Pressable>
          )}
        />
        <TextInput value={phone} onChangeText={setPhone} placeholder="Phone number" keyboardType="phone-pad" style={styles.input} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { gap: 8 },
  label: { fontSize: 14, fontWeight: '600', marginTop: 8 },
  row: { flexDirection: 'row', gap: 8 },
  prefix: { height: 48, paddingHorizontal: 12, justifyContent: 'center', borderWidth: 1, borderColor: '#D9D4CA', borderRadius: 12 },
  text: { fontSize: 16 },
  input: { flex: 1, height: 48, paddingHorizontal: 12, borderWidth: 1, borderColor: '#D9D4CA', borderRadius: 12, fontSize: 16 },
});

Try searching deutschland, +44, usa or 日本.

Tips

Send getCountry(phoneCountry).dialCode + phone to your server, with spaces removed: '+1 809' is a North American area code written as +1 809.
preferred puts the countries most of your users pick at the top. Define it outside the component so the list is built once.
Need your own grouping, such as by region? Build options from getAllCountries() and pass them to a SelectPicker with a group on each option.

Tips​

Tips