AstrOOnauta / react-native-international-phone-number

⚛️ International mobile phone number input component for React Native 📱
https://snack.expo.dev/@astroonauta/react-native-international-phone-number
ISC License
272 stars 44 forks source link

Custom `defaultCountry` falls back to component’s default country #10

Closed dlenskyi closed 1 year ago

dlenskyi commented 1 year ago

Good day!

First of all, thanks for such a great library! I wanted to ask you about the behaviour of defaultCountry prop.

When I try to set it - handleSelectedCountry picks this country and sets it, however immediately after it this function sets Brazil as a country in my picker. Could you please help me with that? Thanks!

In documentation I saw that I need to pass defaultValue, but I don’t want to use it, only default country

AstrOOnauta commented 1 year ago

Hi @dlenskyi

Thanks for your words!! Its sounds good!

I review your question and I check this case. You are right, the version 0.5.0 had a bug with the defaultCountry flow. Please, check the new version (v0.5.1) and try again. Follow the example for add a default country usying the lib:

import React, { useState } from 'react';
import PhoneInput from 'react-native-international-phone-number';

...

  const [selectedCountry, setSelectedCountry] = useState(null);
  const [inputValue, setInputValue] = useState('');

  function handleInputValue(phoneNumber) {
    setInputValue(phoneNumber);
  }

  function handleSelectedCountry(country) {
    setSelectedCountry(country);
  }

  ...

  <PhoneInput
        value={inputValue}
        onChangePhoneNumber={handleInputValue}
        selectedCountry={selectedCountry}
        onChangeSelectedCountry={handleSelectedCountry}
        defaultCountry="CA"  <----- Add only this line with the country abbreviation (cca2)
   />

   ...

OBS.: You dont need add the defaultValue props to defaultCountry work.

🚀 AstrOOnauta 🚀

dlenskyi commented 1 year ago

Hi @AstrOOnauta

Thanks for your quick response and fix! It worked

However, flag is not rendering properly now :(

if you set defaultCountry with some other countly than Brazil (let’s say DK) - the flag will not be shown in input

dlenskyi commented 1 year ago

IMG_6446

AstrOOnauta commented 1 year ago

@dlenskyi I checked this new case and I found some countries with the flag wrong (10 in total) and I fixed it. Please, check the new version (v0.5.2) and try again.

Thanks for your reports.

🚀 AstrOOnauta 🚀

dlenskyi commented 1 year ago

Works like a charm, thanks!