react-native-international-phone-number 0.5.2 → 0.5.3

package/README.md

@@ -436,6 +436,45 @@ export default function App() {
         fontWeight: 'bold',
         color: '#F3F3F3',
     }}
+    modalStyle={{
+      modal: {
+        backgroundColor: '#333333',
+        borderWidth: 1,
+      },
+      backdrop: {},
+      divider: {
+        backgroundColor: 'transparent',
+      },
+      countriesList: {},
+      searchInput: {
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#F3F3F3',
+        color: '#F3F3F3',
+        backgroundColor: '#333333',
+        paddingHorizontal: 12,
+        height: 46,
+      },
+      countryButton: {
+        borderWidth: 1,
+        borderColor: '#F3F3F3',
+        backgroundColor: '#666666',
+        marginVertical: 4,
+        paddingVertical: 0,
+      },
+      noCountryText: {},
+      noCountryContainer: {},
+      flag: {
+        color: '#FFFFFF',
+        fontSize: 20,
+      },
+      callingCode: {
+        color: '#F3F3F3',
+      },
+      countryName: {
+        color: '#F3F3F3',
+      },
+    }}
   />
   ...
 ```
@@ -554,6 +593,7 @@ export default function App() {
 - `flagContainerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
 - `flagTextStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
 - `inputStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
