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

package/README.md

@@ -394,6 +394,8 @@ export default function App() {
 }
 ```
 
+> Observation: Don't use the useRef hook combined with the useState hook to manage the phoneNumber and selectedCountry values. Instead, choose to use just one of them (useRef or useState).
+
 ## Advanced Usage
 
 - ### React-Hook-Form + Typescript + Default Phone Number Value
@@ -560,7 +562,7 @@ export default function App() {
 - `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)>
+- `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,13 +1,8 @@
-import { Ref } from 'react';
-
 import { ICountry } from './interfaces/country';
 import { IPhoneInputRef } from './interfaces/phoneInputRef';
 import { PhoneInputProps } from './interfaces/phoneInputProps';
 
-declare function PhoneInput<IPhoneInputRef, PhoneInputProps>(
-  props: PhoneInputProps,
-  ref?: Ref<IPhoneInputRef>
-): JSX.Element;
+declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 
 declare function getAllCountries(): ICountry[];
 

package/lib/index.js

@@ -245,79 +245,91 @@ const PhoneInput = forwardRef(
       }
     }, [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,
-            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
+    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.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'
+          onLayout={(e) =>
+            setContainerWidth(e.nativeEvent.layout.width)
           }
-          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>
-    );
+        >
+          <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>
+      );
+    }
   }
 );
 

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/package.json

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