react-native-international-phone-number 0.2.6 → 0.2.8

package/README.md

@@ -49,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 {
@@ -89,10 +95,53 @@ export default function App() {
 }
 ```
 
-## Advanced Usage - React-Hook-Form and Typescript
+## Basic Usage - Typescript
 
 ```tsx
 import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import {
+  phoneMask,
+  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,
@@ -106,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();
 
@@ -120,6 +167,10 @@ export default function App() {
     resetField('phoneNumber');
   }
 
+  useEffect(()=>{
+    resetField('phoneNumber')
+  },[selectedCountry])
+
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <Controller
@@ -132,7 +183,7 @@ export default function App() {
             value={value}
             onChangeText={(newValue) =>
               onChange(
-                phoneMask(newValue, selectedCountry.callingCode[0])
+                phoneMask(newValue, selectedCountry?.callingCode[0])
               )
             }
           />
@@ -153,6 +204,35 @@ export default function App() {
 }
 ```
 
+## Customizing lib
+
+### Dark mode:
+
+```jsx
+  <PhoneInput
+    ...
+    withDarkTheme
+  />
+```
+
+### containerStyle + inputStyle:
+
+```jsx
+  <PhoneInput
+    ...
+    inputStyle={{
+      color: '#F3F3F3',
+    }}
+    containerStyle={{
+      backgroundColor: '#575757',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: '#F3F3F3',
+      marginVertical: 16,
+    }}
+  />
+```
+
 ## Props
 
 - `value?`: string
@@ -166,7 +246,7 @@ export default function App() {
 
 ## Methods
 
-- `phoneMask`: (value: string, countryCode: string) => string
+- `phoneMask`: (phoneNumber: string, callingCode: string) => string
 
 ## Contributing
 

package/lib/index.d.ts

@@ -1,18 +1,28 @@
 import { Dispatch, SetStateAction } from 'react';
-import { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+import {
+  StyleProp,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import { Country } from 'react-native-country-picker-modal';
 
 interface PhoneInputProps extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
   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/index.js

@@ -46,7 +46,9 @@ function PhoneInput({
   }, []);
 
   return (
-    <View style={containerStyle ? containerStyle : styles.container}>
+    <View
+      style={[styles.container, containerStyle ? containerStyle : {}]}
+    >
       <CountryPicker
         containerButtonStyle={{
           paddingLeft: 20,
@@ -58,7 +60,7 @@ function PhoneInput({
         countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
       />
       <TextInput
-        style={inputStyle ? inputStyle : styles.input}
+        style={[styles.input, inputStyle ? inputStyle : {}]}
         placeholder={
           placeholder ? placeholder : 'Insert your phone number'
         }

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.6",
+  "version": "0.2.8",
   "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 };