react-native-international-phone-number 0.10.7 → 0.11.0

package/README.md

@@ -69,11 +69,11 @@
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
   - [With Function Component](#function-component)
-  - [With Typescript](#typescript)
+  - [With Typescript + defaultValue](#typescript)
 - [Intermediate Usage](#intermediate-usage)
-  - [Typescript + useRef](#typescript--useref)
+  - [Typescript + useRef + defaultValue](#typescript--useref)
 - [Advanced Usage](#advanced-usage)
-  - [React-Hook-Form + Typescript + Default Phone Number Value](#react-hook-form--typescript--default-phone-number-value)
+  - [React-Hook-Form + Typescript + defaultValue](#react-hook-form--typescript--default-phone-number-value)
 - [Customizing Lib](#customizing-lib)
 - [Lib Props](#component-props-phoneinputprops)
 - [Lib Functions](#functions)
@@ -87,6 +87,7 @@
 
 ## Old Versions
 
+- [Version 0.10.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.10.x)
 - [Version 0.9.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.9.x)
 - [Version 0.8.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.8.x)
 - [Version 0.7.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.7.x)
@@ -260,7 +261,7 @@ export default function App() {
 }
 ```
 
-- ### Typescript
+- ### Typescript + DefaultValue
 
 ```tsx
 import React, {useState} from 'react';
@@ -285,6 +286,7 @@ export default function App() {
   return (
     <View style={{width: '100%', flex: 1, padding: 24}}>
       <PhoneInput
+        defaultValue="+12505550199"
         value={inputValue}
         onChangePhoneNumber={handleInputValue}
         selectedCountry={selectedCountry}
@@ -312,7 +314,7 @@ export default function App() {
 
 ## Intermediate Usage
 
-- ### Typescript + useRef
+- ### Typescript + useRef + defaultValue
 
 ```tsx
 import React, {useRef} from 'react';
@@ -334,7 +336,7 @@ export default function App() {
 
   return (
     <View style={{width: '100%', flex: 1, padding: 24}}>
-      <PhoneInput ref={phoneInputRef} />
+      <PhoneInput ref={phoneInputRef} defaultValue="+12505550199" />
       <TouchableOpacity
         style={{
           width: '100%',
@@ -359,13 +361,11 @@ 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).
-
 <br>
 
 ## Advanced Usage
 
-- ### React-Hook-Form + Typescript + Default Phone Number Value
+- ### React-Hook-Form + Typescript + defaultValue
 
 ```tsx
 import React, {useState, useEffect} from 'react';
@@ -463,26 +463,33 @@ export default function App() {
 
 ### Modal Styles ([modalStyles](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectStyles.ts))
 
-| Property                   | Type      | Description               |
-| -------------------------- | --------- | ------------------------- |
-| `backdrop`                 | ViewStyle | Modal background overlay  |
-| `container`                | ViewStyle | Modal main container      |
-| `content`                  | ViewStyle | Modal content area        |
-| `dragHandleContainer`      | ViewStyle | Drag Handle area          |
-| `dragHandleIndicator`      | ViewStyle | Drag Handle Indicator     |
-| `searchContainer`          | ViewStyle | Search input wrapper      |
-| `searchInput`              | TextStyle | Search input field        |
-| `list`                     | ViewStyle | Countries list container  |
-| `countryItem`              | ViewStyle | Individual country row    |
-| `flag`                     | TextStyle | Country flag in list      |
-| `countryInfo`              | ViewStyle | Country details container |
-| `callingCode`              | TextStyle | Calling code in list      |
-| `countryName`              | TextStyle | Country name in list      |
-| `sectionTitle`             | TextStyle | Section headers           |
-| `closeButton`              | ViewStyle | Close button container    |
-| `closeButtonText`          | TextStyle | Close button text         |
-| `countryNotFoundContainer` | ViewStyle | No results container      |
-| `countryNotFoundMessage`   | TextStyle | No results message        |
+| Property                     | Type      | Description               |
+| ---------------------------- | --------- | ------------------------- |
+| `backdrop`                   | ViewStyle | Modal background overlay  |
+| `container`                  | ViewStyle | Modal main container      |
+| `content`                    | ViewStyle | Modal content area        |
+| `dragHandleContainer`        | ViewStyle | Drag Handle area          |
+| `dragHandleIndicator`        | ViewStyle | Drag Handle Indicator     |
+| `searchContainer`            | ViewStyle | Search input wrapper      |
+| `searchInput`                | TextStyle | Search input field        |
+| `list`                       | ViewStyle | Countries list container  |
+| `countryItem`                | ViewStyle | Individual country row    |
+| `flag`                       | TextStyle | Country flag in list      |
+| `countryInfo`                | ViewStyle | Country details container |
+| `callingCode`                | TextStyle | Calling code in list      |
+| `countryName`                | TextStyle | Country name in list      |
+| `sectionTitle`               | TextStyle | Section headers           |
+| `closeButton`                | ViewStyle | Close button container    |
+| `closeButtonText`            | TextStyle | Close button text         |
+| `countryNotFoundContainer`   | ViewStyle | No results container      |
+| `countryNotFoundMessage`     | TextStyle | No results message        |
+| `alphabetContainer`          | ViewStyle | Alphabet filter container |
+| `alphabetLetter`             | ViewStyle | Alphabet letter item      |
+| `alphabetLetterText`         | TextStyle | Alphabet letter text      |
+| `alphabetLetterActive`       | ViewStyle | Active letter state       |
+| `alphabetLetterDisabled`     | ViewStyle | Disabled letter state     |
+| `alphabetLetterTextActive`   | TextStyle | Active letter text        |
+| `alphabetLetterTextDisabled` | TextStyle | Disabled letter text      |
 
 <br>
 
@@ -528,6 +535,7 @@ export default function App() {
 | `removedModalBackdrop`                 | `boolean`                       | Remove modal backdrop entirely                                            |
 | `onModalBackdropPress`                 | `() => void`                    | Callback when modal backdrop is pressed                                   |
 | `onModalRequestClose`                  | `() => void`                    | Callback when modal close is requested                                    |
+| `showModalAlphabetFilter`              | `boolean`                       | Show alphabet filter in modal                                             |
 | `showModalSearchInput`                 | `boolean`                       | Show search input in modal                                                |
 | `showModalCloseButton`                 | `boolean`                       | Show close button in modal                                                |
 | `showModalScrollIndicator`             | `boolean`                       | Show scroll indicator in modal                                            |
@@ -545,6 +553,7 @@ export default function App() {
 | `getCountriesByName`        | `(name: string, language: ILanguage)`      | `ICountry[] \| undefined` | Returns countries that match the given name in the specified language |
 | `getCountryByPhoneNumber`   | `(phoneNumber: string)`                    | `ICountry \| undefined`   | Returns the country that matches the given phone number               |
 | `isValidPhoneNumber`        | `(phoneNumber: string, country: ICountry)` | `boolean`                 | Validates if a phone number is valid for the given country            |
+| `getPhoneNumberLength`      | `(country: ICountry, phoneNumber: string)` | `number`                  | Returns total digits of calling code + phone number                   |
 
 </br>
 
@@ -597,12 +606,14 @@ When utilizing this package, you may need to target the PhoneInput component in
 ```jsx
 const phoneInput = getByTestId('countryPickerPhoneInput');
 const flagContainerButton = getByTestId('countryPickerFlagContainerButton');
-const countrySelect = getByTestId('countrySelectSearchInput');
+const countrySelectModalContainer = getByTestId('countrySelectContainer');
+const countrySelectModalContent = getByTestId('countrySelectContent');
 const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
 const countrySelectList = getByTestId('countrySelectList');
 const countrySelectSearchInput = getByTestId('countrySelectSearchInput');
 const countrySelectItem = getByTestId('countrySelectItem');
 const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
+const countrySelectAlphabetFilter = getByTestId('countrySelectAlphabetFilter');
 ```
 
 <br>
@@ -626,7 +637,11 @@ Ensure your app is inclusive and usable by everyone by leveraging built-in React
 - `accessibilityLabelCountriesList`: Accessibility label for the countries list;
 - `accessibilityHintCountriesList`: Accessibility hint for the countries list;
 - `accessibilityLabelCountryItem`: Accessibility label for individual country items;
-- `accessibilityHintCountryItem`: Accessibility hint for individual country.
+- `accessibilityHintCountryItem`: Accessibility hint for individual country;
+- `accessibilityLabelAlphabetFilter`: Accessibility label for alphabet filter list;
+- `accessibilityHintAlphabetFilter`: Accessibility hint for alphabet filter list;
+- `accessibilityLabelAlphabetLetter`: Accessibility label for individual alphabet filter letter;
+- `accessibilityHintAlphabetLetter`: Accessibility hint for individual alphabet filter letter.
 
 <br>
 

package/lib/index.d.ts

@@ -29,6 +29,11 @@ declare function isValidPhoneNumber(
   country: ICountry,
 ): boolean;
 
+declare function getPhoneNumberLength(
+  selectedCountry: ICountry,
+  phoneNumber: string,
+): number;
+
 export default PhoneInput;
 
 export {
@@ -38,6 +43,7 @@ export {
   getCountriesByCallingCode,
   getCountriesByName,
   isValidPhoneNumber,
+  getPhoneNumberLength,
   ITheme,
   ICountrySelectLanguages,
   ICountry,

package/lib/index.js

@@ -14,6 +14,7 @@ import parsePhoneNumber, {
 } from 'libphonenumber-js';
 
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
+import {getPhoneNumberLength} from './utils/getPhoneNumberLength';
 import isValidPhoneNumber from './utils/isValidPhoneNumber';
 import {
   getCountriesButtonAccessibilityHint,
@@ -72,6 +73,7 @@ const PhoneInput = forwardRef(
       removedModalBackdrop,
       onModalBackdropPress,
       onModalRequestClose,
+      showModalAlphabetFilter = true,
       showModalSearchInput,
       showModalCloseButton,
       showModalScrollIndicator,
@@ -89,6 +91,10 @@ const PhoneInput = forwardRef(
       accessibilityHintCountriesList,
       accessibilityLabelCountryItem,
       accessibilityHintCountryItem,
+      accessibilityLabelAlphabetFilter,
+      accessibilityHintAlphabetFilter,
+      accessibilityLabelAlphabetLetter,
+      accessibilityHintAlphabetLetter,
       ...rest
     },
     ref,
@@ -110,6 +116,7 @@ const PhoneInput = forwardRef(
       value: inputValue,
       getFullPhoneNumber: () => `${countryValue?.idd?.root} ${inputValue}`,
       fullPhoneNumber: `${countryValue?.idd?.root} ${inputValue}`,
+      phoneNumberLength: getPhoneNumberLength(countryValue, inputValue),
       getSelectedCountry: () => countryValue,
       selectedCountry: countryValue,
       isValid: isValidPhoneNumber(inputValue, selectedCountry),
@@ -195,21 +202,15 @@ const PhoneInput = forwardRef(
 
     function onSelect(country) {
       setShow(false);
-
-      if (ref) {
-        setInputValue('');
-      } else {
+      setInputValue('');
+      setCountryValue(country);
+      if (onChangePhoneNumber) {
         onChangePhoneNumber('');
       }
-
-      if (onChangeSelectedCountry || ref) {
-        if (ref) {
-          setCountryValue(country);
-          updateRef('', country);
-        } else {
-          onChangeSelectedCountry(country);
-        }
+      if (onChangeSelectedCountry) {
+        onChangeSelectedCountry(country);
       }
+      updateRef('', country);
     }
 
     function formatPhoneNumberWithCustomMask(phoneNumber) {
@@ -235,12 +236,11 @@ const PhoneInput = forwardRef(
         }
       }
 
-      if (ref) {
-        setInputValue(result);
-        updateRef(result, countryValue);
-      } else {
+      setInputValue(result);
+      if (onChangePhoneNumber) {
         onChangePhoneNumber(result);
       }
+      updateRef(result, countryValue);
     }
 
     function formatPhoneNumber(phoneNumber, callingCode) {
@@ -277,12 +277,11 @@ const PhoneInput = forwardRef(
         return;
       }
 
-      if (ref) {
-        setInputValue(formattedNumber);
-        updateRef(formattedNumber, countryValue);
-      } else {
+      setInputValue(formattedNumber);
+      if (onChangePhoneNumber) {
         onChangePhoneNumber(formattedNumber);
       }
+      updateRef(formattedNumber, countryValue);
     }
 
     function onChangeText(phoneNumber, callingCode) {
@@ -292,12 +291,11 @@ const PhoneInput = forwardRef(
         if (matchingCountry) {
           setDefaultCca2(matchingCountry.cca2);
 
-          if (ref) {
-            setCountryValue(matchingCountry);
-            updateRef('', matchingCountry);
-          } else {
+          setCountryValue(matchingCountry);
+          if (onChangeSelectedCountry) {
             onChangeSelectedCountry(matchingCountry);
           }
+          updateRef('', matchingCountry);
 
           onChangeText(
             phoneNumber.replace(matchingCountry?.idd?.root, ''),
@@ -317,28 +315,24 @@ const PhoneInput = forwardRef(
     useEffect(() => {
       if (!countryValue && !defaultCountry) {
         const country = getCountryByCca2('BR');
-
-        if (ref) {
-          setCountryValue(country);
-          updateRef('', country);
-        } else {
+        setCountryValue(country);
+        if (onChangeSelectedCountry) {
           onChangeSelectedCountry(country);
         }
-      } else {
-        if (ref) {
-          updateRef('', countryValue);
-        }
+        updateRef('', country);
+      } else if (countryValue) {
+        updateRef(inputValue, countryValue);
       }
     }, []);
 
     useEffect(() => {
       if (defaultCountry) {
-        if (ref) {
-          setCountryValue(getCountryByCca2(defaultCountry));
-          updateRef('', getCountryByCca2(defaultCountry));
-        } else {
-          onChangeSelectedCountry(getCountryByCca2(defaultCountry));
+        const c = getCountryByCca2(defaultCountry);
+        setCountryValue(c);
+        if (onChangeSelectedCountry) {
+          onChangeSelectedCountry(c);
         }
+        updateRef('', c);
       }
     }, [defaultCountry]);
 
@@ -349,12 +343,11 @@ const PhoneInput = forwardRef(
         if (matchingCountry) {
           setDefaultCca2(matchingCountry.cca2);
 
-          if (ref) {
-            setCountryValue(matchingCountry);
-            updateRef('', matchingCountry);
-          } else {
+          setCountryValue(matchingCountry);
+          if (onChangeSelectedCountry) {
             onChangeSelectedCountry(matchingCountry);
           }
+          updateRef('', matchingCountry);
         } else {
           // console.warn(
           //   "The default number provided (defaultValue) don't match with anyone country. Please, correct it to be shown in the input. For more information: https://github.com/AstrOOnauta/react-native-international-phone-number#intermediate-usage---typescript--default-phone-number-value",
@@ -374,23 +367,15 @@ const PhoneInput = forwardRef(
     }, [countryValue]);
 
     useEffect(() => {
-      if (!ref) {
+      if (typeof rest.value === 'string') {
         setInputValue(rest.value);
+      }
+      if (selectedCountry) {
         setCountryValue(selectedCountry);
       }
-    }, [selectedCountry]);
-
-    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 {
+    }, [selectedCountry, rest.value]);
+
+    {
       // Create a separate constant for each part of the component
       const touchableStart = (
         <>
@@ -540,6 +525,7 @@ const PhoneInput = forwardRef(
                 disabledBackdropPress={disabledModalBackdropPress}
                 removedBackdrop={removedModalBackdrop}
                 showSearchInput={showModalSearchInput}
+                showAlphabetFilter={showModalAlphabetFilter}
                 countryNotFoundMessage={modalNotFoundCountryMessage}
                 accessibilityLabelBackdrop={accessibilityLabelBackdrop}
                 accessibilityHintBackdrop={accessibilityHintBackdrop}
@@ -553,6 +539,18 @@ const PhoneInput = forwardRef(
                 accessibilityHintCountriesList={accessibilityHintCountriesList}
                 accessibilityLabelCountryItem={accessibilityLabelCountryItem}
                 accessibilityHintCountryItem={accessibilityHintCountryItem}
+                accessibilityLabelAlphabetFilter={
+                  accessibilityLabelAlphabetFilter
+                }
+                accessibilityHintAlphabetFilter={
+                  accessibilityHintAlphabetFilter
+                }
+                accessibilityLabelAlphabetLetter={
+                  accessibilityLabelAlphabetLetter
+                }
+                accessibilityHintAlphabetLetter={
+                  accessibilityHintAlphabetLetter
+                }
               />
             </>
           ) : null}
@@ -571,4 +569,5 @@ export {
   getCountriesByCallingCode,
   getCountriesByName,
   isValidPhoneNumber,
+  getPhoneNumberLength,
 };

package/lib/interfaces/phoneInputProps.ts

@@ -46,6 +46,7 @@ interface BasePhoneInput extends TextInputProps {
   removedModalBackdrop?: boolean;
   onModalBackdropPress?: () => void;
   onModalRequestClose?: () => void;
+  showModalAlphabetFilter?: boolean;
   showModalSearchInput?: boolean;
   showModalCloseButton?: boolean;
   showModalScrollIndicator?: boolean;
@@ -63,24 +64,28 @@ interface BasePhoneInput extends TextInputProps {
   accessibilityHintCountriesList?: string;
   accessibilityLabelCountryItem?: string;
   accessibilityHintCountryItem?: string;
+  accessibilityLabelAlphabetFilter?: string;
+  accessibilityHintAlphabetFilter?: string;
+  accessibilityLabelAlphabetLetter?: string;
+  accessibilityHintAlphabetLetter?: string;
 }
 
-interface IPhoneInputPropsWithoutRef extends BasePhoneInput {
+interface PhoneInputPropsWithoutRef extends BasePhoneInput {
   value: string;
   onChangePhoneNumber: (phoneNumber: string) => void;
   selectedCountry: ICountry | undefined | null;
   onChangeSelectedCountry: (country: ICountry) => void;
-  ref?: never;
+  ref?: Ref<IPhoneInputRef>;
 }
 
-interface IPhoneInputPropsWithRef extends BasePhoneInput {
-  value?: never;
-  onChangePhoneNumber?: never;
-  selectedCountry?: never;
-  onChangeSelectedCountry?: never;
+interface PhoneInputPropsWithRef extends BasePhoneInput {
   ref: Ref<IPhoneInputRef>;
+  value?: string;
+  onChangePhoneNumber?: (phoneNumber: string) => void;
+  selectedCountry?: ICountry | undefined | null;
+  onChangeSelectedCountry?: (country: ICountry) => void;
 }
 
 export type PhoneInputProps =
-  | IPhoneInputPropsWithRef
-  | IPhoneInputPropsWithoutRef;
+  | PhoneInputPropsWithoutRef
+  | PhoneInputPropsWithRef;

package/lib/interfaces/phoneInputRef.ts

@@ -13,6 +13,7 @@ export interface IPhoneInputRef extends TextInput {
   valueFormatted: string;
   getFullPhoneNumber: () => string;
   fullPhoneNumber: string;
+  phoneNumberLength: number;
   getSelectedCountry: () => ICountry;
   selectedCountry: ICountry;
   isValid: boolean;

package/lib/utils/getPhoneNumberLength.js

@@ -0,0 +1,4 @@
+export function getPhoneNumberLength(selectedCountry, phoneNumber) {
+  return `${selectedCountry?.idd?.root}${phoneNumber}`.replace(/\D/g, '')
+    .length;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.10.7",
+  "version": "0.11.0",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,8 +44,8 @@
     "react-native": "*"
   },
   "dependencies": {
-    "react-native-country-select": "0.2.4",
-    "libphonenumber-js": "1.12.17"
+    "react-native-country-select": "0.3.1",
+    "libphonenumber-js": "1.12.23"
   },
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.61.0"