react-native-international-phone-number 0.8.1 → 0.8.3

package/README.md

@@ -37,16 +37,32 @@
     </a>
 </div>
 
+<br>
+
+## Features
+
+- 📱 Works with iOS, Android (Cross-platform), Expo and Web;
+- 🎨 Lib with UI customizable;
+- 🌎 Phone Input Mask according with the selected country;
+- 👨‍💻 Functional and class component support;
+- 🈶 22 languages supported.
+
+<br>
+
 ## Try it out
 
 - [Demo](https://snack.expo.dev/@astroonauta/react-native-international-phone-number)
 
+<br>
+
 ## List of Contents
 
 - [Old Versions](#old-versions)
 - [Installation](#installation)
-- [Additional Config to Web](#additional-config-to-web)
-- [Features](#features)
+- [Additional Config](#additional-config)
+  - [React Native CLI](#using-react-native-cli)
+  - [Expo](#using-expo)
+  - [Web](#using-web)
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
   - [With Function Component](#function-component)
@@ -102,11 +118,11 @@ OR
 $ yarn add react-native-international-phone-number
 ```
 
-## Additional config to `Web`
+## Additional config
 
-- Using React Native CLI:
+- ### Using React Native CLI:
 
-create a `react-native.config.js` file at the root of your react-native project with:
+Create a `react-native.config.js` file at the root of your react-native project with:
 
 ```bash
 module.exports = {
@@ -126,23 +142,10 @@ Then link the font to your native projects with:
 npx react-native-asset
 ```
 
-- Using Expo:
+- ### Using Expo:
 
-1. Change the `app.json` file to:
-
-```bash
-  ...
-
-  "web": {
-    ...
-    "output": "single",
-    ...
-  },
-  ...
-```
-
-2. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
-3. Initialize the `expo-font`:
+1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
+2. Initialize the `expo-font`:
 
 ```bash
   import { useFonts } from 'expo-font';
@@ -156,17 +159,22 @@ npx react-native-asset
   ...
 ```
 
-> Observation: _you need to recompile your project after adding new fonts._
+> Observation: you need to recompile your project after adding new fonts.
 
-<br>
+- ### Using Web:
 
-## Features
+Change the `app.json` file to:
 
-- 📱 Works with iOS, Android (Cross-platform), Expo and Web;
-- 🎨 Lib with UI customizable;
-- 🌎 Phone Input Mask according with the selected country;
-- 👨‍💻 Functional and class component support;
-- 🈶 21 languages supported.
+```bash
+  ...
+
+  "web": {
+    ...
+    "output": "single",
+    ...
+  },
+  ...
+```
 
 <br>
 

package/lib/constants/countries.js

@@ -423,12 +423,7 @@ export const countries = [
       zh: '澳大利亞',
       tr: 'Avustralya',
     },
-    phoneMasks: [
-      '2 #### ####',
-      '3 #### ####',
-      '4## ### ###',
-      '7 #### ####',
-    ],
+    phoneMasks: ['### ### ###'],
   },
   {
     callingCode: '+297',
@@ -5182,7 +5177,9 @@ export const countries = [
       zh: '巴拿馬',
       tr: 'Panama',
     },
-    phoneMasks: ['### ####'],
+    // https://en.wikipedia.org/wiki/Telephone_numbers_in_Panama
+    // Mobile numbers in Panama always start with 6 and are eight digits.
+    phoneMasks: ['### ####', '6### ####'],
   },
   {
     callingCode: '+51',

package/lib/index.js

@@ -198,7 +198,7 @@ const PhoneInput = forwardRef(
         callingCode ? callingCode : countryValue?.callingCode,
         countryValue?.cca2,
         customMask ? customMask : null,
-        allowZeroAfterCallingCode
+        allowZeroAfterCallingCode === false ? false : true
       );
 
       if (ref) {
@@ -331,27 +331,30 @@ const PhoneInput = forwardRef(
     } else {
       // Create a separate constant for each part of the component
       const touchableStart = (
-        <Text style={getFlagStyle(phoneInputStyles?.flag)}>
-          {countryValue?.flag}
-        </Text>
-      );
-      {
-        customCaret || (
-          <View style={phoneInputStyles?.caret}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                paddingTop: 4,
-              }}
-            >
+        <>
+          <Text style={getFlagStyle(phoneInputStyles?.flag)}>
+            {countryValue?.flag}
+          </Text>
+          {customCaret || (
+            <View style={phoneInputStyles?.caret}>
               <View
-                style={getCaretStyle(theme, phoneInputStyles?.caret)}
-              />
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'center',
+                  paddingTop: 4,
+                }}
+              >
+                <View
+                  style={getCaretStyle(
+                    theme,
+                    phoneInputStyles?.caret
+                  )}
+                />
+              </View>
             </View>
-          </View>
-        );
-      }
+          )}
+        </>
+      );
 
       const touchableMiddle = (
         <View

package/lib/utils/getInputMask.js

@@ -1,10 +1,16 @@
 import { countries } from '../constants/countries';
 
-function eliminateZeroAfterCallingCode(phoneNumber, callingCode) {
+function startsWithZero(phoneNumber, callingCode) {
   const newCode = callingCode.replace('+', '');
-  return phoneNumber.startsWith('0') ||
+  return (
+    phoneNumber.startsWith('0') ||
     phoneNumber.startsWith(`${newCode}0`)
-    ? phoneNumber.slice(newCode.length + 1, phoneNumber.length)
+  );
+}
+
+function eliminateZeroAfterCallingCode(phoneNumber, callingCode) {
+  return startsWithZero(phoneNumber, callingCode)
+    ? phoneNumber.slice(1, phoneNumber.length)
     : phoneNumber;
 }
 
@@ -73,7 +79,12 @@ export default function getInputMask(
     ? value
     : eliminateZeroAfterCallingCode(value, callingCode);
 
-  return matrix.replace(/(?!\+)./g, function (a) {
+  const newMatrix =
+    allowZeroAfterCallingCode && startsWithZero(value, callingCode)
+      ? '#' + matrix
+      : matrix;
+
+  return newMatrix.replace(/(?!\+)./g, function (a) {
     return /[#\d]/.test(a) && i < newValue.length
       ? newValue.charAt(i++)
       : i >= newValue.length

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",