react-native-phone-input icon indicating copy to clipboard operation
react-native-phone-input copied to clipboard

issue with common dial codes

Open ujwal-setlur opened this issue 7 years ago • 1 comments

When country is switched to another country that has the same international prefix, say USA and Canada, then when you start typing the phone number, the flag switches back to the first one. This is due to this code in index.js:

  updateFlagAndFormatNumber(number, actionAfterSetState = null) {
    const { allowZeroAfterCountryCode, initialCountry } = this.props;
    let iso2 = initialCountry;
    let phoneNumber = number;

    if (number) {
      if (phoneNumber[0] !== "+") phoneNumber = `+${phoneNumber}`;
      phoneNumber = allowZeroAfterCountryCode
        ? phoneNumber
        : this.possiblyEliminateZeroAfterCountryCode(phoneNumber);
      iso2 = PhoneNumber.getCountryCodeOfNumber(phoneNumber);
    }
    this.setState({ iso2, formattedNumber: phoneNumber }, actionAfterSetState);
  }

This in turn calls PhoneNumber.getCountryCodeOfNumber from phoneNumber.js:

  getCountryCodeOfNumber(number) {
    const dialCode = this.getDialCode(number);
    const numeric = this.getNumeric(dialCode);
    const countryCode = Country.getCountryCodes()[numeric];

    // countryCode[0] can be null -> get first element that is not null
    if (countryCode) {
      return _.first(countryCode.filter(iso2 => iso2));
    }

    return '';
  }

You will notice that the first element (in this case US) gets returned. We should allow for overlapping prefixes.

ujwal-setlur avatar Jun 12 '18 00:06 ujwal-setlur

Here is a patch that addresses it:

--- a/node_modules/react-native-phone-input/lib/index.js
+++ b/node_modules/react-native-phone-input/lib/index.js
@@ -149,6 +149,14 @@ export default class PhoneInput extends Component {
         : this.possiblyEliminateZeroAfterCountryCode(phoneNumber);
       iso2 = PhoneNumber.getCountryCodeOfNumber(phoneNumber);
     }
+
+    // some countries share dial prefix, so don't change country if we run into that
+    let oldDialCode = PhoneNumber.getCountryDataByCode(initialCountry).dialCode;
+    let newDialCode = PhoneNumber.getNumeric(PhoneNumber.getDialCode(phoneNumber));
+    if(oldDialCode === newDialCode) {
+        iso2 = initialCountry;
+    }
+
     this.setState({ iso2, formattedNumber: phoneNumber }, actionAfterSetState);
   }

ujwal-setlur avatar Jun 12 '18 19:06 ujwal-setlur