javascriptreact-nativeexpo

Why doesn't my React Native country picker selection appear?

I am trying to create a country picker input, so I am using the library 'react-native-country-picker-modal' and it's supposed to work like this:

enter image description here

but when i follow the documentation i got a bad result

The dropdown list works fine, I can choose the country, but the flag does not appear after I select it.

Here is the code I wrote:

export const CountrySelect = () => {
    const [country, setCountry] = useState("")

    return (
        <View style={styles.container}>
            <CountryPicker
                withFilter
                withFlag
                withCountryNameButton
                withAlphaFilter
                withCallingCode
                withEmoji
                onSelect={(country) => setCountry(country)} />
        </View>

    );
};

and i got this result, as you see, the flag refuse to appear

enter image description here:

Solution

  • The state is not used in the picker. Set countryCode something like this:

    <CountryPicker
  countryCode={country.cca2}
  withFilter
  withFlag
  withCountryNameButton
  withAlphaFilter
  withCallingCode
  withEmoji
  onSelect={(country) => setCountry(country)}
/>