GeorgeHop/react-native-country-codes-picker

Name property error

jaypee-0 opened this issue · 2 comments

On clicking name an object error is displayed

image

Hi! Sorry for delay! Can you provide some code? With maybe some description? Then probably I will be able to help you.
In which case it happens?

Hmmm maybe I see the issue. That's probably because you don't handle name item which returns from onPress properly

Here is the item sample

{
  'name': {
      'en': 'Afghanistan',
      'ru': 'Афганистан',
      'pl': 'Afganistan',
      'ua': 'Афганістан',
      'cz': 'Afghánistán',
      'by': '',
      'pt': 'Afeganistão',
      'es': 'Afganistán',
  },
  'dial_code': '+93',
  'code': 'AF',
  'flag': '🇦🇫',
}

So in the placeholder of your button you should select name with locale from the app.

In your case it should be like that

const appLocale = 'en';
const [item, setItem] = React.useState(null);

return(
   <>
      <TouchableOpacity
            onPress={() => setShow(true)}
            style={{
                width: '80%',
                height: 60,
                backgroundColor: 'black',
                padding: 10,
            }}
      >
          <Text style={{
              color: 'white',
              fontSize: 20
          }}>
              {/* To select country name by specific lang */}
              {item?.name?.[appLocale]}
          </Text>
      </TouchableOpacity>
      <CountryPicker
        show={show}
        // Add your app locale here or by default picker shows data in en
        lang={appLocale}
        // when picker button press you will get the country object with dial code
        pickerButtonOnPress={(item) => {
          setItem(item);
          setShow(false);
        }}
      />
 </>
)