react-native-international-phone-number 0.2.5 → 0.2.7

package/README.md

@@ -13,10 +13,13 @@
   <a href="https://www.npmjs.com/package/react-native-international-phone-number">
     <img src="https://img.shields.io/npm/dm/react-native-international-phone-number.svg?style=flat-square">
   </a>
-  <a href="https://www.npmjs.com/package/react-native-international-phone-number">
+  <a href="https://github.com/AstrOOnauta/react-native-international-phone-number">
+    <img src="https://img.shields.io/github/stars/AstrOOnauta/react-native-international-phone-number"/>
+  </a>
+  <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/issues">
     <img src="https://img.shields.io/github/issues/AstrOOnauta/react-native-international-phone-number"/>
   </a>
-  <a href="https://www.npmjs.com/package/react-native-international-phone-number">
+  <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/pulls">
     <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number"/>
   </a>
 </p>
@@ -46,9 +49,15 @@ AND
 > };
 > ```
 
+## Features
+
+- 📱 Works with iOS, Android (Cross-platform) and Expo;
+- 🎨 Lib with UI customizable
+- 🌎 Phone Input Mask according to the selected country.
+
 ## Basic Usage
 
-```tsx
+```jsx
 import React, { useState } from 'react';
 import { View, Text } from 'react-native';
 import {
@@ -86,7 +95,7 @@ export default function App() {
 }
 ```
 
-## Advanced Usage Using React-Hook-Form ans Typescript
+## Basic Usage - Typescript
 
 ```tsx
 import React, { useState } from 'react';
@@ -96,6 +105,49 @@ import {
   PhoneInput,
 } from 'react-native-international-phone-number';
 import { Country } from 'react-native-country-picker-modal';
+
+export default function App() {
+  const [selectedCountry, setSelectedCountry] = useState<
+    undefined | Country
+  >(undefined);
+  const [phoneInput, setPhoneInput] = useState<string>('');
+
+  return (
+    <View style={{ width: '100%', flex: 1, padding: 24 }}>
+      <PhoneInput
+        selectedCountry={selectedCountry}
+        setSelectedCountry={setSelectedCountry}
+        value={phoneInput}
+        onChangeText={(newValue) =>
+          setPhoneInput(
+            phoneMask(newValue, selectedCountry?.callingCode[0])
+          )
+        }
+      />
+      <View style={{ marginTop: 10 }}>
+        <Text>
+          Country:{' '}
+          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
+        </Text>
+        <Text>
+          Phone: {`${selectedCountry?.callingCode[0]} ${phoneInput}`}
+        </Text>
+      </View>
+    </View>
+  );
+}
+```
+
+## Advanced Usage - React-Hook-Form and Typescript
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { View, Text, Alert } from 'react-native';
+import {
+  phoneMask,
+  PhoneInput,
+} from 'react-native-international-phone-number';
+import { Country } from 'react-native-country-picker-modal';
 import { Controller, FieldValues, useForm } from 'react-hook-form';
 
 interface FormProps extends FieldValues {
@@ -103,9 +155,7 @@ interface FormProps extends FieldValues {
 }
 
 export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState<
-    undefined | Country
-  >(undefined);
+  const [selectedCountry, setSelectedCountry] = useState<undefined | Country>(undefined);
 
   const { control, handleSubmit, resetField } = useForm();
 
@@ -117,6 +167,10 @@ export default function App() {
     resetField('phoneNumber');
   }
 
+  useEffect(()=>{
+    resetField('phoneNumber')
+  },[selectedCountry])
+
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <Controller
@@ -129,7 +183,7 @@ export default function App() {
             value={value}
             onChangeText={(newValue) =>
               onChange(
-                phoneMask(newValue, selectedCountry.callingCode[0])
+                phoneMask(newValue, selectedCountry?.callingCode[0])
               )
             }
           />
@@ -163,7 +217,7 @@ export default function App() {
 
 ## Methods
 
-- `phoneMask`: (value: string, countryCode: string) => string
+- `phoneMask`: (phoneNumber: string, callingCode: string) => string
 
 ## Contributing
 

package/lib/index.d.ts

@@ -9,10 +9,15 @@ interface PhoneInputProps extends TextInputProps {
   inputStyle?: StyleProp<ViewStyle>;
   withDarkTheme?: boolean;
   disabled?: boolean;
-  selectedCountry: Country;
+  selectedCountry: undefined | Country;
   setSelectedCountry: Dispatch<SetStateAction<undefined | Country>>;
 }
 
 declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 
-export { PhoneInput };
+declare function phoneMask(
+  value: string,
+  countryCode?: string
+): string;
+
+export { PhoneInput, phoneMask };

package/lib/utils/inputMask.js

@@ -1,18 +1,18 @@
 import { countriesPhoneCodeList } from './countriesPhoneCode';
 
-export const phoneMask = (value, countryCode) => {
+export const phoneMask = (phoneNumber, callingCode) => {
   let matrix = '## ##### ####';
 
   countriesPhoneCodeList.forEach((item) => {
     const newCode = item.code.replace(/[\s#]/g, '');
 
-    if (countryCode && countryCode.includes(newCode)) {
+    if (callingCode && callingCode.includes(newCode)) {
       matrix = item.matrix;
     }
   });
 
   let i = 0;
-  const newValue = value.replace(/\D/g, '');
+  const newValue = phoneNumber.replace(/\D/g, '');
 
   return matrix.replace(/(?!\+)./g, function (a) {
     return /[#\d]/.test(a) && i < newValue.length

package/package.json

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

package/lib/utils/inputMask.d.ts

@@ -1,6 +0,0 @@
-declare function phoneMask(
-  value: string,
-  countryCode: string
-): string;
-
-export { phoneMask };