+- `modalStyle?:` [IModalStyle](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/modalStyle.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.js

@@ -44,6 +44,7 @@ const PhoneInput = forwardRef(
       flagContainerStyle,
       flagTextStyle,
       inputStyle,
+      modalStyle,
       disabled,
       modalDisabled,
       modalHeight,
@@ -70,6 +71,9 @@ const PhoneInput = forwardRef(
       focus: textInputRef.current?.focus,
       getValue: () => inputValue,
       value: inputValue,
+      getFullPhoneNumber: () =>
+        `${countryValue?.callingCode} ${inputValue}`,
+      fullPhoneNumber: `${countryValue?.callingCode} ${inputValue}`,
       getSelectedCountry: () => countryValue,
       selectedCountry: countryValue,
       props: {
@@ -82,6 +86,7 @@ const PhoneInput = forwardRef(
         flagContainerStyle,
         flagTextStyle,
         inputStyle,
+        modalStyle,
         disabled,
         modalDisabled,
         modalHeight,
@@ -101,6 +106,9 @@ const PhoneInput = forwardRef(
           ...refBase,
           getValue: () => phoneNumber,
           value: phoneNumber,
+          getFullPhoneNumber: () =>
+            `${country?.callingCode} ${phoneNumber}`,
+          fullPhoneNumber: `${country?.callingCode} ${phoneNumber}`,
           getSelectedCountry: () => country,
           selectedCountry: country,
           props: {
@@ -154,6 +162,23 @@ const PhoneInput = forwardRef(
       }
     }
 
+    useEffect(() => {
+      if (!countryValue && !defaultCountry) {
+        const defaultCountry = getCountryByCca2('BR');
+
+        if (ref) {
+          setCountryValue(defaultCountry);
+          updateRef('', defaultCountry);
+        } else {
+          onChangeSelectedCountry(defaultCountry);
+        }
+      } else {
+        if (ref) {
+          updateRef('', countryValue);
+        }
+      }
+    }, []);
+
     useEffect(() => {
       if (defaultCountry) {
         if (ref) {
@@ -200,21 +225,6 @@ const PhoneInput = forwardRef(
             "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 {
-        if (!countryValue && !defaultCountry) {
-          const defaultCountry = getCountryByCca2('BR');
-
-          if (ref) {
-            setCountryValue(defaultCountry);
-            updateRef('', defaultCountry);
-          } else {
-            onChangeSelectedCountry(defaultCountry);
-          }
-        } else {
-          if (ref) {
-            updateRef('', countryValue);
-          }
-        }
       }
     }, [defaultValue]);
 
@@ -335,7 +345,11 @@ const PhoneInput = forwardRef(
                 language || 'en'
               )}
               enableModalAvoiding
-              style={getCountryPickerStyle(theme, modalHeight)}
+              style={getCountryPickerStyle(
+                theme,
+                modalHeight,
+                modalStyle
+              )}
               pickerButtonOnPress={onSelect}
               onBackdropPress={() => setShow(false)}
             />

package/lib/interfaces/modalStyle.ts

@@ -0,0 +1,26 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface IModalStyle {
+  // Styles for whole modal [View]
+  modal?: StyleProp<ViewStyle>;
+  // Styles for modal backdrop [View]
+  backdrop?: StyleProp<ViewStyle>;
+  // Styles for search input [TextInput]
+  searchInput?: StyleProp<TextStyle>;
+  // Styles for the divider between the input and the countries list [View]
+  divider?: StyleProp<ViewStyle>;
+  // Styles for countries list [FlatList]
+  countriesList?: StyleProp<ViewStyle>;
+  // Styles for country button [TouchableOpacity]
+  countryButton?: StyleProp<ViewStyle>;
+  // Styles for country not found message container [View]
+  noCountryContainer?: StyleProp<ViewStyle>;
+  // Styles for country not found message [Text]
+  noCountryText?: StyleProp<TextStyle>;
+  // Flag styles [Text]
+  flag?: StyleProp<TextStyle>;
+  // Calling/Dial code styles [Text]
+  callingCode?: StyleProp<TextStyle>;
+  // Country name styles [Text]
+  countryName?: StyleProp<TextStyle>;
+}

package/lib/interfaces/phoneInputProps.ts

@@ -10,6 +10,7 @@ import { ICountry } from './country';
 import { ICountryCca2 } from './countryCca2';
 import { ILanguage } from './language';
 import { ITheme } from './theme';
+import { IModalStyle } from './modalStyle';
 import { IPhoneInputRef } from './phoneInputRef';
 
 interface IPhoneInputPropsWithoutRef extends TextInputProps {
@@ -21,6 +22,7 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   flagContainerStyle?: StyleProp<ViewStyle>;
   flagTextStyle?: StyleProp<TextStyle>;
   inputStyle?: StyleProp<TextStyle>;
+  modalStyle?: IModalStyle;
   theme?: ITheme;
   disabled?: boolean;
   modalDisabled?: boolean;
@@ -44,6 +46,7 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
   flagContainerStyle?: StyleProp<ViewStyle>;
   flagTextStyle?: StyleProp<TextStyle>;
   inputStyle?: StyleProp<TextStyle>;
+  modalStyle?: IModalStyle;
   theme?: ITheme;
   disabled?: boolean;
   modalDisabled?: boolean;

package/lib/interfaces/phoneInputRef.ts

@@ -9,6 +9,8 @@ export interface IPhoneInputRef extends TextInput {
   focus: () => void;
   getValue: () => string;
   value: string;
+  getFullPhoneNumber: () => string;
+  fullPhoneNumber: string;
   getSelectedCountry: () => ICountry;
   selectedCountry: ICountry;
 }

package/lib/utils/getStyles.js

@@ -40,20 +40,48 @@ export function getInputStyle(theme, inputStyle) {
   ];
 }
 
-export function getCountryPickerStyle(theme, height) {
-  return theme === 'dark'
-    ? {
-        ...styles.darkCountryPicker,
-        modal: {
-          ...styles.darkCountryPicker.modal,
-          height: height || '50%',
-        },
-      }
-    : {
-        ...styles.lightCountryPicker,
-        modal: {
-          ...styles.lightCountryPicker.modal,
-          height: height || '50%',
-        },
-      };
+export function getCountryPickerStyle(theme, height, modalStyle) {
+  const themeStyle =
+    theme === 'dark'
+      ? styles.darkCountryPicker
+      : styles.lightCountryPicker;
+
+  const countryPickerStyle = {
+    ...themeStyle,
+    modal: {
+      ...themeStyle.modal,
+      height: height || '50%',
+      ...modalStyle?.modal,
+    },
+    backdrop: { ...themeStyle.backdrop, ...modalStyle?.backdrop },
+    textInput: {
+      ...themeStyle.textInput,
+      ...modalStyle?.searchInput,
+    },
+    line: { ...themeStyle.line, ...modalStyle?.divider },
+    itemsList: {
+      ...themeStyle.itemsList,
+      ...modalStyle?.countriesList,
+    },
+    countryButtonStyles: {
+      ...themeStyle.countryButtonStyles,
+      ...modalStyle?.countryButton,
+    },
+    countryMessageContainer: {
+      ...themeStyle.countryMessageContainer,
+      ...modalStyle?.noCountryContainer,
+    },
+    searchMessageText: {
+      ...themeStyle.searchMessageText,
+      ...modalStyle?.noCountryText,
+    },
+    flag: { ...themeStyle.flag, ...modalStyle?.flag },
+    dialCode: { ...themeStyle.dialCode, ...modalStyle?.callingCode },
+    countryName: {
+      ...themeStyle.countryName,
+      ...modalStyle?.countryName,
+    },
+  };
+
+  return countryPickerStyle;
 }

package/package.json

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