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

package/.babelrc

@@ -1,3 +1,3 @@
-{
-  "presets": ["module:metro-react-native-babel-preset"]
-}
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

package/README.md

@@ -1,186 +1,186 @@
-<div align = "center">
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/gif/preview.gif">
-</div>
-
-<br>
-
-<h1 align="center">React Native International Phone Number Input</h1>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/react-native-international-phone-number">
-    <img src="https://img.shields.io/npm/v/react-native-international-phone-number.svg?style=flat-square">
-  </a>
-  <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">
-    <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">
-    <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number"/>
-  </a>
-</p>
-
-## Installation
-
-```bash
-$ npm i --save react-native-international-phone-number
-```
-
-OR
-
-```bash
-$ yarn add react-native-international-phone-number
-```
-
-AND
-
-> Update your `metro.config.js` file:
->
-> ```bash
-> module.exports = {
->  ...
->  resolver: {
->    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
->  },
-> };
-> ```
-
-## Basic Usage
-
-```tsx
-import React, { useState } from 'react';
-import { View, Text } from 'react-native';
-import {
-  phoneMask,
-  PhoneInput,
-} from 'react-native-international-phone-number';
-
-export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState(undefined);
-  const [phoneInput, setPhoneInput] = useState('');
-
-  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 Using React-Hook-Form ans 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';
-import { Controller, FieldValues, useForm } from 'react-hook-form';
-
-interface FormProps extends FieldValues {
-  phoneNumber: string;
-}
-
-export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState<
-    undefined | Country
-  >(undefined);
-
-  const { control, handleSubmit, resetField } = useForm();
-
-  function onSubmit(form: FormProps) {
-    Alert.alert(
-      'Advanced Result',
-      `${selectedCountry?.callingCode[0]} ${form.phoneNumber}`
-    );
-    resetField('phoneNumber');
-  }
-
-  return (
-    <View style={{ width: '100%', flex: 1, padding: 24 }}>
-      <Controller
-        name="phoneNumber"
-        control={control}
-        render={({ field: { onChange, value } }) => (
-          <PhoneInput
-            selectedCountry={selectedCountry}
-            setSelectedCountry={setSelectedCountry}
-            value={value}
-            onChangeText={(newValue) =>
-              onChange(
-                phoneMask(newValue, selectedCountry.callingCode[0])
-              )
-            }
-          />
-        )}
-      />
-      <Button
-        style={{
-          width: '100%',
-          marginTop: 10,
-          backgroundColor: '#90d7ff',
-        }}
-        onPress={handleSubmit(onSubmit)}
-      />
-        <Text>Submit</Text>
-      </Button>
-    </View>
-  );
-}
-```
-
-## Props
-
-- `value?`: string
-- `onChangeText?`: (text: string) => void
-- `containerStyle?`: StyleProp<ViewStyle>
-- `inputStyle?`: StyleProp<ViewStyle>
-- `withDarkTheme?`: boolean
-- `disabled?`: boolean
-- `placeholder?`: string
-- `placeholderTextColor?`: string
-
-## Methods
-
-- `phoneMask`: (value: string, countryCode: string) => string
-
-## Contributing
-
-- Fork or clone this repository
-
-```bash
-  $ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git
-```
-
-- Repair, Update and Enjoy 🛠️🚧⚙️
-
-- Create a new PR to this repository
-
-<br>
-
-<div align = "center">
-	<br>
-	  Thanks for stopping by! 😁
-	<br>
-</div>
+<div align = "center">
+  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/gif/preview.gif">
+</div>
+
+<br>
+
+<h1 align="center">React Native International Phone Number Input</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-international-phone-number">
+    <img src="https://img.shields.io/npm/v/react-native-international-phone-number.svg?style=flat-square">
+  </a>
+  <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">
+    <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">
+    <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number"/>
+  </a>
+</p>
+
+## Installation
+
+```bash
+$ npm i --save react-native-international-phone-number
+```
+
+OR
+
+```bash
+$ yarn add react-native-international-phone-number
+```
+
+AND
+
+> Update your `metro.config.js` file:
+>
+> ```bash
+> module.exports = {
+>  ...
+>  resolver: {
+>    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
+>  },
+> };
+> ```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import {
+  phoneMask,
+  PhoneInput,
+} from 'react-native-international-phone-number';
+
+export default function App() {
+  const [selectedCountry, setSelectedCountry] = useState(undefined);
+  const [phoneInput, setPhoneInput] = useState('');
+
+  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 Using React-Hook-Form ans 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';
+import { Controller, FieldValues, useForm } from 'react-hook-form';
+
+interface FormProps extends FieldValues {
+  phoneNumber: string;
+}
+
+export default function App() {
+  const [selectedCountry, setSelectedCountry] = useState<
+    undefined | Country
+  >(undefined);
+
+  const { control, handleSubmit, resetField } = useForm();
+
+  function onSubmit(form: FormProps) {
+    Alert.alert(
+      'Advanced Result',
+      `${selectedCountry?.callingCode[0]} ${form.phoneNumber}`
+    );
+    resetField('phoneNumber');
+  }
+
+  return (
+    <View style={{ width: '100%', flex: 1, padding: 24 }}>
+      <Controller
+        name="phoneNumber"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <PhoneInput
+            selectedCountry={selectedCountry}
+            setSelectedCountry={setSelectedCountry}
+            value={value}
+            onChangeText={(newValue) =>
+              onChange(
+                phoneMask(newValue, selectedCountry.callingCode[0])
+              )
+            }
+          />
+        )}
+      />
+      <Button
+        style={{
+          width: '100%',
+          marginTop: 10,
+          backgroundColor: '#90d7ff',
+        }}
+        onPress={handleSubmit(onSubmit)}
+      />
+        <Text>Submit</Text>
+      </Button>
+    </View>
+  );
+}
+```
+
+## Props
+
+- `value?`: string
+- `onChangeText?`: (text: string) => void
+- `containerStyle?`: StyleProp<ViewStyle>
+- `inputStyle?`: StyleProp<ViewStyle>
+- `withDarkTheme?`: boolean
+- `disabled?`: boolean
+- `placeholder?`: string
+- `placeholderTextColor?`: string
+
+## Methods
+
+- `phoneMask`: (value: string, countryCode: string) => string
+
+## Contributing
+
+- Fork or clone this repository
+
+```bash
+  $ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git
+```
+
+- Repair, Update and Enjoy 🛠️🚧⚙️
+
+- Create a new PR to this repository
+
+<br>
+
+<div align = "center">
+	<br>
+	  Thanks for stopping by! 😁
+	<br>
+</div>

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+import { Dispatch, SetStateAction } from 'react';
+import { StyleProp, TextInputProps, 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>;
+  withDarkTheme?: boolean;
+  disabled?: boolean;
+  selectedCountry: Country;
+  setSelectedCountry: Dispatch<SetStateAction<undefined | Country>>;
+}
+
+declare function PhoneInput(props: PhoneInputProps): JSX.Element;
+
+export { PhoneInput };

package/lib/index.js

@@ -1,97 +1,95 @@
-import React, { useEffect } from 'react';
-import {
-  StyleSheet,
-  Dimensions,
-  Platform,
-  View,
-  TextInput,
-} from 'react-native';
-import CountryPicker, {
-  DARK_THEME,
-  DEFAULT_THEME,
-} from 'react-native-country-picker-modal';
-
-import { phoneMask } from './utils/inputMask';
-
-function PhoneInput({
-  value,
-  onChangeText,
-  placeholder,
-  placeholderTextColor,
-  containerStyle,
-  inputStyle,
-  withDarkTheme,
-  disabled,
-  selectedCountry,
-  setSelectedCountry,
-}) {
-  const onSelect = (country) => {
-    if (setSelectedCountry) {
-      setSelectedCountry({
-        ...country,
-        callingCode: [`+${country.callingCode[0]}`],
-      });
-    }
-  };
-
-  useEffect(() => {
-    setSelectedCountry({
-      callingCode: ['+55'],
-      cca2: 'BR',
-      currency: ['BRL'],
-      flag: 'flag-br',
-      name: 'Brazil',
-      region: 'Americas',
-      subregion: 'South America',
-    });
-  }, []);
-
-  return (
-    <View style={containerStyle ? containerStyle : styles.container}>
-      <CountryPicker
-        containerButtonStyle={{
-          paddingLeft: 20,
-        }}
-        onSelect={onSelect}
-        withFilter
-        withCallingCodeButton
-        theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-        countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
-      />
-      <TextInput
-        style={inputStyle ? inputStyle : styles.input}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={
-          placeholder ? placeholder : 'Insert your phone number'
-        }
-        placeholderTextColor={
-          placeholderTextColor ? placeholderTextColor : '#DDDDDD'
-        }
-        editable={!disabled}
-        keyboardType="numeric"
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: '#DDDDDD',
-    borderRadius: 8,
-  },
-  input: {
-    width: Dimensions.get('window').width - 100,
-    paddingVertical: Platform.OS === 'ios' ? 16 : 8,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    color: '#000000',
-  },
-});
-
-export { PhoneInput, phoneMask };
+import React, { useEffect } from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  Platform,
+  View,
+  TextInput,
+} from 'react-native';
+import CountryPicker, {
+  DARK_THEME,
+  DEFAULT_THEME,
+} from 'react-native-country-picker-modal';
+
+import { phoneMask } from './utils/inputMask';
+
+function PhoneInput({
+  placeholder,
+  placeholderTextColor,
+  containerStyle,
+  inputStyle,
+  withDarkTheme,
+  disabled,
+  selectedCountry,
+  setSelectedCountry,
+  ...rest
+}) {
+  const onSelect = (country) => {
+    if (setSelectedCountry) {
+      setSelectedCountry({
+        ...country,
+        callingCode: [`+${country.callingCode[0]}`],
+      });
+    }
+  };
+
+  useEffect(() => {
+    setSelectedCountry({
+      callingCode: ['+55'],
+      cca2: 'BR',
+      currency: ['BRL'],
+      flag: 'flag-br',
+      name: 'Brazil',
+      region: 'Americas',
+      subregion: 'South America',
+    });
+  }, []);
+
+  return (
+    <View style={containerStyle ? containerStyle : styles.container}>
+      <CountryPicker
+        containerButtonStyle={{
+          paddingLeft: 20,
+        }}
+        onSelect={onSelect}
+        withFilter
+        withCallingCodeButton
+        theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+        countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
+      />
+      <TextInput
+        style={inputStyle ? inputStyle : styles.input}
+        placeholder={
+          placeholder ? placeholder : 'Insert your phone number'
+        }
+        placeholderTextColor={
+          placeholderTextColor ? placeholderTextColor : '#DDDDDD'
+        }
+        editable={!disabled}
+        keyboardType="numeric"
+        {...rest}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#DDDDDD',
+    borderRadius: 8,
+  },
+  input: {
+    width: Dimensions.get('window').width - 100,
+    paddingVertical: Platform.OS === 'ios' ? 16 : 8,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    color: '#000000',
+  },
+});
+
+export { PhoneInput, phoneMask };

package/lib/utils/countriesPhoneCode.js

@@ -1,260 +1,260 @@
-export const countriesPhoneCodeList = [
-  {code: '+247', matrix: '####'},
-  {code: '+290', matrix: '####'},
-  {code: '+683', matrix: '####'},
-  {code: '+690', matrix: '####'},
-  {code: '+500', matrix: '#####'},
-  {code: '+676', matrix: '#####'},
-  {code: '+677', matrix: '#####'},
-  {code: '+678', matrix: '#####'},
-  {code: '+688', matrix: '#####'},
-  {code: '+49', matrix: '### ###'},
-  {code: '+682', matrix: '## ###'},
-  {code: '+686', matrix: '## ###'},
-  {code: '+688', matrix: '######'},
-  {code: '+95', matrix: '### ###'},
-  {code: '+298', matrix: '### ###'},
-  {code: '+376', matrix: '### ###'},
-  {code: '+387', matrix: '## ####'},
-  {code: '+508', matrix: '## ####'},
-  {code: '+597', matrix: '### ###'},
-  {code: '+672', matrix: '### ###'},
-  {code: '+681', matrix: '## ####'},
-  {code: '+685', matrix: '## ####'},
-  {code: '+687', matrix: '## ####'},
-  {code: '+850', matrix: '### ###'},
-  {code: '+230', matrix: '### ####'},
-  {code: '+239', matrix: '## #####'},
-  {code: '+245', matrix: '# ######'},
-  {code: '+246', matrix: '### ####'},
-  {code: '+263', matrix: '# ######'},
-  {code: '+269', matrix: '## #####'},
-  {code: '+297', matrix: '### ####'},
-  {code: '+299', matrix: '## ## ##'},
-  {code: '+354', matrix: '### ####'},
-  {code: '+372', matrix: '### ####'},
-  {code: '+387', matrix: '## #####'},
-  {code: '+49', matrix: '### ## ##'},
-  {code: '+501', matrix: '### ####'},
-  {code: '+507', matrix: '### ####'},
-  {code: '+592', matrix: '### ####'},
-  {code: '+597', matrix: '### ####'},
-  {code: '+599', matrix: '### ####'},
-  {code: '+60', matrix: '# ### ###'},
-  {code: '+62', matrix: '## ### ##'},
-  {code: '+65', matrix: '#### ####'},
-  {code: '+670', matrix: '### ####'},
-  {code: '+673', matrix: '### ####'},
-  {code: '+674', matrix: '### ####'},
-  {code: '+677', matrix: '### ####'},
-  {code: '+678', matrix: '## #####'},
-  {code: '+679', matrix: '## #####'},
-  {code: '+680', matrix: '### ####'},
-  {code: '+689', matrix: '## ## ##'},
-  {code: '+691', matrix: '### ####'},
-  {code: '+692', matrix: '### ####'},
-  {code: '+95', matrix: '# ### ###'},
-  {code: '+960', matrix: '### ####'},
-  {code: '+220', matrix: '### ## ##'},
-  {code: '+232', matrix: '## ######'},
-  {code: '+234', matrix: '## ### ##'},
-  {code: '+237', matrix: '#### ####'},
-  {code: '+238', matrix: '### ## ##'},
-  {code: '+248', matrix: '# ### ###'},
-  {code: '+252', matrix: '# ### ###'},
-  {code: '+265', matrix: '# ### ###'},
-  {code: '+291', matrix: '# ### ###'},
-  {code: '+350', matrix: '### #####'},
-  {code: '+356', matrix: '#### ####'},
-  {code: '+372', matrix: '#### ####'},
-  {code: '+373', matrix: '#### ####'},
-  {code: '+47', matrix: '### ## ###'},
-  {code: '+49', matrix: '### ## ###'},
-  {code: '+504', matrix: '#### ####'},
-  {code: '+505', matrix: '#### ####'},
-  {code: '+506', matrix: '#### ####'},
-  {code: '+52', matrix: '## ## ####'},
-  {code: '+53', matrix: '# ### ####'},
-  {code: '+599', matrix: '#### ####'},
-  {code: '+60', matrix: '## ### ###'},
-  {code: '+62', matrix: '## ### ###'},
-  {code: '+64', matrix: '## ### ###'},
-  {code: '+66', matrix: '## ### ###'},
-  {code: '+670', matrix: '### #####'},
-  {code: '+850', matrix: '#### ####'},
-  {code: '+852', matrix: '#### ####'},
-  {code: '+853', matrix: '#### ####'},
-  {code: '+886', matrix: '#### ####'},
-  {code: '+95', matrix: '## ### ###'},
-  {code: '+961', matrix: '# ### ###'},
-  {code: '+965', matrix: '#### ####'},
-  {code: '+967', matrix: '# ### ###'},
-  {code: '+973', matrix: '#### ####'},
-  {code: '+974', matrix: '#### ####'},
-  {code: '+975', matrix: '# ### ###'},
-  {code: '+1', matrix: '### ### ####'},
-  {code: '+216', matrix: '## ### ###'},
-  {code: '+218', matrix: '## ### ###'},
-  {code: '+222', matrix: '## ## ####'},
-  {code: '+223', matrix: '## ## ####'},
-  {code: '+224', matrix: '## ### ###'},
-  {code: '+225', matrix: '## ### ###'},
-  {code: '+226', matrix: '## ## ####'},
-  {code: '+227', matrix: '## ## ####'},
-  {code: '+228', matrix: '## ### ###'},
-  {code: '+229', matrix: '## ## ####'},
-  {code: '+231', matrix: '## ### ###'},
-  {code: '+234', matrix: '## ### ###'},
-  {code: '+236', matrix: '## ## ####'},
-  {code: '+241', matrix: '# ## ## ##'},
-  {code: '+252', matrix: '## ### ###'},
-  {code: '+254', matrix: '### ######'},
-  {code: '+257', matrix: '## ## ####'},
-  {code: '+258', matrix: '## ### ###'},
-  {code: '+262', matrix: '##### ####'},
-  {code: '+262', matrix: '##### ####'},
-  {code: '+266', matrix: '# ### ####'},
-  {code: '+267', matrix: '## ### ###'},
-  {code: '+268', matrix: '## ## ####'},
-  {code: '+27', matrix: '## ### ####'},
-  {code: '+31', matrix: '## ### ####'},
-  {code: '+32', matrix: '### ### ###'},
-  {code: '+33', matrix: '### ### ###'},
-  {code: '+34', matrix: '### ### ###'},
-  {code: '+357', matrix: '## ### ###'},
-  {code: '+36', matrix: '### ### ###'},
-  {code: '+370', matrix: '### ## ###'},
-  {code: '+371', matrix: '## ### ###'},
-  {code: '+374', matrix: '## ### ###'},
-  {code: '+377', matrix: '## ### ###'},
-  {code: '+382', matrix: '## ### ###'},
-  {code: '+385', matrix: '## ### ###'},
-  {code: '+386', matrix: '## ### ###'},
-  {code: '+389', matrix: '## ### ###'},
-  {code: '+39', matrix: '# ### #####'},
-  {code: '+40', matrix: '## ### ####'},
-  {code: '+41', matrix: '## ### ####'},
-  {code: '+45', matrix: '## ## ## ##'},
-  {code: '+46', matrix: '## ### ####'},
-  {code: '+48', matrix: '### ### ###'},
-  {code: '+49', matrix: '### ## ####'},
-  {code: '+502', matrix: '# ### ####'},
-  {code: '+503', matrix: '## ## ####'},
-  {code: '+509', matrix: '## ## ####'},
-  {code: '+51', matrix: '### ### ###'},
-  {code: '+56', matrix: '# #### ####'},
-  {code: '+591', matrix: '# ### ####'},
-  {code: '+593', matrix: '# ### ####'},
-  {code: '+594', matrix: '##### ####'},
-  {code: '+60', matrix: '## ### ####'},
-  {code: '+60', matrix: '### ### ###'},
-  {code: '+61', matrix: '# #### ####'},
-  {code: '+62', matrix: '## ### ####'},
-  {code: '+64', matrix: '### ### ###'},
-  {code: '+66', matrix: '## ### ####'},
-  {code: '+675', matrix: '### ## ###'},
-  {code: '+81', matrix: '### ### ###'},
-  {code: '+82', matrix: '## ### ####'},
-  {code: '+84', matrix: '## #### ###'},
-  {code: '+850', matrix: '## ### ###'},
-  {code: '+855', matrix: '## ### ###'},
-  {code: '+856', matrix: '## ### ###'},
-  {code: '+880', matrix: '## ### ###'},
-  {code: '+93', matrix: '## ### ####'},
-  {code: '+94', matrix: '## ### ####'},
-  {code: '+961', matrix: '## ### ###'},
-  {code: '+966', matrix: '# ### ####'},
-  {code: '+967', matrix: '## ### ###'},
-  {code: '+968', matrix: '## ### ###'},
-  {code: '+971', matrix: '# ### ####'},
-  {code: '+972', matrix: '# ### ####'},
-  {code: '+975', matrix: '## ### ###'},
-  {code: '+976', matrix: '## ## ####'},
-  {code: '+977', matrix: '## ### ###'},
-  {code: '+993', matrix: '# ### ####'},
-  {code: '+20', matrix: '### ### ####'},
-  {code: '+211', matrix: '## ### ####'},
-  {code: '+212', matrix: '## #### ###'},
-  {code: '+213', matrix: '## ### ####'},
-  {code: '+218', matrix: '## ### ####'},
-  {code: '+221', matrix: '## ### ####'},
-  {code: '+233', matrix: '### ### ###'},
-  {code: '+235', matrix: '## ## ## ##'},
-  {code: '+240', matrix: '## ### ####'},
-  {code: '+242', matrix: '## ### ####'},
-  {code: '+243', matrix: '### ### ###'},
-  {code: '+244', matrix: '### ### ###'},
-  {code: '+249', matrix: '## ### ####'},
-  {code: '+250', matrix: '### ### ###'},
-  {code: '+251', matrix: '## ### ####'},
-  {code: '+253', matrix: '## ## ## ##'},
-  {code: '+255', matrix: '## ### ####'},
-  {code: '+256', matrix: '### ### ###'},
-  {code: '+260', matrix: '## ### ####'},
-  {code: '+261', matrix: '## ## #####'},
-  {code: '+264', matrix: '## ### ####'},
-  {code: '+265', matrix: '# #### ####'},
-  {code: '+30', matrix: '### ### ####'},
-  {code: '+351', matrix: '### ### ###'},
-  {code: '+352', matrix: '### ### ###'},
-  {code: '+353', matrix: '### ### ###'},
-  {code: '+355', matrix: '### ### ###'},
-  {code: '+359', matrix: '### ### ###'},
-  {code: '+377', matrix: '### ### ###'},
-  {code: '+378', matrix: '#### ######'},
-  {code: '+381', matrix: '## ### ####'},
-  {code: '+39', matrix: '### #### ###'},
-  {code: '+420', matrix: '### ### ###'},
-  {code: '+421', matrix: '### ### ###'},
-  {code: '+43', matrix: '### ### ####'},
-  {code: '+44', matrix: '## #### ####'},
-  {code: '+49', matrix: '### ### ####'},
-  {code: '+52', matrix: '### ### ####'},
-  {code: '+54', matrix: '### ### ####'},
-  {code: '+57', matrix: '### ### ####'},
-  {code: '+58', matrix: '### ### ####'},
-  {code: '+590', matrix: '### ### ###'},
-  {code: '+593', matrix: '## ### ####'},
-  {code: '+595', matrix: '### ### ###'},
-  {code: '+598', matrix: '# ### ## ##'},
-  {code: '+62', matrix: '### ### ####'},
-  {code: '+63', matrix: '### ### ####'},
-  {code: '+64', matrix: '### ### ####'},
-  {code: '+7', matrix: '### ### ## ##'},
-  {code: '+81', matrix: '## #### ####'},
-  {code: '+84', matrix: '### #### ###'},
-  {code: '+86', matrix: '### #### ###'},
-  {code: '+886', matrix: '# #### ####'},
-  {code: '+90', matrix: '### ### ####'},
-  {code: '+91', matrix: '#### ### ###'},
-  {code: '+92', matrix: '### ### ####'},
-  {code: '+962', matrix: '# #### ####'},
-  {code: '+963', matrix: '## #### ###'},
-  {code: '+966', matrix: '# #### ####'},
-  {code: '+967', matrix: '### ### ###'},
-  {code: '+970', matrix: '## ### ####'},
-  {code: '+971', matrix: '## ### ####'},
-  {code: '+972', matrix: '## ### ####'},
-  {code: '+98', matrix: '### ### ####'},
-  {code: '+992', matrix: '## ### ####'},
-  {code: '+995', matrix: '### ### ###'},
-  {code: '+996', matrix: '### ### ###'},
-  {code: '+998', matrix: '## ### ####'},
-  {code: '+234', matrix: '### ### ####'},
-  {code: '+234', matrix: '### ### ####'},
-  {code: '+375', matrix: '## ### ## ##'},
-  {code: '+380', matrix: '## ### ## ##'},
-  {code: '+423', matrix: '### ### ####'},
-  {code: '+49', matrix: '#### ### ####'},
-  {code: '+55', matrix: '## ##### ####'},
-  {code: '+596', matrix: '### ## ## ##'},
-  {code: '+850', matrix: '### #### ###'},
-  {code: '+856', matrix: '#### ### ###'},
-  {code: '+86', matrix: '### #### ####'},
-  {code: '+964', matrix: '### ### ####'},
-  {code: '+994', matrix: '## ### ## ##'},
-  {code: '+358', matrix: '### ### ## ##'},
-  {code: '+62', matrix: '### ### ## ###'},
-  {code: '+86', matrix: '## ##### #####'},
-  {code: '+850', matrix: '#### #############'},
-];
+export const countriesPhoneCodeList = [
+  {code: '+247', matrix: '####'},
+  {code: '+290', matrix: '####'},
+  {code: '+683', matrix: '####'},
+  {code: '+690', matrix: '####'},
+  {code: '+500', matrix: '#####'},
+  {code: '+676', matrix: '#####'},
+  {code: '+677', matrix: '#####'},
+  {code: '+678', matrix: '#####'},
+  {code: '+688', matrix: '#####'},
+  {code: '+49', matrix: '### ###'},
+  {code: '+682', matrix: '## ###'},
+  {code: '+686', matrix: '## ###'},
+  {code: '+688', matrix: '######'},
+  {code: '+95', matrix: '### ###'},
+  {code: '+298', matrix: '### ###'},
+  {code: '+376', matrix: '### ###'},
+  {code: '+387', matrix: '## ####'},
+  {code: '+508', matrix: '## ####'},
+  {code: '+597', matrix: '### ###'},
+  {code: '+672', matrix: '### ###'},
+  {code: '+681', matrix: '## ####'},
+  {code: '+685', matrix: '## ####'},
+  {code: '+687', matrix: '## ####'},
+  {code: '+850', matrix: '### ###'},
+  {code: '+230', matrix: '### ####'},
+  {code: '+239', matrix: '## #####'},
+  {code: '+245', matrix: '# ######'},
+  {code: '+246', matrix: '### ####'},
+  {code: '+263', matrix: '# ######'},
+  {code: '+269', matrix: '## #####'},
+  {code: '+297', matrix: '### ####'},
+  {code: '+299', matrix: '## ## ##'},
+  {code: '+354', matrix: '### ####'},
+  {code: '+372', matrix: '### ####'},
+  {code: '+387', matrix: '## #####'},
+  {code: '+49', matrix: '### ## ##'},
+  {code: '+501', matrix: '### ####'},
+  {code: '+507', matrix: '### ####'},
+  {code: '+592', matrix: '### ####'},
+  {code: '+597', matrix: '### ####'},
+  {code: '+599', matrix: '### ####'},
+  {code: '+60', matrix: '# ### ###'},
+  {code: '+62', matrix: '## ### ##'},
+  {code: '+65', matrix: '#### ####'},
+  {code: '+670', matrix: '### ####'},
+  {code: '+673', matrix: '### ####'},
+  {code: '+674', matrix: '### ####'},
+  {code: '+677', matrix: '### ####'},
+  {code: '+678', matrix: '## #####'},
+  {code: '+679', matrix: '## #####'},
+  {code: '+680', matrix: '### ####'},
+  {code: '+689', matrix: '## ## ##'},
+  {code: '+691', matrix: '### ####'},
+  {code: '+692', matrix: '### ####'},
+  {code: '+95', matrix: '# ### ###'},
+  {code: '+960', matrix: '### ####'},
+  {code: '+220', matrix: '### ## ##'},
+  {code: '+232', matrix: '## ######'},
+  {code: '+234', matrix: '## ### ##'},
+  {code: '+237', matrix: '#### ####'},
+  {code: '+238', matrix: '### ## ##'},
+  {code: '+248', matrix: '# ### ###'},
+  {code: '+252', matrix: '# ### ###'},
+  {code: '+265', matrix: '# ### ###'},
+  {code: '+291', matrix: '# ### ###'},
+  {code: '+350', matrix: '### #####'},
+  {code: '+356', matrix: '#### ####'},
+  {code: '+372', matrix: '#### ####'},
+  {code: '+373', matrix: '#### ####'},
+  {code: '+47', matrix: '### ## ###'},
+  {code: '+49', matrix: '### ## ###'},
+  {code: '+504', matrix: '#### ####'},
+  {code: '+505', matrix: '#### ####'},
+  {code: '+506', matrix: '#### ####'},
+  {code: '+52', matrix: '## ## ####'},
+  {code: '+53', matrix: '# ### ####'},
+  {code: '+599', matrix: '#### ####'},
+  {code: '+60', matrix: '## ### ###'},
+  {code: '+62', matrix: '## ### ###'},
+  {code: '+64', matrix: '## ### ###'},
+  {code: '+66', matrix: '## ### ###'},
+  {code: '+670', matrix: '### #####'},
+  {code: '+850', matrix: '#### ####'},
+  {code: '+852', matrix: '#### ####'},
+  {code: '+853', matrix: '#### ####'},
+  {code: '+886', matrix: '#### ####'},
+  {code: '+95', matrix: '## ### ###'},
+  {code: '+961', matrix: '# ### ###'},
+  {code: '+965', matrix: '#### ####'},
+  {code: '+967', matrix: '# ### ###'},
+  {code: '+973', matrix: '#### ####'},
+  {code: '+974', matrix: '#### ####'},
+  {code: '+975', matrix: '# ### ###'},
+  {code: '+1', matrix: '### ### ####'},
+  {code: '+216', matrix: '## ### ###'},
+  {code: '+218', matrix: '## ### ###'},
+  {code: '+222', matrix: '## ## ####'},
+  {code: '+223', matrix: '## ## ####'},
+  {code: '+224', matrix: '## ### ###'},
+  {code: '+225', matrix: '## ### ###'},
+  {code: '+226', matrix: '## ## ####'},
+  {code: '+227', matrix: '## ## ####'},
+  {code: '+228', matrix: '## ### ###'},
+  {code: '+229', matrix: '## ## ####'},
+  {code: '+231', matrix: '## ### ###'},
+  {code: '+234', matrix: '## ### ###'},
+  {code: '+236', matrix: '## ## ####'},
+  {code: '+241', matrix: '# ## ## ##'},
+  {code: '+252', matrix: '## ### ###'},
+  {code: '+254', matrix: '### ######'},
+  {code: '+257', matrix: '## ## ####'},
+  {code: '+258', matrix: '## ### ###'},
+  {code: '+262', matrix: '##### ####'},
+  {code: '+262', matrix: '##### ####'},
+  {code: '+266', matrix: '# ### ####'},
+  {code: '+267', matrix: '## ### ###'},
+  {code: '+268', matrix: '## ## ####'},
+  {code: '+27', matrix: '## ### ####'},
+  {code: '+31', matrix: '## ### ####'},
+  {code: '+32', matrix: '### ### ###'},
+  {code: '+33', matrix: '### ### ###'},
+  {code: '+34', matrix: '### ### ###'},
+  {code: '+357', matrix: '## ### ###'},
+  {code: '+36', matrix: '### ### ###'},
+  {code: '+370', matrix: '### ## ###'},
+  {code: '+371', matrix: '## ### ###'},
+  {code: '+374', matrix: '## ### ###'},
+  {code: '+377', matrix: '## ### ###'},
+  {code: '+382', matrix: '## ### ###'},
+  {code: '+385', matrix: '## ### ###'},
+  {code: '+386', matrix: '## ### ###'},
+  {code: '+389', matrix: '## ### ###'},
+  {code: '+39', matrix: '# ### #####'},
+  {code: '+40', matrix: '## ### ####'},
+  {code: '+41', matrix: '## ### ####'},
+  {code: '+45', matrix: '## ## ## ##'},
+  {code: '+46', matrix: '## ### ####'},
+  {code: '+48', matrix: '### ### ###'},
+  {code: '+49', matrix: '### ## ####'},
+  {code: '+502', matrix: '# ### ####'},
+  {code: '+503', matrix: '## ## ####'},
+  {code: '+509', matrix: '## ## ####'},
+  {code: '+51', matrix: '### ### ###'},
+  {code: '+56', matrix: '# #### ####'},
+  {code: '+591', matrix: '# ### ####'},
+  {code: '+593', matrix: '# ### ####'},
+  {code: '+594', matrix: '##### ####'},
+  {code: '+60', matrix: '## ### ####'},
+  {code: '+60', matrix: '### ### ###'},
+  {code: '+61', matrix: '# #### ####'},
+  {code: '+62', matrix: '## ### ####'},
+  {code: '+64', matrix: '### ### ###'},
+  {code: '+66', matrix: '## ### ####'},
+  {code: '+675', matrix: '### ## ###'},
+  {code: '+81', matrix: '### ### ###'},
+  {code: '+82', matrix: '## ### ####'},
+  {code: '+84', matrix: '## #### ###'},
+  {code: '+850', matrix: '## ### ###'},
+  {code: '+855', matrix: '## ### ###'},
+  {code: '+856', matrix: '## ### ###'},
+  {code: '+880', matrix: '## ### ###'},
+  {code: '+93', matrix: '## ### ####'},
+  {code: '+94', matrix: '## ### ####'},
+  {code: '+961', matrix: '## ### ###'},
+  {code: '+966', matrix: '# ### ####'},
+  {code: '+967', matrix: '## ### ###'},
+  {code: '+968', matrix: '## ### ###'},
+  {code: '+971', matrix: '# ### ####'},
+  {code: '+972', matrix: '# ### ####'},
+  {code: '+975', matrix: '## ### ###'},
+  {code: '+976', matrix: '## ## ####'},
+  {code: '+977', matrix: '## ### ###'},
+  {code: '+993', matrix: '# ### ####'},
+  {code: '+20', matrix: '### ### ####'},
+  {code: '+211', matrix: '## ### ####'},
+  {code: '+212', matrix: '## #### ###'},
+  {code: '+213', matrix: '## ### ####'},
+  {code: '+218', matrix: '## ### ####'},
+  {code: '+221', matrix: '## ### ####'},
+  {code: '+233', matrix: '### ### ###'},
+  {code: '+235', matrix: '## ## ## ##'},
+  {code: '+240', matrix: '## ### ####'},
+  {code: '+242', matrix: '## ### ####'},
+  {code: '+243', matrix: '### ### ###'},
+  {code: '+244', matrix: '### ### ###'},
+  {code: '+249', matrix: '## ### ####'},
+  {code: '+250', matrix: '### ### ###'},
+  {code: '+251', matrix: '## ### ####'},
+  {code: '+253', matrix: '## ## ## ##'},
+  {code: '+255', matrix: '## ### ####'},
+  {code: '+256', matrix: '### ### ###'},
+  {code: '+260', matrix: '## ### ####'},
+  {code: '+261', matrix: '## ## #####'},
+  {code: '+264', matrix: '## ### ####'},
+  {code: '+265', matrix: '# #### ####'},
+  {code: '+30', matrix: '### ### ####'},
+  {code: '+351', matrix: '### ### ###'},
+  {code: '+352', matrix: '### ### ###'},
+  {code: '+353', matrix: '### ### ###'},
+  {code: '+355', matrix: '### ### ###'},
+  {code: '+359', matrix: '### ### ###'},
+  {code: '+377', matrix: '### ### ###'},
+  {code: '+378', matrix: '#### ######'},
+  {code: '+381', matrix: '## ### ####'},
+  {code: '+39', matrix: '### #### ###'},
+  {code: '+420', matrix: '### ### ###'},
+  {code: '+421', matrix: '### ### ###'},
+  {code: '+43', matrix: '### ### ####'},
+  {code: '+44', matrix: '## #### ####'},
+  {code: '+49', matrix: '### ### ####'},
+  {code: '+52', matrix: '### ### ####'},
+  {code: '+54', matrix: '### ### ####'},
+  {code: '+57', matrix: '### ### ####'},
+  {code: '+58', matrix: '### ### ####'},
+  {code: '+590', matrix: '### ### ###'},
+  {code: '+593', matrix: '## ### ####'},
+  {code: '+595', matrix: '### ### ###'},
+  {code: '+598', matrix: '# ### ## ##'},
+  {code: '+62', matrix: '### ### ####'},
+  {code: '+63', matrix: '### ### ####'},
+  {code: '+64', matrix: '### ### ####'},
+  {code: '+7', matrix: '### ### ## ##'},
+  {code: '+81', matrix: '## #### ####'},
+  {code: '+84', matrix: '### #### ###'},
+  {code: '+86', matrix: '### #### ###'},
+  {code: '+886', matrix: '# #### ####'},
+  {code: '+90', matrix: '### ### ####'},
+  {code: '+91', matrix: '#### ### ###'},
+  {code: '+92', matrix: '### ### ####'},
+  {code: '+962', matrix: '# #### ####'},
+  {code: '+963', matrix: '## #### ###'},
+  {code: '+966', matrix: '# #### ####'},
+  {code: '+967', matrix: '### ### ###'},
+  {code: '+970', matrix: '## ### ####'},
+  {code: '+971', matrix: '## ### ####'},
+  {code: '+972', matrix: '## ### ####'},
+  {code: '+98', matrix: '### ### ####'},
+  {code: '+992', matrix: '## ### ####'},
+  {code: '+995', matrix: '### ### ###'},
+  {code: '+996', matrix: '### ### ###'},
+  {code: '+998', matrix: '## ### ####'},
+  {code: '+234', matrix: '### ### ####'},
+  {code: '+234', matrix: '### ### ####'},
+  {code: '+375', matrix: '## ### ## ##'},
+  {code: '+380', matrix: '## ### ## ##'},
+  {code: '+423', matrix: '### ### ####'},
+  {code: '+49', matrix: '#### ### ####'},
+  {code: '+55', matrix: '## ##### ####'},
+  {code: '+596', matrix: '### ## ## ##'},
+  {code: '+850', matrix: '### #### ###'},
+  {code: '+856', matrix: '#### ### ###'},
+  {code: '+86', matrix: '### #### ####'},
+  {code: '+964', matrix: '### ### ####'},
+  {code: '+994', matrix: '## ### ## ##'},
+  {code: '+358', matrix: '### ### ## ##'},
+  {code: '+62', matrix: '### ### ## ###'},
+  {code: '+86', matrix: '## ##### #####'},
+  {code: '+850', matrix: '#### #############'},
+];

package/lib/utils/inputMask.d.ts

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

package/lib/utils/inputMask.js

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

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.1.0",
+  "version": "0.2.5",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },