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

package/README.md

@@ -609,7 +609,24 @@ const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
 
 ## Accessibility
 
-Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered by this package.
+Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered and customizable by this package.
+
+### Custom Accessibility Props Available
+
+- `accessibilityLabelPhoneInput`: Accessibility label for the phone input;
+- `accessibilityHintPhoneInput`: Accessibility hint for the phone input;
+- `accessibilityLabelCountriesButton`: Accessibility label for the countries button to open modal;
+- `accessibilityHintCountriesButton`: Accessibility hint for the countries button to open modal;
+- `accessibilityLabelBackdrop`: Accessibility label for the backdrop;
+- `accessibilityHintBackdrop`: Accessibility hint for the backdrop;
+- `accessibilityLabelCloseButton`: Accessibility label for the close button;
+- `accessibilityHintCloseButton`: Accessibility hint for the close button;
+- `accessibilityLabelSearchInput`: Accessibility label for the search input;
+- `accessibilityHintSearchInput`: Accessibility hint for the search input;
+- `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.
 
 <br>
 

package/lib/index.js

@@ -15,7 +15,13 @@ import parsePhoneNumber, {
 
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
 import isValidPhoneNumber from './utils/isValidPhoneNumber';
-import {getPhoneNumberInputPlaceholder} from './utils/getPlaceholders';
+import {
+  getCountriesButtonAccessibilityHint,
+  getCountriesButtonAccessibilityLabel,
+  getPhoneNumberInputAccessibilityHint,
+  getPhoneNumberInputAccessibilityLabel,
+  getPhoneNumberInputPlaceholder,
+} from './utils/getTranslations';
 import {
   getCaretStyle,
   getContainerStyle,
@@ -69,6 +75,20 @@ const PhoneInput = forwardRef(
       showModalSearchInput,
       showModalCloseButton,
       showModalScrollIndicator,
+      accessibilityLabelPhoneInput,
+      accessibilityHintPhoneInput,
+      accessibilityLabelCountriesButton,
+      accessibilityHintCountriesButton,
+      accessibilityLabelBackdrop,
+      accessibilityHintBackdrop,
+      accessibilityLabelCloseButton,
+      accessibilityHintCloseButton,
+      accessibilityLabelSearchInput,
+      accessibilityHintSearchInput,
+      accessibilityLabelCountriesList,
+      accessibilityHintCountriesList,
+      accessibilityLabelCountryItem,
+      accessibilityHintCountryItem,
       ...rest
     },
     ref,
@@ -133,6 +153,20 @@ const PhoneInput = forwardRef(
         showModalSearchInput,
         showModalCloseButton,
         showModalScrollIndicator,
+        accessibilityLabelPhoneInput,
+        accessibilityHintPhoneInput,
+        accessibilityLabelCountriesButton,
+        accessibilityHintCountriesButton,
+        accessibilityLabelBackdrop,
+        accessibilityHintBackdrop,
+        accessibilityLabelCloseButton,
+        accessibilityHintCloseButton,
+        accessibilityLabelSearchInput,
+        accessibilityHintSearchInput,
+        accessibilityLabelCountriesList,
+        accessibilityHintCountriesList,
+        accessibilityLabelCountryItem,
+        accessibilityHintCountryItem,
         ...rest,
       },
     };
@@ -213,9 +247,9 @@ const PhoneInput = forwardRef(
       let formattedNumber = '';
 
       const metadata = new Metadata();
-      metadata.selectNumberingPlan(selectedCountry?.cca2);
+      metadata.selectNumberingPlan(countryValue?.cca2);
 
-      const possibleLengths = selectedCountry ? metadata.possibleLengths() : [];
+      const possibleLengths = countryValue ? metadata.possibleLengths() : [];
 
       let validCallingCode = callingCode
         ? callingCode
@@ -309,12 +343,6 @@ const PhoneInput = forwardRef(
     }, [defaultCountry]);
 
     useEffect(() => {
-      if (ref) {
-        setInputValue('');
-      } else {
-        onChangePhoneNumber('');
-      }
-
       if (defaultValue) {
         const matchingCountry = getCountryByPhoneNumber(defaultValue);
 
@@ -328,31 +356,15 @@ const PhoneInput = forwardRef(
             onChangeSelectedCountry(matchingCountry);
           }
         } else {
-          setDefaultCca2(null);
-
-          if (ref) {
-            setCountryValue(null);
-            updateRef('', null);
-          } else {
-            onChangeSelectedCountry(null);
-          }
-
-          onChangeText('', null);
-
-          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",
-          );
+          // 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",
+          // );
         }
       }
     }, [defaultValue]);
 
     useEffect(() => {
-      if (
-        defaultValue &&
-        countryValue &&
-        countryValue.cca2 === defaultCca2 &&
-        !inputValue
-      ) {
+      if (defaultValue && countryValue && countryValue.cca2 === defaultCca2) {
         const callingCode = countryValue?.idd?.root;
 
         let phoneNumber = defaultValue;
@@ -414,8 +426,14 @@ const PhoneInput = forwardRef(
         <TouchableOpacity
           testID="countryPickerFlagContainerButton"
           accessibillityRole="button"
-          accessibilityLabel="Countries button"
-          accessibilityHint="Click to open the countries modal"
+          accessibilityLabel={
+            accessibilityLabelCountriesButton ||
+            getCountriesButtonAccessibilityLabel(language || 'eng')
+          }
+          accessibilityHint={
+            accessibilityHintCountriesButton ||
+            getCountriesButtonAccessibilityHint(language || 'eng')
+          }
           activeOpacity={disabled || modalDisabled ? 1 : 0.6}
           onPress={() => (disabled || modalDisabled ? null : setShow(true))}
           style={getFlagContainerStyle(theme, phoneInputStyles?.flagContainer)}>
@@ -437,7 +455,7 @@ const PhoneInput = forwardRef(
           placeholder={
             placeholder === '' || placeholder
               ? placeholder
-              : getPhoneNumberInputPlaceholder(language || 'en')
+              : getPhoneNumberInputPlaceholder(language || 'eng')
           }
           placeholderTextColor={
             phoneInputPlaceholderTextColor ||
@@ -454,8 +472,14 @@ const PhoneInput = forwardRef(
           ref={textInputRef}
           testID="countryPickerPhoneInput"
           accessibillityRole="input"
-          accessibilityLabel="Phone Number input"
-          accessibilityHint="Write the phone number"
+          accessibilityLabel={
+            accessibilityLabelPhoneInput ||
+            getPhoneNumberInputAccessibilityLabel(language || 'eng')
+          }
+          accessibilityHint={
+            accessibilityHintPhoneInput ||
+            getPhoneNumberInputAccessibilityHint(language || 'eng')
+          }
           {...rest}
         />
       );
@@ -517,6 +541,18 @@ const PhoneInput = forwardRef(
                 removedBackdrop={removedModalBackdrop}
                 showSearchInput={showModalSearchInput}
                 countryNotFoundMessage={modalNotFoundCountryMessage}
+                accessibilityLabelBackdrop={accessibilityLabelBackdrop}
+                accessibilityHintBackdrop={accessibilityHintBackdrop}
+                accessibilityLabelCloseButton={accessibilityLabelCloseButton}
+                accessibilityHintCloseButton={accessibilityHintCloseButton}
+                accessibilityLabelSearchInput={accessibilityLabelSearchInput}
+                accessibilityHintSearchInput={accessibilityHintSearchInput}
+                accessibilityLabelCountriesList={
+                  accessibilityLabelCountriesList
+                }
+                accessibilityHintCountriesList={accessibilityHintCountriesList}
+                accessibilityLabelCountryItem={accessibilityLabelCountryItem}
+                accessibilityHintCountryItem={accessibilityHintCountryItem}
               />
             </>
           ) : null}

package/lib/interfaces/phoneInputProps.ts

@@ -49,6 +49,20 @@ interface BasePhoneInput extends TextInputProps {
   showModalSearchInput?: boolean;
   showModalCloseButton?: boolean;
   showModalScrollIndicator?: boolean;
+  accessibilityLabelPhoneInput?: string;
+  accessibilityHintPhoneInput?: string;
+  accessibilityLabelCountriesButton?: string;
+  accessibilityHintCountriesButton?: string;
+  accessibilityLabelBackdrop?: string;
+  accessibilityHintBackdrop?: string;
+  accessibilityLabelCloseButton?: string;
+  accessibilityHintCloseButton?: string;
+  accessibilityLabelSearchInput?: string;
+  accessibilityHintSearchInput?: string;
+  accessibilityLabelCountriesList?: string;
+  accessibilityHintCountriesList?: string;
+  accessibilityLabelCountryItem?: string;
+  accessibilityHintCountryItem?: string;
 }
 
 interface IPhoneInputPropsWithoutRef extends BasePhoneInput {

package/lib/utils/getTranslations.js

@@ -0,0 +1,354 @@
+export function getPhoneNumberInputPlaceholder(language) {
+  switch (language) {
+    case 'ara':
+      return 'أدخل رقم الهاتف';
+    case 'bel':
+      return 'Увядзіце свой нумар тэлефона';
+    case 'bre':
+      return 'Roit ho niver pellgomz';
+    case 'bul':
+      return 'Въведете телефонния си номер';
+    case 'ces':
+      return 'Vložte své telefonní číslo';
+    case 'deu':
+      return 'Geben Sie Ihre Rufnummer ein';
+    case 'ell':
+      return 'Εισάγετε τον αριθμό τηλεφώνου σας';
+    case 'eng':
+      return 'Insert your phone number';
+    case 'est':
+      return 'Sisestage oma telefoninumber';
+    case 'fin':
+      return 'Syötä puhelinnumerosi';
+    case 'fra':
+      return 'Insérez votre numéro de téléphone';
+    case 'heb':
+      return 'הכנס את מספר הטלפון שלך';
+    case 'hrv':
+      return 'Unesite svoj broj telefona';
+    case 'hun':
+      return 'Adja meg a telefonszámát';
+    case 'ita':
+      return 'Inserire il numero di telefono';
+    case 'jpn':
+      return '電話番号を入力してください';
+    case 'kor':
+      return '전화번호를 입력하세요';
+    case 'nld':
+      return 'Voer uw telefoonnummer in';
+    case 'per':
+      return 'شماره تلفن خود را وارد کنید';
+    case 'pol':
+      return 'Wprowadź swój numer telefonu';
+    case 'por':
+      return 'Insira seu número de telefone';
+    case 'ron':
+      return 'Introduceți numărul dvs. de telefon';
+    case 'rus':
+      return 'Вставьте свой номер телефона';
+    case 'slk':
+      return 'Zadajte svoje telefónne číslo';
+    case 'spa':
+      return 'Introduzca su número de teléfono';
+    case 'srp':
+      return 'Унесите свој број телефона';
+    case 'swe':
+      return 'Ange ditt telefonnummer';
+    case 'tur':
+      return 'Telefon numarası girin';
+    case 'ukr':
+      return 'Введіть свій номер телефону';
+    case 'urd':
+      return 'اپنا فون نمبر درج کریں';
+    case 'zho':
+      return '输入电话号码';
+    case 'zho-Hans':
+      return '输入电话号码';
+    case 'zho-Hant':
+      return '輸入電話號碼';
+  }
+}
+
+export function getPhoneNumberInputAccessibilityLabel(language) {
+  switch (language) {
+    case 'ara':
+      return 'حقل إدخال رقم الهاتف';
+    case 'bel':
+      return 'Поле для ўводу нумара тэлефона';
+    case 'bre':
+      return 'Maezienn niver pellgomz';
+    case 'bul':
+      return 'Поле за телефонен номер';
+    case 'ces':
+      return 'Pole pro telefonní číslo';
+    case 'deu':
+      return 'Telefonnummer-Eingabefeld';
+    case 'ell':
+      return 'Πεδίο εισαγωγής αριθμού τηλεφώνου';
+    case 'eng':
+      return 'Phone Number input';
+    case 'est':
+      return 'Telefoninumbri sisestusväli';
+    case 'fin':
+      return 'Puhelinnumeron syöttökenttä';
+    case 'fra':
+      return 'Champ numéro de téléphone';
+    case 'heb':
+      return 'שדה קלט מספר טלפון';
+    case 'hrv':
+      return 'Polje za unos broja telefona';
+    case 'hun':
+      return 'Telefonszám mező';
+    case 'ita':
+      return 'Campo numero di telefono';
+    case 'jpn':
+      return '電話番号入力欄';
+    case 'kor':
+      return '전화번호 입력란';
+    case 'nld':
+      return 'Telefoonnummer veld';
+    case 'per':
+      return 'فیلد ورود شماره تلفن';
+    case 'pol':
+      return 'Pole numeru telefonu';
+    case 'por':
+      return 'Campo do número de telefone';
+    case 'ron':
+      return 'Câmp număr de telefon';
+    case 'rus':
+      return 'Поле для ввода номера телефона';
+    case 'slk':
+      return 'Pole telefónneho čísla';
+    case 'spa':
+      return 'Campo del número de teléfono';
+    case 'srp':
+      return 'Поље за број телефона';
+    case 'swe':
+      return 'Telefonnummerfält';
+    case 'tur':
+      return 'Telefon numarası girişi';
+    case 'ukr':
+      return 'Поле номера телефону';
+    case 'urd':
+      return 'فون نمبر ان پٹ';
+    case 'zho':
+      return '电话号码输入框';
+    case 'zho-Hans':
+      return '电话号码输入框';
+    case 'zho-Hant':
+      return '電話號碼輸入欄位';
+  }
+}
+
+export function getPhoneNumberInputAccessibilityHint(language) {
+  switch (language) {
+    case 'ara':
+      return 'اكتب رقم الهاتف';
+    case 'bel':
+      return 'Увядзіце нумар тэлефона';
+    case 'bre':
+      return 'Skrivit an niver pellgomz';
+    case 'bul':
+      return 'Напишете телефонен номер';
+    case 'ces':
+      return 'Napište telefonní číslo';
+    case 'deu':
+      return 'Schreiben Sie die Telefonnummer';
+    case 'ell':
+      return 'Γράψτε τον αριθμό τηλεφώνου';
+    case 'eng':
+      return 'Write the phone number';
+    case 'est':
+      return 'Kirjutage telefoninumber';
+    case 'fin':
+      return 'Kirjoita puhelinnumero';
+    case 'fra':
+      return 'Écrivez le numéro de téléphone';
+    case 'heb':
+      return 'כתוב את מספר הטלפון';
+    case 'hrv':
+      return 'Upišite broj telefona';
+    case 'hun':
+      return 'Írja be a telefonszámot';
+    case 'ita':
+      return 'Scrivi il numero di telefono';
+    case 'jpn':
+      return '電話番号を入力してください';
+    case 'kor':
+      return '전화번호를 입력하세요';
+    case 'nld':
+      return 'Schrijf het telefoonnummer';
+    case 'per':
+      return 'شماره تلفن را وارد کنید';
+    case 'pol':
+      return 'Wpisz numer telefonu';
+    case 'por':
+      return 'Digite o número de telefone';
+    case 'ron':
+      return 'Scrieți numărul de telefon';
+    case 'rus':
+      return 'Введите номер телефона';
+    case 'slk':
+      return 'Napíšte telefónne číslo';
+    case 'spa':
+      return 'Escriba el número de teléfono';
+    case 'srp':
+      return 'Упишите број телефона';
+    case 'swe':
+      return 'Skriv telefonnumret';
+    case 'tur':
+      return 'Telefon numarasını yazın';
+    case 'ukr':
+      return 'Введіть номер телефону';
+    case 'urd':
+      return 'فون نمبر لکھیں';
+    case 'zho':
+      return '输入电话号码';
+    case 'zho-Hans':
+      return '输入电话号码';
+    case 'zho-Hant':
+      return '輸入電話號碼';
+  }
+}
+
+export function getCountriesButtonAccessibilityLabel(language) {
+  switch (language) {
+    case 'ara':
+      return 'زر البلدان';
+    case 'bel':
+      return 'Кнопка выбару краіны';
+    case 'bre':
+      return 'Nozelen broioù';
+    case 'bul':
+      return 'Бутон държави';
+    case 'ces':
+      return 'Tlačítko zemí';
+    case 'deu':
+      return 'Länder-Button';
+    case 'ell':
+      return 'Κουμπί χωρών';
+    case 'eng':
+      return 'Countries button';
+    case 'est':
+      return 'Riikide nupp';
+    case 'fin':
+      return 'Maat-painike';
+    case 'fra':
+      return 'Bouton pays';
+    case 'heb':
+      return 'כפתור מדינות';
+    case 'hrv':
+      return 'Gumb zemlje';
+    case 'hun':
+      return 'Országok gomb';
+    case 'ita':
+      return 'Pulsante paesi';
+    case 'jpn':
+      return '国ボタン';
+    case 'kor':
+      return '국가 버튼';
+    case 'nld':
+      return 'Landenknop';
+    case 'per':
+      return 'دکمه کشورها';
+    case 'pol':
+      return 'Przycisk krajów';
+    case 'por':
+      return 'Botão de países';
+    case 'ron':
+      return 'Buton țări';
+    case 'rus':
+      return 'Кнопка выбора страны';
+    case 'slk':
+      return 'Tlačidlo krajín';
+    case 'spa':
+      return 'Botón de países';
+    case 'srp':
+      return 'Дугме за земље';
+    case 'swe':
+      return 'Länderknapp';
+    case 'tur':
+      return 'Ülkeler butonu';
+    case 'ukr':
+      return 'Кнопка країн';
+    case 'urd':
+      return 'ممالک کا بٹن';
+    case 'zho':
+      return '国家按钮';
+    case 'zho-Hans':
+      return '国家按钮';
+    case 'zho-Hant':
+      return '國家按鈕';
+  }
+}
+
+export function getCountriesButtonAccessibilityHint(language) {
+  switch (language) {
+    case 'ara':
+      return 'انقر لفتح نافذة البلدان';
+    case 'bel':
+      return 'Націсніце, каб адкрыць акно з краінамі';
+    case 'bre':
+      return 'Klikit evit digeriñ ar prenestr broioù';
+    case 'bul':
+      return 'Щракнете, за да отворите прозореца с държави';
+    case 'ces':
+      return 'Klikněte pro otevření okna se zeměmi';
+    case 'deu':
+      return 'Klicken Sie, um das Länder-Modal zu öffnen';
+    case 'ell':
+      return 'Κάντε κλικ για να ανοίξετε το παράθυρο χωρών';
+    case 'eng':
+      return 'Click to open the countries modal';
+    case 'est':
+      return 'Klõpsake riikide akna avamiseks';
+    case 'fin':
+      return 'Napsauta avataksesi maat-ikkunan';
+    case 'fra':
+      return 'Cliquez pour ouvrir la fenêtre des pays';
+    case 'heb':
+      return 'לחץ כדי לפתוח את חלון המדינות';
+    case 'hrv':
+      return 'Kliknite za otvaranje prozora zemalja';
+    case 'hun':
+      return 'Kattintson az országok ablak megnyitásához';
+    case 'ita':
+      return 'Clicca per aprire la finestra dei paesi';
+    case 'jpn':
+      return '国一覧のモーダルを開くにはクリック';
+    case 'kor':
+      return '국가 모달을 열려면 클릭하세요';
+    case 'nld':
+      return 'Klik om het landenvenster te openen';
+    case 'per':
+      return 'برای باز کردن پنجره کشورها کلیک کنید';
+    case 'pol':
+      return 'Kliknij, aby otworzyć okno krajów';
+    case 'por':
+      return 'Clique para abrir o modal de países';
+    case 'ron':
+      return 'Faceți clic pentru a deschide fereastra țărilor';
+    case 'rus':
+      return 'Нажмите, чтобы открыть окно выбора страны';
+    case 'slk':
+      return 'Kliknutím otvoríte okno krajín';
+    case 'spa':
+      return 'Haga clic para abrir el modal de países';
+    case 'srp':
+      return 'Кликните да отворите прозор са земљама';
+    case 'swe':
+      return 'Klicka för att öppna landsfönstret';
+    case 'tur':
+      return 'Ülkeler penceresini açmak için tıklayın';
+    case 'ukr':
+      return 'Натисніть, щоб відкрити вікно країн';
+    case 'urd':
+      return 'ممالک کی ونڈو کھولنے کے لیے کلک کریں';
+    case 'zho':
+      return '点击打开国家选择窗口';
+    case 'zho-Hans':
+      return '点击打开国家选择窗口';
+    case 'zho-Hant':
+      return '點擊開啟國家選擇視窗';
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "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.3",
-    "libphonenumber-js": "1.12.10"
+    "react-native-country-select": "0.2.4",
+    "libphonenumber-js": "1.12.17"
   },
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.61.0"

package/lib/utils/getPlaceholders.js

@@ -1,44 +0,0 @@
-export function getPhoneNumberInputPlaceholder(language) {
-  switch (language) {
-    case 'en':
-      return 'Insert your phone number';
-    case 'ru':
-      return 'Вставьте свой номер телефона';
-    case 'pl':
-      return 'Wprowadź swój numer telefonu';
-    case 'ua':
-      return 'Введіть свій номер телефону';
-    case 'cz':
-      return 'Vložte své telefonní číslo';
-    case 'by':
-      return 'Увядзіце свой нумар тэлефона';
-    case 'pt':
-      return 'Insira seu número de telefone';
-    case 'es':
-      return 'Introduzca su número de teléfono';
-    case 'ro':
-      return 'Introduceți numărul dvs. de telefon';
-    case 'bg':
-      return 'Въведете телефонния си номер';
-    case 'de':
-      return 'Geben Sie Ihre Rufnummer ein';
-    case 'fr':
-      return 'Insérez votre numéro de téléphone';
-    case 'nl':
-      return 'Voer uw telefoonnummer in';
-    case 'it':
-      return 'Inserire il numero di telefono';
-    case 'cn':
-      return '输入电话号码';
-    case 'ee':
-      return 'Sisestage oma telefoninumber';
-    case 'jp':
-      return '電話番号を入力してください';
-    case 'he':
-      return 'הכנס את מספר הטלפון שלך';
-    case 'ar':
-      return 'أدخل رقم الهاتف';
-    case 'tr':
-      return 'Telefon numarası girin';
-  }
-}