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

package/README.md

@@ -47,9 +47,12 @@
   - [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)
+  - [Default Phone Number Value](#default-phone-number-value)
+  - [Typescript](#typescript)
+- [Intermediate Usage](#intermediate-usage)
+  - [Typescript + useRef](#typescript--useref)
+- [Advanced Usage](#advanced-usage)
+  - [React-Hook-Form + Typescript + Default Phone Number Value](#react-hook-form--typescript--default-phone-number-value)
 - [Customizing Lib](#customizing-lib)
   - [Dark Mode](#dark-mode)
   - [Custom Lib Styles](#custom-lib-styles)
@@ -242,35 +245,29 @@ export default function App() {
 }
 ```
 
-<br>
-
-## Basic Usage - Typescript
+- ### Default Phone Number Value
 
 ```tsx
 import React, { useState } from 'react';
 import { View, Text } from 'react-native';
-import {
-  PhoneInput,
-  ICountry,
-} from 'react-native-international-phone-number';
+import { PhoneInput } from 'react-native-international-phone-number';
 
 export default function App() {
-  const [selectedCountry, setSelectedCountry] = useState<
-    undefined | ICountry
-  >(undefined);
-  const [inputValue, setInputValue] = useState<string>('');
+  const [selectedCountry, setSelectedCountry] = useState(undefined);
+  const [inputValue, setInputValue] = useState('');
 
-  function handleInputValue(phoneNumber: string) {
+  function handleInputValue(phoneNumber) {
     setInputValue(phoneNumber);
   }
 
-  function handleSelectedCountry(country: ICountry) {
+  function handleSelectedCountry(country) {
     setSelectedCountry(country);
   }
 
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <PhoneInput
+        defaultValue="+12505550199"
         value={inputValue}
         onChangePhoneNumber={handleInputValue}
         selectedCountry={selectedCountry}
@@ -291,9 +288,12 @@ export default function App() {
 }
 ```
 
-<br>
+> 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).
 
-## Intermediate Usage - Typescript + Default Phone Number Value
+- ### Typescript
 
 ```tsx
 import React, { useState } from 'react';
@@ -320,7 +320,6 @@ export default function App() {
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <PhoneInput
-        defaultValue="+12505550199"
         value={inputValue}
         onChangePhoneNumber={handleInputValue}
         selectedCountry={selectedCountry}
@@ -341,14 +340,65 @@ 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).
-
 <br>
 
-## Advanced Usage - React-Hook-Form + Typescript + Default Phone Number Value
+## Intermediate Usage
+
+- ### Typescript + useRef
+
+```tsx
+import React, { useState, useRef } from 'react';
+import { View, Text } from 'react-native';
+import {
+  PhoneInput,
+  ICountry,
+  IPhoneInputRef,
+} from 'react-native-international-phone-number';
+
+export default function App() {
+  const phoneInputRef = useRef<IPhoneInputRef>(null);
+
+  function onSubmitRef() {
+    Alert.alert(
+      'Intermediate Result',
+      `${phoneInputRef.current?.selectedCountry?.callingCode} ${phoneInputRef.current?.value}`
+    );
+  }
+
+  return (
+    <View style={{ width: '100%', flex: 1, padding: 24 }}>
+      <PhoneInput ref={phoneInputRef} />
+      <TouchableOpacity
+        style={{
+          width: '100%',
+          paddingVertical: 12,
+          backgroundColor: '#2196F3',
+          borderRadius: 4,
+          marginTop: 10,
+        }}
+        onPress={onSubmit}
+      >
+        <Text
+          style={{
+            color: '#F3F3F3',
+            textAlign: 'center',
+            fontSize: 16,
+            fontWeight: 'bold',
+          }}
+        >
+          Submit
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+```
+
+> 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).
+
+## Advanced Usage
+
+- ### React-Hook-Form + Typescript + Default Phone Number Value
 
 ```tsx
 import React, { useState, useEffect } from 'react';
@@ -357,7 +407,7 @@ import {
   PhoneInput,
   ICountry,
 } from 'react-native-international-phone-number';
-import { Controller, FieldValues, useForm } from 'react-hook-form';
+import { Controller, FieldValues } from 'react-hook-form';
 
 interface FormProps extends FieldValues {
   phoneNumber: string;
@@ -368,9 +418,6 @@ export default function App() {
     undefined | ICountry
   >(undefined);
 
-  const { control, handleSubmit, setValue, watch } =
-    useForm<FormProps>();
-
   function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
   }
@@ -382,12 +429,6 @@ export default function App() {
     );
   }
 
-  useEffect(() => {
-    const watchPhoneNumber = watch('phoneNumber');
-
-    setValue('phoneNumber', watchPhoneNumber);
-  }, []);
-
   return (
     <View style={{ width: '100%', flex: 1, padding: 24 }}>
       <Controller
@@ -511,16 +552,17 @@ export default function App() {
 ## Component Props ([PhoneInputProps](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
 
 - `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);
-- `onChangeSelectedCountry:` (country: [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)) => void;
+- `value?:` string;
+- `onChangePhoneNumber?:` (phoneNumber: string) => void;
+- `selectedCountry?:` undefined | [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)>;
+- `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>
 

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import { ICountry } from './interfaces/country';
+import { IPhoneInputRef } from './interfaces/phoneInputRef';
 import { PhoneInputProps } from './interfaces/phoneInputProps';
 
 declare function PhoneInput(props: PhoneInputProps): JSX.Element;
@@ -29,5 +30,6 @@ export {
   getCountriesByCallingCode,
   getCountriesByName,
   ICountry,
+  IPhoneInputRef,
   PhoneInputProps,
 };

package/lib/index.js

@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  forwardRef,
+} from 'react';
 import {
   StyleSheet,
   Dimensions,
@@ -17,196 +22,316 @@ import getCountryByCca2 from './utils/getCountryByCca2';
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
 import phoneMask from './utils/inputMask';
 
-function PhoneInput({
-  placeholder,
-  placeholderTextColor,
-  selectionColor,
-  containerStyle,
-  flagContainerStyle,
-  inputStyle,
-  withDarkTheme,
-  disabled,
-  modalDisabled,
-  defaultValue,
-  onChangePhoneNumber,
-  selectedCountry,
-  onChangeSelectedCountry,
-  ...rest
-}) {
-  const [containerWidth, setContainerWidth] = useState(
-    Dimensions.get('window').width
-  );
-  const [defaultCca2, setDefaultCca2] = useState('');
-
-  function onSelect(country) {
-    onChangePhoneNumber('');
-    if (onChangeSelectedCountry) {
-      onChangeSelectedCountry({
-        name: country.name,
-        cca2: country.cca2,
-        flag: country.flag,
-        callingCode: `+${country.callingCode[0]}`,
-      });
-    }
-  }
-
-  function onChangeText(phoneNumber, callingCode) {
-    const res = phoneMask(
-      phoneNumber,
-      callingCode ? callingCode : selectedCountry?.callingCode,
-      selectedCountry?.cca2
+const PhoneInput = forwardRef(
+  (
+    {
+      placeholder,
+      placeholderTextColor,
+      selectionColor,
+      containerStyle,
+      flagContainerStyle,
+      inputStyle,
+      withDarkTheme,
+      disabled,
+      modalDisabled,
+      defaultValue,
+      onChangePhoneNumber,
+      selectedCountry,
+      onChangeSelectedCountry,
+      ...rest
+    },
+    ref
+  ) => {
+    const [containerWidth, setContainerWidth] = useState(
+      Dimensions.get('window').width
     );
+    const [defaultCca2, setDefaultCca2] = useState('');
+    const [inputValue, setInputValue] = useState(null);
+    const [countryValue, setCountryValue] = useState(null);
 
-    onChangePhoneNumber(res);
-  }
+    const textInputRef = useRef(null);
 
-  useEffect(() => {
-    onChangePhoneNumber('');
-    if (defaultValue) {
-      const matchingCountry = getCountryByPhoneNumber(defaultValue);
+    const refBase = {
+      ...textInputRef.current,
+      onFocus: textInputRef.current?.focus,
+      focus: textInputRef.current?.focus,
+      getValue: () => inputValue,
+      value: inputValue,
+      getSelectedCountry: () => countryValue,
+      selectedCountry: countryValue,
+      props: {
+        placeholder,
+        placeholderTextColor,
+        selectionColor,
+        containerStyle,
+        flagContainerStyle,
+        inputStyle,
+        withDarkTheme,
+        disabled,
+        modalDisabled,
+        defaultValue,
+        onChangePhoneNumber,
+        selectedCountry,
+        onChangeSelectedCountry,
+        ...rest,
+      },
+    };
 
-      if (matchingCountry) {
-        setDefaultCca2(matchingCountry.cca2);
+    function updateRef(phoneNumber, country) {
+      if (ref) {
+        ref.current = {
+          ...refBase,
+          getValue: () => phoneNumber,
+          value: phoneNumber,
+          getSelectedCountry: () => country,
+          selectedCountry: country,
+          props: {
+            ...refBase.props,
+            value: phoneNumber,
+            selectedCountry: country,
+          },
+        };
+      }
+    }
 
-        onChangeSelectedCountry(matchingCountry);
+    function onSelect(country) {
+      if (ref) {
+        setInputValue('');
       } else {
-        setDefaultCca2(null);
-        onChangeSelectedCountry(null);
-        onChangeText('', null);
-
-        console.warn(
-          "The default number provided (defaultValue) don't match with anyone country. Please, correct it to be shown in the input. For more information: https://github.com/AstrOOnauta/react-native-international-phone-number#intermediate-usage---typescript--default-phone-number-value"
-        );
+        onChangePhoneNumber('');
       }
-    } else {
-      if (!selectedCountry) {
-        onChangeSelectedCountry({
-          callingCode: '+55',
-          cca2: 'BR',
-          flag: 'flag-br',
-          name: 'Brazil',
-        });
+
+      if (onChangeSelectedCountry || ref) {
+        const newValue = {
+          name: country.name,
+          cca2: country.cca2,
+          flag: country.flag,
+          callingCode: `+${country.callingCode[0]}`,
+        };
+
+        if (ref) {
+          setCountryValue(newValue);
+          updateRef('', newValue);
+        } else {
+          onChangeSelectedCountry(newValue);
+        }
       }
     }
-  }, [defaultValue]);
-
-  useEffect(() => {
-    if (
-      defaultValue &&
-      selectedCountry &&
-      selectedCountry.cca2 === defaultCca2 &&
-      !rest.value
-    ) {
-      const callingCode = selectedCountry.callingCode;
 
-      let phoneNumber = defaultValue;
+    function onChangeText(phoneNumber, callingCode) {
+      const res = phoneMask(
+        phoneNumber,
+        callingCode ? callingCode : countryValue?.callingCode,
+        countryValue?.cca2
+      );
 
-      if (
-        callingCode === '+1' &&
-        selectedCountry.cca2 !== 'CA' &&
-        selectedCountry.cca2 !== 'US'
-      ) {
-        phoneNumber = defaultValue
-          .replace(/\s/g, '')
-          .substring(
-            callingCode.length + 3,
-            defaultValue.replace(/\D/g, '').length +
-              callingCode.length
-          );
-      } else if (
-        callingCode === '+39' &&
-        selectedCountry.cca2 === 'VA'
-      ) {
-        phoneNumber = defaultValue
-          .replace(/\s/g, '')
-          .substring(
-            callingCode.length + 5,
-            defaultValue.replace(/\D/g, '').length +
-              callingCode.length
-          );
+      if (ref) {
+        setInputValue(res);
+        updateRef(res, countryValue);
       } else {
-        phoneNumber = defaultValue
-          .replace(/\s/g, '')
-          .substring(
-            callingCode.length,
-            defaultValue.replace(/\D/g, '').length +
-              callingCode.length
-          );
+        onChangePhoneNumber(res);
       }
-      onChangeText(phoneNumber, callingCode);
     }
-  }, [selectedCountry]);
 
-  return (
-    <View
-      style={[
-        withDarkTheme
-          ? {
-              ...styles.darkContainer,
-              backgroundColor: disabled
-                ? '#858585'
-                : styles.darkContainer.backgroundColor,
-            }
-          : {
-              ...styles.lightContainer,
-              backgroundColor: disabled
-                ? '#E3E3E3'
-                : styles.lightContainer.backgroundColor,
-            },
-        containerStyle ? containerStyle : {},
-      ]}
-      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
-    >
-      <CountryPicker
-        containerButtonStyle={[
-          flagContainerBase,
-          selectedCountry?.cca2 === 'VA' ? { width: 140 } : {},
-          flagContainerStyle ? flagContainerStyle : {},
-        ]}
-        onSelect={onSelect}
-        withFilter
-        withAlphaFilter
-        withCallingCode
-        withCallingCodeButton={selectedCountry || defaultCca2}
-        theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-        countryCode={
-          selectedCountry ? selectedCountry.cca2 : defaultCca2
-        }
-        modalProps={
-          disabled || modalDisabled ? { visible: false } : {}
-        }
-      />
-      <TextInput
-        style={[
-          withDarkTheme ? styles.darkInput : styles.lightInput,
-          { width: containerWidth - 100 },
-          inputStyle ? inputStyle : {},
-        ]}
-        placeholder={
-          placeholder ? placeholder : 'Insert your phone number'
+    useEffect(() => {
+      if (ref) {
+        setInputValue('');
+      } else {
+        onChangePhoneNumber('');
+      }
+
+      if (defaultValue) {
+        const matchingCountry = getCountryByPhoneNumber(defaultValue);
+
+        if (matchingCountry) {
+          setDefaultCca2(matchingCountry.cca2);
+
+          if (ref) {
+            setCountryValue(matchingCountry);
+            updateRef('', matchingCountry);
+          } else {
+            onChangeSelectedCountry(matchingCountry);
+          }
+        } else {
+          setDefaultCca2(null);
+
+          if (ref) {
+            setCountryValue(null);
+            updateRef('', null);
+          } else {
+            onChangeSelectedCountry(null);
+          }
+
+          onChangeText('', null);
+
+          console.warn(
+            "The default number provided (defaultValue) don't match with anyone country. Please, correct it to be shown in the input. For more information: https://github.com/AstrOOnauta/react-native-international-phone-number#intermediate-usage---typescript--default-phone-number-value"
+          );
         }
-        placeholderTextColor={
-          placeholderTextColor
-            ? placeholderTextColor
-            : withDarkTheme
-            ? '#CCCCCC'
-            : '#DDDDDD'
+      } else {
+        if (!countryValue) {
+          const defaultCountry = {
+            callingCode: '+55',
+            cca2: 'BR',
+            flag: 'flag-br',
+            name: 'Brazil',
+          };
+
+          if (ref) {
+            setCountryValue(defaultCountry);
+            updateRef('', defaultCountry);
+          } else {
+            onChangeSelectedCountry(defaultCountry);
+          }
+        } else {
+          if (ref) {
+            updateRef('', countryValue);
+          }
         }
-        selectionColor={
-          selectionColor
-            ? selectionColor
-            : withDarkTheme
-            ? 'rgba(255,255,255, .4)'
-            : 'rgba(0 ,0 ,0 , .4)'
+      }
+    }, [defaultValue]);
+
+    useEffect(() => {
+      if (
+        defaultValue &&
+        countryValue &&
+        countryValue.cca2 === defaultCca2 &&
+        !inputValue
+      ) {
+        const callingCode = countryValue.callingCode;
+
+        let phoneNumber = defaultValue;
+
+        if (
+          callingCode === '+1' &&
+          countryValue.cca2 !== 'CA' &&
+          countryValue.cca2 !== 'US'
+        ) {
+          phoneNumber = defaultValue
+            .replace(/\s/g, '')
+            .substring(
+              callingCode.length + 3,
+              defaultValue.replace(/\D/g, '').length +
+                callingCode.length
+            );
+        } else if (
+          callingCode === '+39' &&
+          countryValue.cca2 === 'VA'
+        ) {
+          phoneNumber = defaultValue
+            .replace(/\s/g, '')
+            .substring(
+              callingCode.length + 5,
+              defaultValue.replace(/\D/g, '').length +
+                callingCode.length
+            );
+        } else {
+          phoneNumber = defaultValue
+            .replace(/\s/g, '')
+            .substring(
+              callingCode.length,
+              defaultValue.replace(/\D/g, '').length +
+                callingCode.length
+            );
         }
-        editable={!disabled}
-        onChangeText={onChangeText}
-        keyboardType="numeric"
-        {...rest}
-      />
-    </View>
-  );
-}
+        onChangeText(phoneNumber, callingCode);
+      }
+    }, [countryValue]);
+
+    useEffect(() => {
+      if (!ref) {
+        setInputValue(rest.value);
+        setCountryValue(selectedCountry);
+      }
+    }, [selectedCountry]);
+
+    if (
+      ref &&
+      (rest.value ||
+        onChangePhoneNumber ||
+        selectedCountry ||
+        onChangeSelectedCountry)
+    ) {
+      throw new Error(
+        "Error: 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)."
+      );
+    } else {
+      return (
+        <View
+          style={[
+            withDarkTheme
+              ? {
+                  ...styles.darkContainer,
+                  backgroundColor: disabled
+                    ? '#858585'
+                    : styles.darkContainer.backgroundColor,
+                }
+              : {
+                  ...styles.lightContainer,
+                  backgroundColor: disabled
+                    ? '#E3E3E3'
+                    : styles.lightContainer.backgroundColor,
+                },
+            containerStyle ? containerStyle : {},
+          ]}
+          onLayout={(e) =>
+            setContainerWidth(e.nativeEvent.layout.width)
+          }
+        >
+          <CountryPicker
+            containerButtonStyle={[
+              flagContainerBase,
+              countryValue?.cca2 === 'VA' ? { width: 140 } : {},
+              flagContainerStyle ? flagContainerStyle : {},
+            ]}
+            onSelect={onSelect}
+            withFilter
+            withAlphaFilter
+            withCallingCode
+            withCallingCodeButton={countryValue || defaultCca2}
+            theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+            countryCode={
+              countryValue ? countryValue?.cca2 : defaultCca2
+            }
+            modalProps={
+              disabled || modalDisabled ? { visible: false } : {}
+            }
+          />
+          <TextInput
+            style={[
+              withDarkTheme ? styles.darkInput : styles.lightInput,
+              { width: containerWidth - 100 },
+              inputStyle ? inputStyle : {},
+            ]}
+            placeholder={
+              placeholder ? placeholder : 'Insert your phone number'
+            }
+            placeholderTextColor={
+              placeholderTextColor
+                ? placeholderTextColor
+                : withDarkTheme
+                ? '#CCCCCC'
+                : '#DDDDDD'
+            }
+            selectionColor={
+              selectionColor
+                ? selectionColor
+                : withDarkTheme
+                ? 'rgba(255,255,255, .4)'
+                : 'rgba(0 ,0 ,0 , .4)'
+            }
+            editable={!disabled}
+            value={inputValue}
+            onChangeText={onChangeText}
+            keyboardType="numeric"
+            ref={textInputRef}
+            {...rest}
+          />
+        </View>
+      );
+    }
+  }
+);
 
 const containerBase = {
   flexDirection: 'row',

package/lib/interfaces/phoneInputProps.ts

@@ -6,8 +6,10 @@ import {
 } from 'react-native';
 
 import { ICountry } from './country';
+import { Ref } from 'react';
+import { IPhoneInputRef } from './phoneInputRef';
 
-export interface PhoneInputProps extends TextInputProps {
+interface IPhoneInputPropsWithoutRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
@@ -21,4 +23,26 @@ export interface PhoneInputProps extends TextInputProps {
   onChangePhoneNumber: (phoneNumber: string) => void;
   selectedCountry: undefined | ICountry;
   onChangeSelectedCountry: (country: ICountry) => void;
+  ref?: never;
 }
+
+interface IPhoneInputPropsWithRef extends TextInputProps {
+  placeholder?: string;
+  placeholderTextColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  flagContainerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  withDarkTheme?: boolean;
+  disabled?: boolean;
+  modalDisabled?: boolean;
+  defaultValue?: string;
+  value?: never;
+  onChangePhoneNumber?: never;
+  selectedCountry?: never;
+  onChangeSelectedCountry?: never;
+  ref: Ref<IPhoneInputRef>;
+}
+
+export type PhoneInputProps =
+  | IPhoneInputPropsWithRef
+  | IPhoneInputPropsWithoutRef;

package/lib/interfaces/phoneInputRef.ts

@@ -0,0 +1,14 @@
+import { TextInput } from 'react-native';
+
+import { ICountry } from './country';
+import { PhoneInputProps } from './phoneInputProps';
+
+export interface IPhoneInputRef extends TextInput {
+  props: PhoneInputProps;
+  onFocus: () => void;
+  focus: () => void;
+  getValue: () => string;
+  value: string;
+  getSelectedCountry: () => ICountry;
+  selectedCountry: ICountry;
+}

package/package.json

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