react-native-international-phone-number 0.8.0 → 0.8.2

package/README.md

@@ -72,6 +72,7 @@
   - [Exclude some countries Inside Modal](#exclude-some-countries)
   - [Show Popular Countries at the Top of the Countries List Inside Modal](#show-popular-countries-at-the-top-of-the-countries-list-inside-modal)
   - [Right to Left Input](#right-to-left-input)
+  - [Dont allow Zero After Calling Code](#dont-allow-zero-after-calling-code)
 - [Lib Props](#component-props-phoneinputprops)
 - [Lib Functions](#functions)
 - [Supported languages](#🎌-supported-languages-🎌)
@@ -82,6 +83,7 @@
 
 ## Old Versions
 
+- [Version 0.7.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.7.x)
 - [Version 0.6.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.6.x)
 - [Version 0.5.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.5.x)
 - [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
@@ -107,7 +109,7 @@ $ yarn add react-native-international-phone-number
 create a `react-native.config.js` file at the root of your react-native project with:
 
 ```bash
- module.exports = {
+module.exports = {
   project: {
     ios: {},
     android: {},
@@ -115,7 +117,7 @@ create a `react-native.config.js` file at the root of your react-native project
   assets: [
     './node_modules/react-native-international-phone-number/lib/assets/fonts',
   ],
- };
+};
 ```
 
 Then link the font to your native projects with:
@@ -126,19 +128,32 @@ npx react-native-asset
 
 - Using Expo:
 
-1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
-2. Initialize the `expo-font`:
+1. Change the `app.json` file to:
 
 ```bash
- import { useFonts } from 'expo-font';
+  ...
 
- ...
+  "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`:
+
+```bash
+  import { useFonts } from 'expo-font';
+
+  ...
 
- useFonts({
+  useFonts({
     'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2'),
   });
 
- ...
+  ...
 ```
 
 > Observation: _you need to recompile your project after adding new fonts._
@@ -693,6 +708,17 @@ export default function App() {
   ...
 ```
 
+- ### Don't allow Zero After Calling Code:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    allowZeroAfterCallingCode={false}
+  />
+  ...
+```
+
 </br>
 
 ## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
@@ -723,6 +749,7 @@ export default function App() {
 - `modalNotFoundCountryMessage?:` string;
 - `customCaret?:` [ReactNode](https://reactnative.dev/docs/react-node);
 - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>;
+- `allowZeroAfterCallingCode?:` boolean
 
 <br>
 

package/lib/constants/countries.js

@@ -2545,7 +2545,7 @@ export const countries = [
       zh: '岡比亞',
       tr: 'Gambiya',
     },
-    phoneMasks: ['### ## ##'],
+    phoneMasks: ['### ####'],
   },
   {
     callingCode: '+224',
@@ -3446,7 +3446,7 @@ export const countries = [
       pl: 'Kirgistan',
       pt: 'Quirguizistão',
       ro: 'Kârgâzstan',
-      ru: 'Kyrgyzstan',
+      ru: 'Кыргызстан',
       ua: 'Киргизстан',
       zh: '吉爾吉斯斯坦',
       tr: 'Kırgızistan',
@@ -3637,7 +3637,7 @@ export const countries = [
       zh: '韓國',
       tr: 'Kore Cumhuriyeti',
     },
-    phoneMasks: ['## ### ####'],
+    phoneMasks: ['### #### ####'],
   },
   {
     callingCode: '+965',
@@ -4717,7 +4717,13 @@ export const countries = [
       zh: '馬來西亞',
       tr: 'Malezya',
     },
-    phoneMasks: ['# ### ###', '## ### ###', '## ### ####'],
+    phoneMasks: [
+      '# ### ###',
+      '## ### ###',
+      '## ### ####',
+      '### ### ####',
+      '### #### ####',
+    ],
   },
   {
     callingCode: '+258',

package/lib/index.js

@@ -36,7 +36,7 @@ import {
   getFlagTextStyle,
   getInputStyle,
 } from './utils/getStyles';
-import styles from "./styles";
+import styles from './styles';
 
 const PhoneInput = forwardRef(
   (
@@ -68,6 +68,7 @@ const PhoneInput = forwardRef(
       modalNotFoundCountryMessage,
       customCaret,
       rtl,
+      allowZeroAfterCallingCode,
       ...rest
     },
     ref
@@ -118,6 +119,7 @@ const PhoneInput = forwardRef(
         modalNotFoundCountryMessage,
         customCaret,
         rtl,
+        allowZeroAfterCallingCode,
         ...rest,
       },
     };
@@ -195,7 +197,8 @@ const PhoneInput = forwardRef(
         phoneNumber,
         callingCode ? callingCode : countryValue?.callingCode,
         countryValue?.cca2,
-        customMask ? customMask : null
+        customMask ? customMask : null,
+        allowZeroAfterCallingCode === false ? false : true
       );
 
       if (ref) {
@@ -326,98 +329,97 @@ const PhoneInput = forwardRef(
         "Error: Don't use the useRef hook combined with the useState hook to manage the phoneNumber and selectedCountry values. Instead, choose to use just one of them (useRef or useState)."
       );
     } 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,
-            }}
-          >
+      // 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={getCaretStyle(
-                theme,
-                phoneInputStyles?.caret
-              )}
-            />
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'center',
+                paddingTop: 4,
+              }}
+            >
+              <View
+                style={getCaretStyle(theme, phoneInputStyles?.caret)}
+              />
+            </View>
           </View>
-        </View>
-      )};
-
-      const touchableMiddle =
-      <View
-        style={getDividerStyle(
-          theme,
-          phoneInputStyles?.divider
-        )}
-      />;
-
-      const touchableEnd =
-      <Text
-        style={getFlagTextStyle(
-          theme,
-          phoneInputStyles?.callingCode
-        )}
-      >
-        {countryValue?.callingCode}
-      </Text>;
-
-      const touchablePart =
-      <TouchableOpacity
-        activeOpacity={disabled || modalDisabled ? 1 : 0.6}
-        onPress={() =>
-          disabled || modalDisabled ? null : setShow(true)
-        }
-        style={getFlagContainerStyle(
-          theme,
-          phoneInputStyles?.flagContainer
-        )}
-      >
-        {/* LTR Display */}
-        {!rtl && touchableStart}
-        {!rtl && touchableMiddle}
-        {!rtl && touchableEnd}
-
-        {/* RTL Display */}
-        {rtl && touchableEnd}
-        {rtl && touchableMiddle}
-        {rtl && touchableStart}
-      </TouchableOpacity>;
-
-      const inputPart =
-      <TextInput
-        style={getInputStyle(theme, phoneInputStyles?.input)}
-        placeholder={
-          placeholder === '' || placeholder
-            ? placeholder
-            : getPhoneNumberInputPlaceholder(language || 'en')
-        }
-        placeholderTextColor={
-          placeholderTextColor ||
-          (theme === 'dark' ? '#CCCCCC' : '#AAAAAA')
-        }
-        selectionColor={
-          selectionColor ||
-          (theme === 'dark'
-            ? 'rgba(255,255,255, .4)'
-            : 'rgba(0 ,0 ,0 , .4)')
-        }
-        editable={!disabled}
-        value={inputValue}
-        onChangeText={onChangeText}
-        keyboardType="numeric"
-        ref={textInputRef}
-        {...rest}
-      />;
-
-      
+        );
+      }
+
+      const touchableMiddle = (
+        <View
+          style={getDividerStyle(theme, phoneInputStyles?.divider)}
+        />
+      );
+
+      const touchableEnd = (
+        <Text
+          style={getFlagTextStyle(
+            theme,
+            phoneInputStyles?.callingCode
+          )}
+        >
+          {countryValue?.callingCode}
+        </Text>
+      );
+
+      const touchablePart = (
+        <TouchableOpacity
+          activeOpacity={disabled || modalDisabled ? 1 : 0.6}
+          onPress={() =>
+            disabled || modalDisabled ? null : setShow(true)
+          }
+          style={getFlagContainerStyle(
+            theme,
+            phoneInputStyles?.flagContainer
+          )}
+        >
+          {/* LTR Display */}
+          {!rtl && touchableStart}
+          {!rtl && touchableMiddle}
+          {!rtl && touchableEnd}
+
+          {/* RTL Display */}
+          {rtl && touchableEnd}
+          {rtl && touchableMiddle}
+          {rtl && touchableStart}
+        </TouchableOpacity>
+      );
+
+      const inputPart = (
+        <TextInput
+          style={getInputStyle(theme, phoneInputStyles?.input)}
+          placeholder={
+            placeholder === '' || placeholder
+              ? placeholder
+              : getPhoneNumberInputPlaceholder(language || 'en')
+          }
+          placeholderTextColor={
+            placeholderTextColor ||
+            (theme === 'dark' ? '#CCCCCC' : '#AAAAAA')
+          }
+          selectionColor={
+            selectionColor ||
+            (theme === 'dark'
+              ? 'rgba(255,255,255, .4)'
+              : 'rgba(0 ,0 ,0 , .4)')
+          }
+          editable={!disabled}
+          value={inputValue}
+          onChangeText={onChangeText}
+          keyboardType="numeric"
+          ref={textInputRef}
+          {...rest}
+        />
+      );
+
       return (
         <>
           <View
@@ -469,31 +471,33 @@ const PhoneInput = forwardRef(
               excludedCountries={excludedCountries}
               popularCountries={popularCountries}
               ListHeaderComponent={({ countries, lang, onPress }) => {
-                return   (
-                    <View>
-                      {popularCountriesSectionTitle &&(
+                return (
+                  <View>
+                    {popularCountriesSectionTitle && (
                       <Text>{popularCountriesSectionTitle}</Text>
-                      )}
-                      {countries.map((country, index) => {
-                        return (
-                            <CountryButton
-                                key={index}
-                                item={country}
-                                name={country?.name?.[lang || 'en']}
-                                onPress={() => onPress(country)}
-                                style={getCountryPickerStyle(
-                                    theme,
-                                    modalHeight,
-                                    modalStyles
-                                )}
-                            />
-                        );
-                      })}
-                      {restOfCountriesSectionTitle &&(
-                      <Text style={styles.sectionTitle}>{restOfCountriesSectionTitle}</Text>
-                      )}
-                    </View>
-                )
+                    )}
+                    {countries.map((country, index) => {
+                      return (
+                        <CountryButton
+                          key={index}
+                          item={country}
+                          name={country?.name?.[lang || 'en']}
+                          onPress={() => onPress(country)}
+                          style={getCountryPickerStyle(
+                            theme,
+                            modalHeight,
+                            modalStyles
+                          )}
+                        />
+                      );
+                    })}
+                    {restOfCountriesSectionTitle && (
+                      <Text style={styles.sectionTitle}>
+                        {restOfCountriesSectionTitle}
+                      </Text>
+                    )}
+                  </View>
+                );
               }}
             />
           ) : null}

package/lib/interfaces/phoneInputProps.ts

@@ -34,6 +34,7 @@ interface BasePhoneInput extends TextInputProps {
   modalNotFoundCountryMessage?: string;
   customCaret?: ReactNode;
   rtl?: boolean;
+  allowZeroAfterCallingCode?: boolean;
 }
 
 interface IPhoneInputPropsWithoutRef extends BasePhoneInput {

package/lib/utils/getInputMask.js

@@ -1,10 +1,25 @@
 import { countries } from '../constants/countries';
 
+function startsWithZero(phoneNumber, callingCode) {
+  const newCode = callingCode.replace('+', '');
+  return (
+    phoneNumber.startsWith('0') ||
+    phoneNumber.startsWith(`${newCode}0`)
+  );
+}
+
+function eliminateZeroAfterCallingCode(phoneNumber, callingCode) {
+  return startsWithZero(phoneNumber, callingCode)
+    ? phoneNumber.slice(1, phoneNumber.length)
+    : phoneNumber;
+}
+
 export default function getInputMask(
   phoneNumber,
   callingCode,
   cca2,
-  customMask
+  customMask,
+  allowZeroAfterCallingCode
 ) {
   let matrix = '';
 
@@ -59,9 +74,17 @@ export default function getInputMask(
   });
 
   let i = 0;
-  const newValue = phoneNumber.replace(/\D/g, '');
+  const value = phoneNumber.replace(/\D/g, '');
+  const newValue = allowZeroAfterCallingCode
+    ? value
+    : eliminateZeroAfterCallingCode(value, callingCode);
+
+  const newMatrix =
+    allowZeroAfterCallingCode && startsWithZero(value, callingCode)
+      ? '#' + matrix
+      : matrix;
 
-  return matrix.replace(/(?!\+)./g, function (a) {
+  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.0",
+  "version": "0.8.2",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",