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

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,63 @@ 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>
+  );
+}
+```
+
+## Advanced Usage
+
+- ### React-Hook-Form + Typescript + Default Phone Number Value
 
 ```tsx
 import React, { useState, useEffect } from 'react';
@@ -357,7 +405,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 +416,6 @@ export default function App() {
     undefined | ICountry
   >(undefined);
 
-  const { control, handleSubmit, setValue, watch } =
-    useForm<FormProps>();
-
   function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
   }
@@ -382,12 +427,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 +550,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/phoneInputeRef.ts)>
 
 <br>
 

package/lib/index.d.ts

@@ -1,7 +1,13 @@
+import { Ref } from 'react';
+
 import { ICountry } from './interfaces/country';
+import { IPhoneInputRef } from './interfaces/phoneInputRef';
 import { PhoneInputProps } from './interfaces/phoneInputProps';
 
-declare function PhoneInput(props: PhoneInputProps): JSX.Element;
+declare function PhoneInput<IPhoneInputRef, PhoneInputProps>(
+  props: PhoneInputProps,
+  ref?: Ref<IPhoneInputRef>
+): JSX.Element;
 
 declare function getAllCountries(): ICountry[];
 
@@ -29,5 +35,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,304 @@ 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);
+        onChangePhoneNumber('');
+      }
+
+      if (onChangeSelectedCountry || ref) {
+        const newValue = {
+          name: country.name,
+          cca2: country.cca2,
+          flag: country.flag,
+          callingCode: `+${country.callingCode[0]}`,
+        };
 
-        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"
-        );
+        if (ref) {
+          setCountryValue(newValue);
+          updateRef('', newValue);
+        } else {
+          onChangeSelectedCountry(newValue);
+        }
       }
-    } else {
-      if (!selectedCountry) {
-        onChangeSelectedCountry({
-          callingCode: '+55',
-          cca2: 'BR',
-          flag: 'flag-br',
-          name: 'Brazil',
-        });
+    }
+
+    function onChangeText(phoneNumber, callingCode) {
+      const res = phoneMask(
+        phoneNumber,
+        callingCode ? callingCode : countryValue?.callingCode,
+        countryValue?.cca2
+      );
+
+      if (ref) {
+        setInputValue(res);
+        updateRef(res, countryValue);
+      } else {
+        onChangePhoneNumber(res);
       }
     }
-  }, [defaultValue]);
 
-  useEffect(() => {
-    if (
-      defaultValue &&
-      selectedCountry &&
-      selectedCountry.cca2 === defaultCca2 &&
-      !rest.value
-    ) {
-      const callingCode = selectedCountry.callingCode;
+    useEffect(() => {
+      if (ref) {
+        setInputValue('');
+      } else {
+        onChangePhoneNumber('');
+      }
 
-      let phoneNumber = defaultValue;
+      if (defaultValue) {
+        const matchingCountry = getCountryByPhoneNumber(defaultValue);
 
-      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 (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"
           );
+        }
       } else {
-        phoneNumber = defaultValue
-          .replace(/\s/g, '')
-          .substring(
-            callingCode.length,
-            defaultValue.replace(/\D/g, '').length +
-              callingCode.length
-          );
-      }
-      onChangeText(phoneNumber, callingCode);
-    }
-  }, [selectedCountry]);
+        if (!countryValue) {
+          const defaultCountry = {
+            callingCode: '+55',
+            cca2: 'BR',
+            flag: 'flag-br',
+            name: 'Brazil',
+          };
 
-  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
+          if (ref) {
+            setCountryValue(defaultCountry);
+            updateRef('', defaultCountry);
+          } else {
+            onChangeSelectedCountry(defaultCountry);
+          }
+        } else {
+          if (ref) {
+            updateRef('', countryValue);
+          }
         }
-        modalProps={
-          disabled || modalDisabled ? { visible: false } : {}
+      }
+    }, [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
+            );
         }
-      />
-      <TextInput
+        onChangeText(phoneNumber, callingCode);
+      }
+    }, [countryValue]);
+
+    useEffect(() => {
+      if (!ref) {
+        setInputValue(rest.value);
+        setCountryValue(selectedCountry);
+      }
+    }, [selectedCountry]);
+
+    return (
+      <View
         style={[
-          withDarkTheme ? styles.darkInput : styles.lightInput,
-          { width: containerWidth - 100 },
-          inputStyle ? inputStyle : {},
+          withDarkTheme
+            ? {
+                ...styles.darkContainer,
+                backgroundColor: disabled
+                  ? '#858585'
+                  : styles.darkContainer.backgroundColor,
+              }
+            : {
+                ...styles.lightContainer,
+                backgroundColor: disabled
+                  ? '#E3E3E3'
+                  : styles.lightContainer.backgroundColor,
+              },
+          containerStyle ? containerStyle : {},
         ]}
-        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)'
+        onLayout={(e) =>
+          setContainerWidth(e.nativeEvent.layout.width)
         }
-        editable={!disabled}
-        onChangeText={onChangeText}
-        keyboardType="numeric"
-        {...rest}
-      />
-    </View>
-  );
-}
+      >
+        <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/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.13",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",