react-native-international-phone-number 0.4.13 → 0.4.15

package/README.md

@@ -48,6 +48,7 @@
   - [With Function Component](#function-component)
   - [Custom Default Flag](#custom-default-flag)
   - [Default Phone Number Value](#default-phone-number-value)
+  - [Custom Phone Mask](#custom-phone-mask)
   - [Typescript](#typescript)
 - [Intermediate Usage](#intermediate-usage)
   - [Typescript + useRef](#typescript--useref)
@@ -293,6 +294,49 @@ export default function App() {
 > 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
 > 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above).
 
+- ### Custom Phone Mask
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { PhoneInput } from 'react-native-international-phone-number';
+
+export default function App() {
+  const [selectedCountry, setSelectedCountry] = useState(undefined);
+  const [inputValue, setInputValue] = useState('');
+
+  function handleInputValue(phoneNumber) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country) {
+    setSelectedCountry(country);
+  }
+
+  return (
+    <View style={{ width: '100%', flex: 1, padding: 24 }}>
+      <PhoneInput
+        customMask={['#### ####', '##### ####']}
+        value={inputValue}
+        onChangePhoneNumber={handleInputValue}
+        selectedCountry={selectedCountry}
+        onChangeSelectedCountry={handleSelectedCountry}
+      />
+      <View style={{ marginTop: 10 }}>
+        <Text>
+          Country:{' '}
+          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
+        </Text>
+        <Text>
+          Phone Number:{' '}
+          {`${selectedCountry?.callingCode} ${inputValue}`}
+        </Text>
+      </View>
+    </View>
+  );
+}
+```
+
 - ### Typescript
 
 ```tsx
@@ -394,6 +438,8 @@ export default function App() {
 }
 ```
 
+> Observation: 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).
+
 ## Advanced Usage
 
 - ### React-Hook-Form + Typescript + Default Phone Number Value
@@ -549,6 +595,7 @@ export default function App() {
 
 ## Component Props ([PhoneInputProps](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
 
+- `customMask?:` string[];
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;
@@ -560,7 +607,7 @@ export default function App() {
 - `containerStyle?:` StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
 - `flagContainerStyle?:` StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
 - `inputStyle?:` StyleProp<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
-- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputeRef.ts)>
+- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputRef.ts)>
 
 <br>
 

package/lib/index.d.ts

@@ -1,13 +1,8 @@
-import { Ref } from 'react';
-
 import { ICountry } from './interfaces/country';
 import { IPhoneInputRef } from './interfaces/phoneInputRef';
 import { PhoneInputProps } from './interfaces/phoneInputProps';
 
-declare function PhoneInput<IPhoneInputRef, PhoneInputProps>(
-  props: PhoneInputProps,
-  ref?: Ref<IPhoneInputRef>
-): JSX.Element;
+declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 
 declare function getAllCountries(): ICountry[];
 

package/lib/index.js

@@ -38,6 +38,7 @@ const PhoneInput = forwardRef(
       onChangePhoneNumber,
       selectedCountry,
       onChangeSelectedCountry,
+      customMask,
       ...rest
     },
     ref
@@ -122,7 +123,8 @@ const PhoneInput = forwardRef(
       const res = phoneMask(
         phoneNumber,
         callingCode ? callingCode : countryValue?.callingCode,
-        countryValue?.cca2
+        countryValue?.cca2,
+        customMask ? customMask : null,
       );
 
       if (ref) {
@@ -245,79 +247,91 @@ const PhoneInput = forwardRef(
       }
     }, [selectedCountry]);
 
-    return (
-      <View
-        style={[
-          withDarkTheme
-            ? {
-                ...styles.darkContainer,
-                backgroundColor: disabled
-                  ? '#858585'
-                  : styles.darkContainer.backgroundColor,
-              }
-            : {
-                ...styles.lightContainer,
-                backgroundColor: disabled
-                  ? '#E3E3E3'
-                  : styles.lightContainer.backgroundColor,
-              },
-          containerStyle ? containerStyle : {},
-        ]}
-        onLayout={(e) =>
-          setContainerWidth(e.nativeEvent.layout.width)
-        }
-      >
-        <CountryPicker
-          containerButtonStyle={[
-            flagContainerBase,
-            countryValue?.cca2 === 'VA' ? { width: 140 } : {},
-            flagContainerStyle ? flagContainerStyle : {},
-          ]}
-          onSelect={onSelect}
-          withFilter
-          withAlphaFilter
-          withCallingCode
-          withCallingCodeButton={countryValue || defaultCca2}
-          theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-          countryCode={
-            countryValue ? countryValue?.cca2 : defaultCca2
-          }
-          modalProps={
-            disabled || modalDisabled ? { visible: false } : {}
-          }
-        />
-        <TextInput
+    if (
+      ref &&
+      (rest.value ||
+        onChangePhoneNumber ||
+        selectedCountry ||
+        onChangeSelectedCountry)
+    ) {
+      throw new Error(
+        "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 {
+      return (
+        <View
           style={[
-            withDarkTheme ? styles.darkInput : styles.lightInput,
-            { width: containerWidth - 100 },
-            inputStyle ? inputStyle : {},
+            withDarkTheme
+              ? {
+                  ...styles.darkContainer,
+                  backgroundColor: disabled
+                    ? '#858585'
+                    : styles.darkContainer.backgroundColor,
+                }
+              : {
+                  ...styles.lightContainer,
+                  backgroundColor: disabled
+                    ? '#E3E3E3'
+                    : styles.lightContainer.backgroundColor,
+                },
+            containerStyle ? containerStyle : {},
           ]}
-          placeholder={
-            placeholder ? placeholder : 'Insert your phone number'
+          onLayout={(e) =>
+            setContainerWidth(e.nativeEvent.layout.width)
           }
-          placeholderTextColor={
-            placeholderTextColor
-              ? placeholderTextColor
-              : withDarkTheme
-              ? '#CCCCCC'
-              : '#DDDDDD'
-          }
-          selectionColor={
-            selectionColor
-              ? selectionColor
-              : withDarkTheme
-              ? 'rgba(255,255,255, .4)'
-              : 'rgba(0 ,0 ,0 , .4)'
-          }
-          editable={!disabled}
-          value={inputValue}
-          onChangeText={onChangeText}
-          keyboardType="numeric"
-          ref={textInputRef}
-          {...rest}
-        />
-      </View>
-    );
+        >
+          <CountryPicker
+            containerButtonStyle={[
+              flagContainerBase,
+              countryValue?.cca2 === 'VA' ? { width: 140 } : {},
+              flagContainerStyle ? flagContainerStyle : {},
+            ]}
+            onSelect={onSelect}
+            withFilter
+            withAlphaFilter
+            withCallingCode
+            withCallingCodeButton={countryValue || defaultCca2}
+            theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+            countryCode={
+              countryValue ? countryValue?.cca2 : defaultCca2
+            }
+            modalProps={
+              disabled || modalDisabled ? { visible: false } : {}
+            }
+          />
+          <TextInput
+            style={[
+              withDarkTheme ? styles.darkInput : styles.lightInput,
+              { width: containerWidth - 100 },
+              inputStyle ? inputStyle : {},
+            ]}
+            placeholder={
+              placeholder ? placeholder : 'Insert your phone number'
+            }
+            placeholderTextColor={
+              placeholderTextColor
+                ? placeholderTextColor
+                : withDarkTheme
+                ? '#CCCCCC'
+                : '#DDDDDD'
+            }
+            selectionColor={
+              selectionColor
+                ? selectionColor
+                : withDarkTheme
+                ? 'rgba(255,255,255, .4)'
+                : 'rgba(0 ,0 ,0 , .4)'
+            }
+            editable={!disabled}
+            value={inputValue}
+            onChangeText={onChangeText}
+            keyboardType="numeric"
+            ref={textInputRef}
+            {...rest}
+          />
+        </View>
+      );
+    }
   }
 );
 

package/lib/interfaces/phoneInputProps.ts

@@ -6,8 +6,10 @@ import {
 } from 'react-native';
 
 import { ICountry } from './country';
+import { Ref } from 'react';
+import { IPhoneInputRef } from './phoneInputRef';
 
-export interface PhoneInputProps extends TextInputProps {
+interface IPhoneInputPropsWithoutRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
@@ -21,4 +23,28 @@ export interface PhoneInputProps extends TextInputProps {
   onChangePhoneNumber: (phoneNumber: string) => void;
   selectedCountry: undefined | ICountry;
   onChangeSelectedCountry: (country: ICountry) => void;
+  ref?: never;
+  customMask?:Array<string>;
 }
+
+interface IPhoneInputPropsWithRef extends TextInputProps {
+  placeholder?: string;
+  placeholderTextColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  flagContainerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  withDarkTheme?: boolean;
+  disabled?: boolean;
+  modalDisabled?: boolean;
+  defaultValue?: string;
+  value?: never;
+  onChangePhoneNumber?: never;
+  selectedCountry?: never;
+  onChangeSelectedCountry?: never;
+  ref: Ref<IPhoneInputRef>;
+  customMask?:Array<string>;
+}
+
+export type PhoneInputProps =
+  | IPhoneInputPropsWithRef
+  | IPhoneInputPropsWithoutRef;

package/lib/utils/inputMask.js

@@ -1,22 +1,23 @@
 import { countries } from './countries';
 
-export default function phoneMask(phoneNumber, callingCode, cca2) {
+export default function phoneMask(phoneNumber, callingCode, cca2, customMask) {
   let matrix = '';
 
   countries.forEach((item) => {
     const newCode = item.callingCode.replace(/[\s#]/g, '');
+    const phoneMask = Array.isArray(customMask) && customMask || item.phoneMasks;
 
     if (callingCode && callingCode.includes(newCode)) {
-      if (item.phoneMasks.length === 1) {
+      if (phoneMask.length === 1) {
         if (cca2 !== 'CA' && cca2 !== 'US' && cca2 !== 'IT') {
-          matrix = item.phoneMasks[0].replace(/[0-9]/g, '').trim();
+          matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
         }
-      } else if (item.phoneMasks.length > 1) {
+      } else if (phoneMask.length > 1) {
         let hasDifferentLengthsOfPhoneNumbers = false;
 
-        for (let i = 0; i < item.phoneMasks.length; i++) {
+        for (let i = 0; i < phoneMask.length; i++) {
           if (
-            phoneNumber.length > item.phoneMasks[0].length &&
+            phoneNumber.length > phoneMask[0].length &&
             newCode !== '+1'
           ) {
             hasDifferentLengthsOfPhoneNumbers = true;
@@ -25,17 +26,17 @@ export default function phoneMask(phoneNumber, callingCode, cca2) {
 
         if (!hasDifferentLengthsOfPhoneNumbers) {
           if (cca2 === 'CA' || cca2 === 'US') {
-            matrix = item.phoneMasks[0].replace(/\d/g, '#').trim();
+            matrix = phoneMask[0].replace(/\d/g, '#').trim();
           } else {
-            matrix = item.phoneMasks[0].replace(/[0-9]/g, '').trim();
+            matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
           }
         } else {
-          for (let i = 0; i < item.phoneMasks.length; i++) {
+          for (let i = 0; i < phoneMask.length; i++) {
             if (
-              phoneNumber.length > item.phoneMasks[i].length &&
-              item.phoneMasks[i + 1]
+              phoneNumber.length > phoneMask[i].length &&
+              phoneMask[i + 1]
             ) {
-              matrix = item.phoneMasks[i + 1]
+              matrix = phoneMask[i + 1]
                 .replace(/[0-9]/g, '')
                 .trim();
             }

package/package.json

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