react-native-international-phone-number 0.4.14 → 0.5.0

package/README.md

@@ -1,5 +1,7 @@
+<br>
+
 <div align = "center">
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/gif/preview.gif">
+  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/preview.png" alt="React Native International Phone Number Input Lib preview">
 </div>
 
 <br>
@@ -41,14 +43,13 @@
 
 ## List of Contents
 
+- [Old Versions](#old-versions)
 - [Installation](#installation)
 - [Features](#features)
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
   - [With Function Component](#function-component)
-  - [Custom Default Flag](#custom-default-flag)
-  - [Default Phone Number Value](#default-phone-number-value)
-  - [Typescript](#typescript)
+  - [With Typescript](#typescript)
 - [Intermediate Usage](#intermediate-usage)
   - [Typescript + useRef](#typescript--useref)
 - [Advanced Usage](#advanced-usage)
@@ -56,16 +57,28 @@
 - [Customizing Lib](#customizing-lib)
   - [Dark Mode](#dark-mode)
   - [Custom Lib Styles](#custom-lib-styles)
-  - [Phone Input Disabled Mode](#phone-input-disabled-mode)
+  - [Custom Modal Height](#custom-modal-height)
   - [Country Modal Disabled Mode](#country-modal-disabled-mode)
+  - [Phone Input Disabled Mode](#phone-input-disabled-mode)
   - [Custom Disabled Mode Style](#custom-disabled-mode-style)
+  - [Change Default Language](#change-default-language)
+  - [Custom Phone Mask](#custom-phone-mask)
+  - [Custom Default Flag/Country](#custom-default-flagcountry)
+  - [Default Phone Number Value](#default-phone-number-value)
 - [Lib Props](#component-props-phoneinputprops)
 - [Lib Functions](#functions)
+- [Supported languages](#🎌-supported-languages-🎌)
 - [Contributing](#contributing)
 - [License](#license)
 
 <br>
 
+## Old Versions
+
+- [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
+
+<br>
+
 ## Installation
 
 ```bash
@@ -97,8 +110,9 @@ AND
 
 - 📱 Works with iOS, Android (Cross-platform) and Expo;
 - 🎨 Lib with UI customizable;
-- 🌎 Phone Input Mask according to the selected country;
-- 👨‍💻 Functional and class component support.
+- 🌎 Phone Input Mask according with the selected country;
+- 👨‍💻 Functional and class component support;
+- 🈶 18 languages supported.
 
 <br>
 
@@ -109,13 +123,13 @@ AND
 ```jsx
 import React from 'react';
 import { View, Text } from 'react-native';
-import { PhoneInput } from 'react-native-international-phone-number';
+import PhoneInput from 'react-native-international-phone-number';
 
 export class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      selectedCountry: undefined,
+      selectedCountry: null,
       inputValue: ''
     }
   }
@@ -144,7 +158,7 @@ export class App extends React.Component {
         <View style={{ marginTop: 10 }}>
           <Text>
             Country:{' '}
-            {`${this.state.selectedCountry?.name} (${this.state.selectedCountry?.cca2})`}
+            {`${this.state.selectedCountry?.name?.en} (${this.state.selectedCountry?.cca2})`}
           </Text>
           <Text>
             Phone Number: {`${this.state.selectedCountry?.callingCode} ${this.state.inputValue}`}
@@ -161,99 +175,10 @@ 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';
-
-export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState(undefined);
-  const [inputValue, setInputValue] = useState('');
-
-  function handleInputValue(phoneNumber) {
-    setInputValue(phoneNumber);
-  }
-
-  function handleSelectedCountry(country) {
-    setSelectedCountry(country);
-  }
-
-  return (
-    <View style={{ width: '100%', flex: 1, padding: 24 }}>
-      <PhoneInput
-        value={inputValue}
-        onChangePhoneNumber={handleInputValue}
-        selectedCountry={selectedCountry}
-        onChangeSelectedCountry={handleSelectedCountry}
-      />
-      <View style={{ marginTop: 10 }}>
-        <Text>
-          Country:{' '}
-          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
-        </Text>
-        <Text>
-          Phone Number:{' '}
-          {`${selectedCountry?.callingCode} ${inputValue}`}
-        </Text>
-      </View>
-    </View>
-  );
-}
-```
-
-- ### Custom Default Flag:
-
-```jsx
-import React, { useState } from 'react';
-import { View, Text } from 'react-native';
-import {
-  PhoneInput,
-  getCountryByCca2,
-} from 'react-native-international-phone-number';
-
-export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState(
-    getCountryByCca2('CA') // <--- In this exemple, returns the CANADA Country and PhoneInput CANADA Flag
-  );
-  const [inputValue, setInputValue] = useState('');
-
-  function handleInputValue(phoneNumber) {
-    setInputValue(phoneNumber);
-  }
-
-  function handleSelectedCountry(country) {
-    setSelectedCountry(country);
-  }
-
-  return (
-    <View style={{ width: '100%', flex: 1, padding: 24 }}>
-      <PhoneInput
-        value={inputValue}
-        onChangePhoneNumber={handleInputValue}
-        selectedCountry={selectedCountry}
-        onChangeSelectedCountry={handleSelectedCountry}
-      />
-      <View style={{ marginTop: 10 }}>
-        <Text>
-          Country:{' '}
-          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
-        </Text>
-        <Text>
-          Phone Number:{' '}
-          {`${selectedCountry?.callingCode} ${inputValue}`}
-        </Text>
-      </View>
-    </View>
-  );
-}
-```
-
-- ### Default Phone Number Value
-
-```tsx
-import React, { useState } from 'react';
-import { View, Text } from 'react-native';
-import { PhoneInput } from 'react-native-international-phone-number';
+import PhoneInput from 'react-native-international-phone-number';
 
 export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState(undefined);
+  const [selectedCountry, setSelectedCountry] = useState(null);
   const [inputValue, setInputValue] = useState('');
 
   function handleInputValue(phoneNumber) {
@@ -267,7 +192,6 @@ export default function App() {
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <PhoneInput
-        defaultValue="+12505550199"
         value={inputValue}
         onChangePhoneNumber={handleInputValue}
         selectedCountry={selectedCountry}
@@ -276,7 +200,7 @@ export default function App() {
       <View style={{ marginTop: 10 }}>
         <Text>
           Country:{' '}
-          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
+          {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`}
         </Text>
         <Text>
           Phone Number:{' '}
@@ -288,25 +212,18 @@ export default function App() {
 }
 ```
 
-> Observations:
->
-> 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
-> 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above).
-
 - ### Typescript
 
 ```tsx
 import React, { useState } from 'react';
 import { View, Text } from 'react-native';
-import {
-  PhoneInput,
+import PhoneInput, {
   ICountry,
 } from 'react-native-international-phone-number';
 
 export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState<
-    undefined | ICountry
-  >(undefined);
+  const [selectedCountry, setSelectedCountry] =
+    useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>('');
 
   function handleInputValue(phoneNumber: string) {
@@ -328,7 +245,7 @@ export default function App() {
       <View style={{ marginTop: 10 }}>
         <Text>
           Country:{' '}
-          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
+          {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`}
         </Text>
         <Text>
           Phone Number:{' '}
@@ -347,10 +264,9 @@ export default function App() {
 - ### Typescript + useRef
 
 ```tsx
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { View, Text } from 'react-native';
-import {
-  PhoneInput,
+import PhoneInput, {
   ICountry,
   IPhoneInputRef,
 } from 'react-native-international-phone-number';
@@ -396,6 +312,8 @@ 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
@@ -403,8 +321,7 @@ export default function App() {
 ```tsx
 import React, { useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, Alert } from 'react-native';
-import {
-  PhoneInput,
+import PhoneInput, {
   ICountry,
 } from 'react-native-international-phone-number';
 import { Controller, FieldValues } from 'react-hook-form';
@@ -481,19 +398,22 @@ export default function App() {
 - ### Dark Mode:
 
 ```jsx
+  ...
   <PhoneInput
     ...
-    withDarkTheme
+    theme="dark"
   />
+  ...
 ```
 
 - ### Custom Lib Styles:
 
 <div>
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png">
+  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png" alt="Lib with custom styles">
 </div>
 
 ```jsx
+  ...
   <PhoneInput
     ...
     inputStyle={{
@@ -504,7 +424,6 @@ export default function App() {
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: '#F3F3F3',
-      marginVertical: 16,
     }}
     flagContainerStyle={{
       borderTopLeftRadius: 7,
@@ -512,31 +431,51 @@ export default function App() {
       backgroundColor: '#808080',
       justifyContent: 'center',
     }}
+    flagTextStyle={{
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#F3F3F3',
+    }}
   />
+  ...
 ```
 
-- ### Phone Input Disabled Mode:
+- ### Custom Modal Height:
 
 ```jsx
+  ...
   <PhoneInput
     ...
-    disabled
+    modalHeight="80%"
   />
+  ...
 ```
 
 - ### Country Modal Disabled Mode:
 
 ```jsx
+  ...
   <PhoneInput
     ...
     modalDisabled
   />
+  ...
 ```
 
-- ### Custom Disabled Mode Style:
+- ### Phone Input Disabled Mode:
 
 ```jsx
   ...
+  <PhoneInput
+    ...
+    disabled
+  />
+  ...
+```
+
+- ### Custom Disabled Mode Style:
+
+```jsx
   const [isDisabled, setIsDisabled] = useState<boolean>(true)
   ...
   <PhoneInput
@@ -547,21 +486,74 @@ export default function App() {
   ...
 ```
 
+- ### Change Default Language:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    language="pt"
+  />
+  ...
+```
+
+- ### Custom Phone Mask:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    customMask={['#### ####', '##### ####']}
+  />
+  ...
+```
+
+- ### Custom Default Flag/Country:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    defaultCountry="CA"
+  />
+  ...
+```
+
+- ### Default Phone Number Value:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    defaultValue="+12505550199"
+  />
+  ...
+```
+
+> Observations:
+>
+> 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
+> 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above).
+
 </br>
 
 ## Component Props ([PhoneInputProps](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
 
+- `language?:` [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts);
+- `customMask?:` string[];
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;
-- `selectedCountry?:` undefined | [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts);
+- `selectedCountry?:` [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts);
 - `onChangeSelectedCountry?:` (country: [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)) => void;
 - `disabled?:` boolean;
 - `modalDisabled?:` boolean;
-- `withDarkTheme?:` boolean;
-- `containerStyle?:` StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
-- `flagContainerStyle?:` StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
-- `inputStyle?:` StyleProp<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
+- `modalHeight?:` number | string;
+- `theme?:` [ITheme](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/theme.ts);
+- `containerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
+- `flagContainerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
+- `flagTextStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
+- `inputStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
 - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputRef.ts)>
 
 <br>
@@ -569,13 +561,40 @@ export default function App() {
 ## Functions
 
 - `getAllCountries:` () => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[];
+- `getCountriesByCallingCode:` (callingCode: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
+- `getCountryByCca2:` (cca2: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
+- `getCountriesByName:` (name: string, language: [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts)) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
 - `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
-- `getCountryByCca2:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
-- `getCountriesByCallingCode:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
-- `getCountriesByName:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
 
 </br>
 
+## 🎌 Supported languages 🎌
+
+```js
+  "name": {
+    "en": "English",
+    "ru": "Russian",
+    "pl": "Polish",
+    "ua": "Ukrainian",
+    "cz": "Czech",
+    "by": "Belarusian",
+    "pt": "Portuguese",
+    "es": "Espanol",
+    "ro": "Romanian",
+    "bg": "Bulgarian",
+    "de": "German",
+    "fr": "French",
+    "nl": "Dutch",
+    "it": "Italian",
+    "cn": "Chinese",
+    "ee": "Estonian",
+    "jp": "Japanese",
+    "he": "Hebrew"
+  },
+```
+
+<br>
+
 ## Contributing
 
 - Fork or clone this repository