Error setting defaultValue for callingCode not included in showonly

[pgiki]

Hello!

Firstly, thanks for your work on this project! 🙂

I am facing an issue with react-native-international-phone-number@0.8.3 when I try to pass a defaultValue for a country that is not included in the showOnly prop. In my use case, users have a limited list of countries from which they can select the country flag/calling code. However, they also have the option of picking contacts from their address book, and contacts picked this way are still valid. I do not know how much code will need to be changed to accommodate this use case. Can someone kindly help?

Here is the diff that partially solved my problem. The defaultValue is still not showing.

diff --git a/node_modules/react-native-international-phone-number/lib/utils/getInputMask.js b/node_modules/react-native-international-phone-number/lib/utils/getInputMask.js
index 786bba4..9b1163c 100644
--- a/node_modules/react-native-international-phone-number/lib/utils/getInputMask.js
+++ b/node_modules/react-native-international-phone-number/lib/utils/getInputMask.js
@@ -1,7 +1,7 @@
 import { countries } from '../constants/countries';
 
 function startsWithZero(phoneNumber, callingCode) {
-  const newCode = callingCode.replace('+', '');
+  const newCode = callingCode?.replace('+', '');
   return (
     phoneNumber.startsWith('0') ||
     phoneNumber.startsWith(`${newCode}0`)

This issue body was partially generated by patch-package.

[AstrOOnauta]

Hi @pgiki

Can you send me more informations about this case? What error occurs? If possible, can you send me your PhoneInput code for analisys?

I tested defaultValue with showOnly props and here work fine, see below the example:

I used showOnly={['CA', 'US']} and use a defaultValue="+34608123123" (a phone number from Spain, that there is not in showOnly) and work fine without errors...

[pgiki]

Hi @AstrOOnauta,

I did further investigation and found the root cause. In summary, the error happened because the number I entered, UK number +44 7501 591234 (I changed the last 4 digits for privacy reasons), could not be matched to any of the GB masks. To solve this I updated the getCountryByPhoneNumber function as shown below to be able to accommodate this scenario but the ultimate solution of course is to add the missing mask.

   let matchingCountry = matchingCountries[0];
   if (matchingCountries.length > 1) {
-    matchingCountry = null; //This line is deleted
     const callingCode = matchingCountries[0].callingCode; `

[AstrOOnauta]

Hmm ok! @pgiki

This case with UK defaultValue was reported this week on this issue and fixed on latest version (v0.8.4). Please update your lib and try again. Let me know if this was fixed..

Sorry for that and thanks for your report.

[pgiki]

Noted. Thanks for your response. But I still think the suggestion above to avoid setting the matchingCountry=null is still reasonable? It will help the app not crash if similar cases happen (like the GB case with missing matching mask) but of course, I am also aware that it will make debugging those cases with missing masks very hard. What do you think?

[AstrOOnauta]

Yeah @pgiki this is a good point. I'll study this case and I'll fixed it! Thanks for this report and you suggestion.

🚀 AstrOOnauta 🚀