react-native-international-phone-number 0.4.3 → 0.4.4

package/README.md

@@ -29,23 +29,24 @@
 
 <br>
 
-## Table of Contents
+## List of Contents
 
 - [Installation](#installation)
 - [Features](#features)
 - [Basic Usage](#basic-usage)
-  - With Function Component
-  - With Class Component
+  - [With Class Component](#class-component)
+  - [With Function Component](#function-component)
+  - [Custom Default Flag](#custom-default-flag)
 - [Basic Usage - Typescript](#basic-usage---typescript)
 - [Intermediate Usage - Typescrypt + Default Phone Number Value](#intermediate-usage---typescript--default-phone-number-value)
 - [Advanced Usage - React Hook Form + Typescript + Default Phone Number Value](#advanced-usage---react-hook-form--typescript--default-phone-number-value)
 - [Customizing Lib](#customizing-lib)
-  - Theme Mode: Light (default) and Dark
-  - Custom Lib Styles
-  - Disabled Mode
-  - Custom Disabled Mode Style
+  - [Dark Mode](#dark-mode)
+  - [Custom Lib Styles](#custom-lib-styles)
+  - [Disabled Mode](#disabled-mode)
+  - [Custom Disabled Mode Style](#custom-disabled-mode-style)
 - [Lib Props](#props)
-- [Functions](#functions)
+- [Lib Functions](#functions)
 - [Contributing](#contributing)
 - [License](#license)
 
@@ -89,7 +90,59 @@ AND
 
 ## Basic Usage
 
-- Function Component:
+- ### Class Component:
+
+```jsx
+import React from 'react';
+import { View, Text } from 'react-native';
+import { PhoneInput } from 'react-native-international-phone-number';
+
+export class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectedCountry: undefined,
+      inputValue: ''
+    }
+  }
+
+  function handleSelectedCountry(country) {
+    this.setState({
+      selectedCountry: country
+    })
+  }
+
+  function handleInputValue(phoneNumber) {
+    this.setState({
+      inputValue: phoneNumber
+    })
+  }
+
+  render(){
+    return (
+      <View style={{ width: '100%', flex: 1, padding: 24 }}>
+        <PhoneInput
+          value={this.inputValue}
+          onChangePhoneNumber={this.handleInputValue}
+          selectedCountry={this.selectedCountry}
+          onChangeSelectedCountry={this.handleSelectedCountry}
+        />
+        <View style={{ marginTop: 10 }}>
+          <Text>
+            Country:{' '}
+            {`${this.selectedCountry?.name} (${this.selectedCountry?.cca2})`}
+          </Text>
+          <Text>
+            Phone Number: {`${this.selectedCountry?.callingCode} ${this.inputValue}`}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+}
+```
+
+- ### Function Component:
 
 ```jsx
 import React, { useState } from 'react';
@@ -131,55 +184,50 @@ export default function App() {
 }
 ```
 
-- Class Component:
+- ### Custom Default Flag:
 
 ```jsx
-import React from 'react';
+import React, { useState } from 'react';
 import { View, Text } from 'react-native';
-import { PhoneInput } from 'react-native-international-phone-number';
+import {
+  PhoneInput,
+  getCountryByCca2,
+} from 'react-native-international-phone-number';
 
-export class App extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      selectedCountry: undefined,
-      inputValue: ''
-    }
-  }
+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 handleSelectedCountry(country) {
-    this.setState({
-      selectedCountry: country
-    })
+  function handleInputValue(phoneNumber) {
+    setInputValue(phoneNumber);
   }
 
-  function handleInputValue(phoneNumber) {
-    this.setState({
-      inputValue: phoneNumber
-    })
+  function handleSelectedCountry(country) {
+    setSelectedCountry(country);
   }
 
-  render(){
-    return (
-      <View style={{ width: '100%', flex: 1, padding: 24 }}>
-        <PhoneInput
-          value={this.inputValue}
-          onChangePhoneNumber={this.handleInputValue}
-          selectedCountry={this.selectedCountry}
-          onChangeSelectedCountry={this.handleSelectedCountry}
-        />
-        <View style={{ marginTop: 10 }}>
-          <Text>
-            Country:{' '}
-            {`${this.selectedCountry?.name} (${this.selectedCountry?.cca2})`}
-          </Text>
-          <Text>
-            Phone Number: {`${this.selectedCountry?.callingCode} ${this.inputValue}`}
-          </Text>
-        </View>
+  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>
+  );
 }
 ```
 
@@ -378,7 +426,7 @@ export default function App() {
 
 ## Customizing lib
 
-- Dark Mode:
+- ### Dark Mode:
 
 ```jsx
   <PhoneInput
@@ -387,7 +435,7 @@ export default function App() {
   />
 ```
 
-- Custom Lib Styles:
+- ### Custom Lib Styles:
 
 <div>
   <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png">
@@ -415,7 +463,7 @@ export default function App() {
   />
 ```
 
-- Disabled Mode:
+- ### Disabled Mode:
 
 ```jsx
   <PhoneInput
@@ -424,7 +472,7 @@ export default function App() {
   />
 ```
 
-- Custom Disabled Mode Style:
+- ### Custom Disabled Mode Style:
 
 ```jsx
   ...
@@ -458,6 +506,9 @@ export default function App() {
 ## Functions
 
 - `getCountryByPhoneNumber:` (phoneNumber: string) => ICountry | undefined;
+- `getCountryByCca2:` (phoneNumber: string) => ICountry | undefined;
+- `getCountriesByCallingCode:` (phoneNumber: string) => ICountry[] | undefined;
+- `getCountriesByName:` (phoneNumber: string) => ICountry[] | undefined;
 
 </br>
 

package/lib/index.d.ts

@@ -33,4 +33,23 @@ declare function getCountryByPhoneNumber(
   phoneNumber: string
 ): ICountry | undefined;
 
-export { PhoneInput, ICountry, getCountryByPhoneNumber };
+declare function getCountryByCca2(
+  phoneNumber: string
+): ICountry | undefined;
+
+declare function getCountriesByCallingCode(
+  phoneNumber: string
+): ICountry[] | undefined;
+
+declare function getCountriesByName(
+  phoneNumber: string
+): ICountry[] | undefined;
+
+export {
+  PhoneInput,
+  ICountry,
+  getCountryByPhoneNumber,
+  getCountryByCca2,
+  getCountriesByCallingCode,
+  getCountriesByName,
+};

package/lib/index.js

@@ -10,6 +10,9 @@ import CountryPicker, {
   DEFAULT_THEME,
 } from 'react-native-country-picker-modal';
 
+import getCountriesByName from './utils/getCountriesByName';
+import getCountriesByCallingCode from './utils/getCountriesByCallingCode';
+import getCountryByCca2 from './utils/getCountryByCca2';
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
 import phoneMask from './utils/inputMask';
 
@@ -248,4 +251,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export { PhoneInput, getCountryByPhoneNumber };
+export {
+  PhoneInput,
+  getCountryByPhoneNumber,
+  getCountryByCca2,
+  getCountriesByCallingCode,
+  getCountriesByName,
+};

package/lib/utils/getCountriesByCallingCode.js

@@ -0,0 +1,24 @@
+import {countries} from './countries';
+
+export default function getCountriesByCallingCode(callingCode) {
+  const formatedCallingCode = String(callingCode).includes('+')
+    ? callingCode
+    : `+${callingCode}`;
+
+  const matchingCountries = countries.filter(country => {
+    return country.callingCode === formatedCallingCode;
+  });
+
+  const formatedCountries = [];
+
+  matchingCountries.forEach(country => {
+    formatedCountries.push({
+      name: country.name,
+      cca2: country.cca2,
+      flag: country.flag,
+      callingCode: country.callingCode,
+    });
+  });
+
+  return formatedCountries;
+}

package/lib/utils/getCountriesByName.js

@@ -0,0 +1,20 @@
+import {countries} from './countries';
+
+export default function getCountriesByName(name) {
+  const matchingCountries = countries.filter(country => {
+    return country.name.includes(name);
+  });
+
+  const formatedCountries = [];
+
+  matchingCountries.forEach(country => {
+    formatedCountries.push({
+      name: country.name,
+      cca2: country.cca2,
+      flag: country.flag,
+      callingCode: country.callingCode,
+    });
+  });
+
+  return formatedCountries;
+}

package/lib/utils/getCountryByCca2.js

@@ -0,0 +1,20 @@
+import {countries} from './countries';
+
+export default function getCountryByCca2(cca2) {
+  let matchingCountry = countries.filter(country => {
+    return country.cca2.toLowerCase() === cca2.toLowerCase();
+  })[0];
+
+  if (matchingCountry) {
+    matchingCountry = {
+      name: matchingCountry.name,
+      cca2: matchingCountry.cca2,
+      flag: matchingCountry.flag,
+      callingCode: matchingCountry.callingCode,
+    };
+
+    return matchingCountry;
+  } else {
+    return {};
+  }
+}

package/package.json

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