react-native-international-phone-number 0.8.7 → 0.9.1

package/README.md

@@ -42,6 +42,7 @@
 ## Features
 
 - 📱 Works with iOS, Android (Cross-platform), Expo and Web;
+- ✅ Check phone number validation;
 - 🎨 Lib with UI customizable;
 - 🌎 Phone Input Mask according with the selected country;
 - 👨‍💻 Functional and class component support;
@@ -87,6 +88,8 @@
   - [Show Only Some Countries Inside Modal](#show-only-some-countries)
   - [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)
+  - [Custom Modal Section Titles](#custom-modal-section-titles)
+  - [Hide the Modal Section Titles](#hide-the-modal-section-titles)
   - [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)
@@ -100,6 +103,7 @@
 
 ## Old Versions
 
+- [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)
 - [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)
@@ -162,21 +166,6 @@ npx react-native-asset
 
 > Observation: you need to recompile your project after adding new fonts.
 
-- ### Using Web:
-
-Change the `app.json` file to:
-
-```bash
-  ...
-
-  "web": {
-    ...
-    "output": "single",
-    ...
-  },
-  ...
-```
-
 <br>
 
 ## Basic Usage
@@ -186,7 +175,7 @@ Change the `app.json` file to:
 ```jsx
 import React from 'react';
 import { View, Text } from 'react-native';
-import PhoneInput from 'react-native-international-phone-number';
+import PhoneInput, { isValidPhoneNumber } from 'react-native-international-phone-number';
 
 export class App extends React.Component {
   constructor(props) {
@@ -226,6 +215,12 @@ export class App extends React.Component {
           <Text>
             Phone Number: {`${this.state.selectedCountry?.callingCode} ${this.state.inputValue}`}
           </Text>
+          <Text>
+            isValid:{' '}
+            {isValidPhoneNumber(this.state.inputValue, this.state.selectedCountry)
+              ? 'true'
+              : 'false'}
+          </Text>
         </View>
       </View>
     );
@@ -238,7 +233,9 @@ export class App extends React.Component {
 ```jsx
 import React, { useState } from 'react';
 import { View, Text } from 'react-native';
-import PhoneInput from 'react-native-international-phone-number';
+import PhoneInput, {
+  isValidPhoneNumber,
+} from 'react-native-international-phone-number';
 
 export default function App() {
   const [selectedCountry, setSelectedCountry] = useState(null);
@@ -269,6 +266,12 @@ export default function App() {
           Phone Number:{' '}
           {`${selectedCountry?.callingCode} ${inputValue}`}
         </Text>
+        <Text>
+          isValid:{' '}
+          {isValidPhoneNumber(inputValue, selectedCountry)
+            ? 'true'
+            : 'false'}
+        </Text>
       </View>
     </View>
   );
@@ -282,6 +285,7 @@ import React, { useState } from 'react';
 import { View, Text } from 'react-native';
 import PhoneInput, {
   ICountry,
+  isValidPhoneNumber,
 } from 'react-native-international-phone-number';
 
 export default function App() {
@@ -314,6 +318,12 @@ export default function App() {
           Phone Number:{' '}
           {`${selectedCountry?.callingCode} ${inputValue}`}
         </Text>
+        <Text>
+          isValid:{' '}
+          {isValidPhoneNumber(inputValue, selectedCountry)
+            ? 'true'
+            : 'false'}
+        </Text>
       </View>
     </View>
   );
@@ -340,7 +350,7 @@ export default function App() {
   function onSubmitRef() {
     Alert.alert(
       'Intermediate Result',
-      `${phoneInputRef.current?.selectedCountry?.callingCode} ${phoneInputRef.current?.value}`
+      `Country: ${inputRef.current?.selectedCountry?.name?.en} \nPhone Number: ${inputRef.current?.fullPhoneNumber} \nisValid: ${inputRef.current?.isValid}`
     );
   }
 
@@ -386,6 +396,7 @@ import React, { useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, Alert } from 'react-native';
 import PhoneInput, {
   ICountry,
+  isValidPhoneNumber,
 } from 'react-native-international-phone-number';
 import { Controller, FieldValues } from 'react-hook-form';
 
@@ -403,9 +414,15 @@ export default function App() {
   }
 
   function onSubmit(form: FormProps) {
+    const phoneNumber = `${selectedCountry?.callingCode} ${form.phoneNumber}`;
+    const isValid = isValidPhoneNumber(
+      form.phoneNumber,
+      selectedCountry as ICountry
+    );
+
     Alert.alert(
       'Advanced Result',
-      `${selectedCountry?.callingCode} ${form.phoneNumber}`
+      `Country: ${selectedCountry?.name?.en} \nPhone Number: ${phoneNumber} \nisValid: ${isValid}`
     );
   }
 
@@ -545,6 +562,10 @@ export default function App() {
       countryName: {
         color: '#F3F3F3',
       },
+      sectionTitle: {
+        marginVertical: 10,
+        color: '#F3F3F3',
+      }
     }}
   />
   ...
@@ -693,6 +714,17 @@ export default function App() {
 
 - ### Show Popular Countries at the Top of the Countries List Inside Modal:
 
+```jsx
+  ...
+  <PhoneInput
+    ...
+    popularCountriess={['BR', 'PT', 'CA', 'US']}
+  />
+  ...
+```
+
+- ### Custom Modal Section Titles:
+
 ```jsx
   ...
   <PhoneInput
@@ -704,6 +736,18 @@ export default function App() {
   ...
 ```
 
+- ### Hide the Modal Section Titles:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    popularCountriess={['BR', 'PT', 'CA', 'US']}
+    modalSectionTitleDisabled
+  />
+  ...
+```
+
 - ### Right to Left Input:
 
 ```jsx
@@ -745,6 +789,7 @@ export default function App() {
 - `popularCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
 - `popularCountriesSectionTitle?:` string;
 - `restOfCountriesSectionTitle?:` string;
+- `modalSectionTitleDisabled?:` boolean;
 - `rtl?:` boolean;
 - `disabled?:` boolean;
 - `modalDisabled?:` boolean;
@@ -758,7 +803,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
+- `allowZeroAfterCallingCode?:` boolean.
 
 <br>
 
@@ -769,6 +814,7 @@ export default function App() {
 - `getCountryByCca2:` (cca2: string) => [ICountry](lib/interfaces/country.ts) | undefined;
 - `getCountriesByName:` (name: string, language: [ILanguage](lib/interfaces/language.ts)) => [ICountry](lib/interfaces/country.ts)[] | undefined;
 - `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](lib/interfaces/country.ts) | undefined;
+- `isValidPhoneNumber:` (phoneNumber: string, country: [ICountry](lib/interfaces/country.ts)) => boolean.
 
 </br>
 

package/lib/constants/countries.js

@@ -933,7 +933,7 @@ export const countries = [
       zh: '巴西',
       tr: 'Brezilya',
     },
-    phoneMasks: ['## ##### ####'],
+    phoneMasks: ['## #### ####', '## ##### ####'],
   },
   {
     callingCode: '+1',

package/lib/index.d.ts

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+
 import { ITheme } from './interfaces/theme';
 import { ICountry } from './interfaces/country';
 import { ILanguage } from './interfaces/language';
@@ -23,6 +25,11 @@ declare function getCountriesByName(
   language: ILanguage
 ): ICountry[] | undefined;
 
+declare function isValidPhoneNumber(
+  phoneNumber: string,
+  country: ICountry
+): boolean;
+
 export default PhoneInput;
 
 export {
@@ -31,6 +38,7 @@ export {
   getCountryByCca2,
   getCountriesByCallingCode,
   getCountriesByName,
+  isValidPhoneNumber,
   ITheme,
   ILanguage,
   ICountry,

package/lib/index.js

@@ -21,9 +21,12 @@ import getCountriesByName from './utils/getCountriesByName';
 import getCountriesByCallingCode from './utils/getCountriesByCallingCode';
 import getCountryByCca2 from './utils/getCountryByCca2';
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
+import isValidPhoneNumber from './utils/isValidPhoneNumber';
 import {
   getCountryNotFoundMessage,
   getPhoneNumberInputPlaceholder,
+  getPopularCountriesSectionTitle,
+  getRestOfCountriesSectionTitle,
   getSearchInputPlaceholder,
 } from './utils/getPlaceholders';
 import {
@@ -35,8 +38,8 @@ import {
   getFlagStyle,
   getFlagTextStyle,
   getInputStyle,
+  getModalSectionTitleStyle,
 } from './utils/getStyles';
-import styles from './styles';
 
 const PhoneInput = forwardRef(
   (
@@ -62,6 +65,7 @@ const PhoneInput = forwardRef(
       popularCountries,
       popularCountriesSectionTitle,
       restOfCountriesSectionTitle,
+      modalSectionTitleDisabled,
       modalSearchInputPlaceholder,
       modalSearchInputPlaceholderTextColor,
       modalSearchInputSelectionColor,
@@ -94,6 +98,7 @@ const PhoneInput = forwardRef(
       fullPhoneNumber: `${countryValue?.callingCode} ${inputValue}`,
       getSelectedCountry: () => countryValue,
       selectedCountry: countryValue,
+      isValid: isValidPhoneNumber(inputValue, selectedCountry),
       props: {
         theme,
         language,
@@ -114,6 +119,9 @@ const PhoneInput = forwardRef(
         showOnly,
         excludedCountries,
         popularCountries,
+        popularCountriesSectionTitle,
+        restOfCountriesSectionTitle,
+        modalSectionTitleDisabled,
         modalSearchInputPlaceholder,
         modalSearchInputPlaceholderTextColor,
         modalSearchInputSelectionColor,
@@ -137,6 +145,7 @@ const PhoneInput = forwardRef(
           fullPhoneNumber: `${country?.callingCode} ${phoneNumber}`,
           getSelectedCountry: () => country,
           selectedCountry: country,
+          isValid: isValidPhoneNumber(phoneNumber, country),
           props: {
             ...refBase.props,
             value: phoneNumber,
@@ -334,7 +343,10 @@ const PhoneInput = forwardRef(
       // Create a separate constant for each part of the component
       const touchableStart = (
         <>
-          <Text testID={`${testID}-flag`} style={getFlagStyle(phoneInputStyles?.flag)}>
+          <Text
+            testID={`${testID}-flag`}
+            style={getFlagStyle(phoneInputStyles?.flag)}
+          >
             {countryValue?.flag}
           </Text>
           {customCaret || (
@@ -472,6 +484,7 @@ const PhoneInput = forwardRef(
               )}
               pickerButtonOnPress={onSelect}
               onBackdropPress={() => setShow(false)}
+              onRequestClose={() => setShow(false)}
               showOnly={showOnly}
               excludedCountries={excludedCountries}
               popularCountries={popularCountries}
@@ -479,8 +492,18 @@ const PhoneInput = forwardRef(
               ListHeaderComponent={({ countries, lang, onPress }) => {
                 return (
                   <View>
-                    {popularCountriesSectionTitle && (
-                      <Text>{popularCountriesSectionTitle}</Text>
+                    {!modalSectionTitleDisabled && (
+                      <Text
+                        style={getModalSectionTitleStyle(
+                          theme,
+                          modalStyles
+                        )}
+                      >
+                        {popularCountriesSectionTitle ||
+                          getPopularCountriesSectionTitle(
+                            language || 'en'
+                          )}
+                      </Text>
                     )}
                     {countries.map((country, index) => {
                       return (
@@ -497,9 +520,17 @@ const PhoneInput = forwardRef(
                         />
                       );
                     })}
-                    {restOfCountriesSectionTitle && (
-                      <Text style={styles.sectionTitle}>
-                        {restOfCountriesSectionTitle}
+                    {!modalSectionTitleDisabled && (
+                      <Text
+                        style={getModalSectionTitleStyle(
+                          theme,
+                          modalStyles
+                        )}
+                      >
+                        {restOfCountriesSectionTitle ||
+                          getRestOfCountriesSectionTitle(
+                            language || 'en'
+                          )}
                       </Text>
                     )}
                   </View>
@@ -521,4 +552,5 @@ export {
   getCountryByCca2,
   getCountriesByCallingCode,
   getCountriesByName,
+  isValidPhoneNumber,
 };

package/lib/interfaces/modalStyles.ts

@@ -23,4 +23,6 @@ export interface IModalStyles {
   callingCode?: StyleProp<TextStyle>;
   // Country name styles [Text]
   countryName?: StyleProp<TextStyle>;
+  // Popular and rest of countries titles styles [Text]
+  sectionTitle?: StyleProp<TextStyle>;
 }

package/lib/interfaces/phoneInputProps.ts

@@ -28,6 +28,7 @@ interface BasePhoneInput extends TextInputProps {
   popularCountries?: Array<ICountryCca2>;
   popularCountriesSectionTitle?: string;
   restOfCountriesSectionTitle?: string;
+  modalSectionTitleDisabled?: boolean;
   modalSearchInputPlaceholder?: string;
   modalSearchInputPlaceholderTextColor?: string;
   modalSearchInputSelectionColor?: string;

package/lib/interfaces/phoneInputRef.ts

@@ -13,4 +13,5 @@ export interface IPhoneInputRef extends TextInput {
   fullPhoneNumber: string;
   getSelectedCountry: () => ICountry;
   selectedCountry: ICountry;
+  isValid: boolean;
 }

package/lib/styles.js

@@ -50,6 +50,10 @@ const inputBase = {
   fontSize: 16,
 };
 
+const modalSectionTitleBase = {
+  marginVertical: 10,
+};
+
 const styles = StyleSheet.create({
   lightContainer: {
     ...containerBase,
@@ -75,7 +79,7 @@ const styles = StyleSheet.create({
     marginRight: 6,
     fontFamily:
       Platform.OS === 'web'
-        ? navigator?.userAgent?.includes('Win')
+        ? typeof navigator !== 'undefined' && navigator?.userAgent?.includes('Win')
           ? 'TwemojiMozilla'
           : 'System'
         : 'System',
@@ -112,9 +116,13 @@ const styles = StyleSheet.create({
     ...inputBase,
     color: '#F3F3F3',
   },
-  sectionTitle:{
-   marginTop: 10,
-   marginBottom: 10,
+  lightModalSectionTitle: {
+    ...modalSectionTitleBase,
+    color: '#0A0A0A',
+  },
+  darkModalSectionTitle: {
+    ...modalSectionTitleBase,
+    color: '#F3F3F3',
   },
   lightCountryPicker: {
     modal: {
@@ -146,7 +154,7 @@ const styles = StyleSheet.create({
       fontSize: 20,
       fontFamily:
         Platform.OS === 'web'
-          ? navigator?.userAgent?.includes('Win')
+          ? typeof navigator !== 'undefined' && navigator?.userAgent?.includes('Win')
             ? 'TwemojiMozilla'
             : 'System'
           : 'System',
@@ -187,7 +195,7 @@ const styles = StyleSheet.create({
       fontSize: 20,
       fontFamily:
         Platform.OS === 'web'
-          ? navigator?.userAgent?.includes('Win')
+          ? typeof navigator !== 'undefined' && navigator?.userAgent?.includes('Win')
             ? 'TwemojiMozilla'
             : 'System'
           : 'System',

package/lib/utils/getPlaceholders.js

@@ -132,3 +132,93 @@ export function getCountryNotFoundMessage(language) {
       return 'Herhangi bir ülke bulunamadı';
   }
 }
+
+export function getPopularCountriesSectionTitle(language) {
+  switch (language) {
+    case 'en':
+      return 'Suggested countries';
+    case 'ru':
+      return 'Предложенные страны';
+    case 'pl':
+      return 'Sugerowane kraje';
+    case 'ua':
+      return 'Рекомендовані країни';
+    case 'cz':
+      return 'Doporučené země';
+    case 'by':
+      return 'Прапанаваныя краіны';
+    case 'pt':
+      return 'Países sugeridos';
+    case 'es':
+      return 'Países sugeridos';
+    case 'ro':
+      return 'Țări sugerate';
+    case 'bg':
+      return 'Предложени държави';
+    case 'de':
+      return 'Vorgeschlagene Länder';
+    case 'fr':
+      return 'Pays suggérés';
+    case 'nl':
+      return 'Voorgestelde landen';
+    case 'it':
+      return 'Paesi suggeriti';
+    case 'cn':
+      return '推荐国家';
+    case 'ee':
+      return 'Soovitatud riigid';
+    case 'jp':
+      return 'おすすめの国';
+    case 'he':
+      return 'מדינות מוצעות';
+    case 'ar':
+      return 'الدول المقترحة';
+    case 'tr':
+      return 'Önerilen ülkeler';
+  }
+}
+
+export function getRestOfCountriesSectionTitle(language) {
+  switch (language) {
+    case 'en':
+      return 'All';
+    case 'ru':
+      return 'Все';
+    case 'pl':
+      return 'Wszystko';
+    case 'ua':
+      return 'Все';
+    case 'cz':
+      return 'Vše';
+    case 'by':
+      return 'Усё';
+    case 'pt':
+      return 'Tudo';
+    case 'es':
+      return 'Todo';
+    case 'ro':
+      return 'Toate';
+    case 'bg':
+      return 'Всички';
+    case 'de':
+      return 'Alle';
+    case 'fr':
+      return 'Tout';
+    case 'nl':
+      return 'Alle';
+    case 'it':
+      return 'Tutto';
+    case 'cn':
+      return '全部';
+    case 'ee':
+      return 'Kõik';
+    case 'jp':
+      return 'すべて';
+    case 'he':
+      return 'הכל';
+    case 'ar':
+      return 'الكل';
+    case 'tr':
+      return 'Tümü';
+  }
+}

package/lib/utils/getStyles.js

@@ -70,6 +70,15 @@ export function getInputStyle(theme, inputStyle) {
   ];
 }
 
+export function getModalSectionTitleStyle(theme, modalStyle) {
+  return [
+    theme === 'dark'
+      ? styles.darkModalSectionTitle
+      : styles.lightModalSectionTitle,
+    modalStyle?.sectionTitle ? modalStyle.sectionTitle : {},
+  ];
+}
+
 export function getCountryPickerStyle(theme, height, modalStyle) {
   const themeStyle =
     theme === 'dark'

package/lib/utils/isValidPhoneNumber.js

@@ -0,0 +1,9 @@
+import {phone} from 'phone';
+
+export default function isValidPhoneNumber(phoneNumber, country) {
+  const isValid = phone(`${country?.callingCode} ${phoneNumber}`, {
+    country: country?.cca2,
+  }).isValid;
+
+  return isValid;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.8.7",
+  "version": "0.9.1",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,7 +44,8 @@
     "react-native": "*"
   },
   "dependencies": {
-    "react-native-country-codes-picker": "2.3.5"
+    "react-native-country-codes-picker": "2.3.5",
+    "phone": "3.1.58"
   },
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.61.0"