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

package/README.md

@@ -1,7 +1,7 @@
 <br>
 
 <div align = "center">
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/preview.png" alt="React Native International Phone Number Input Lib preview">
+  <img src="lib/assets/images/preview.png" alt="React Native International Phone Number Input Lib preview">
 </div>
 
 <br>
@@ -24,7 +24,7 @@
   <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/pulls">
     <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number?style=flat-square&color=blue"/>
   </a>
-  <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/LICENSE.md">
+  <a href="LICENSE.md">
     <img src="https://img.shields.io/:license-isc-yellow.svg?style=flat-square"/>
   </a>
 </p>
@@ -45,6 +45,7 @@
 
 - [Old Versions](#old-versions)
 - [Installation](#installation)
+- [Additional Config to Web](#additional-config-to-web)
 - [Features](#features)
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
@@ -76,6 +77,7 @@
 ## Old Versions
 
 - [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
+- [Version 0.5.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.5.x)
 
 <br>
 
@@ -91,18 +93,42 @@ OR
 $ yarn add react-native-international-phone-number
 ```
 
-AND
+## Additional config to `Web`
 
-> Update your `metro.config.js` file:
->
-> ```bash
-> module.exports = {
->  ...
->  resolver: {
->    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
->  },
-> };
-> ```
+- Using React Native CLI:
+
+create a `react-native.config.js` file at the root of your react-native project with:
+
+```bash
+ module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: [
+    './node_modules/react-native-international-phone-number/assets/fonts',
+  ],
+ };
+```
+
+- Using Expo:
+
+1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
+2. Initialize the `expo-font`:
+
+```bash
+ import { useFonts } from 'expo-font';
+
+ ...
+
+ useFonts({
+    'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/assets/fonts/TwemojiMozilla.ttf'),
+  });
+
+ ...
+```
+
+> Observation: _you need to recompile your project after adding new fonts._
 
 <br>
 
@@ -395,6 +421,8 @@ export default function App() {
 
 ## Customizing lib
 
+<img src="lib/assets/images/custom-styles.png" alt="Custom lib styles">
+
 - ### Dark Mode:
 
 ```jsx
@@ -408,33 +436,71 @@ export default function App() {
 
 - ### Custom Lib Styles:
 
-<div>
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png" alt="Lib with custom styles">
-</div>
-
 ```jsx
   ...
   <PhoneInput
     ...
-    inputStyle={{
-      color: '#F3F3F3',
-    }}
-    containerStyle={{
-      backgroundColor: '#575757',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: '#F3F3F3',
-    }}
-    flagContainerStyle={{
-      borderTopLeftRadius: 7,
-      borderBottomLeftRadius: 7,
-      backgroundColor: '#808080',
-      justifyContent: 'center',
-    }}
-    flagTextStyle={{
+    phoneInputStyles={{
+      container: {
+        backgroundColor: '#575757',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: '#F3F3F3',
+      },
+      flagContainer: {
+        borderTopLeftRadius: 7,
+        borderBottomLeftRadius: 7,
+        backgroundColor: '#808080',
+        justifyContent: 'center',
+      },
+      flag: {}
+      callingCode: {
         fontSize: 16,
         fontWeight: 'bold',
         color: '#F3F3F3',
+      },
+      input: {
+        color: '#F3F3F3',
+      },
+    }}
+    modalStyles={{
+      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',
+      },
     }}
   />
   ...
@@ -537,34 +603,32 @@ export default function App() {
 
 </br>
 
-## Component Props ([PhoneInputProps](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
+## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
 
-- `language?:` [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts);
+- `language?:` [ILanguage](lib/interfaces/language.ts);
 - `customMask?:` string[];
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;
-- `selectedCountry?:` [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;
+- `selectedCountry?:` [ICountry](lib/interfaces/country.ts);
+- `onChangeSelectedCountry?:` (country: [ICountry](lib/interfaces/country.ts)) => void;
 - `disabled?:` boolean;
 - `modalDisabled?:` boolean;
 - `modalHeight?:` number | string;
-- `theme?:` [ITheme](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/theme.ts);
-- `containerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
-- `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)>;
-- `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)>
+- `theme?:` [ITheme](lib/interfaces/theme.ts);
+- `modalStyles?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
+- `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
+- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
 
 <br>
 
 ## Functions
 
-- `getAllCountries:` () => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[];
-- `getCountriesByCallingCode:` (callingCode: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
-- `getCountryByCca2:` (cca2: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
-- `getCountriesByName:` (name: string, language: [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts)) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
-- `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
+- `getAllCountries:` () => [ICountry](lib/interfaces/country.ts)[];
+- `getCountriesByCallingCode:` (callingCode: string) => [ICountry](lib/interfaces/country.ts)[] | undefined;
+- `getCountryByCca2:` (cca2: string) => [ICountry](lib/interfaces/country.ts) | undefined;
+- `getCountriesByName:` (name: string, language: [ILanguage](lib/interfaces/language.ts)) => [ICountry](lib/interfaces/country.ts)[] | undefined;
+- `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](lib/interfaces/country.ts) | undefined;
 
 </br>
 
@@ -611,7 +675,7 @@ export default function App() {
 
 ## License
 
-[ISC](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/LICENSE.md)
+[ISC](LICENSE.md)
 
 <br>
 

package/lib/index.js

@@ -12,7 +12,6 @@ import {
 } from 'react-native';
 import { CountryPicker } from 'react-native-country-codes-picker';
 
-import styles from './styles';
 import getInputMask from './utils/getInputMask';
 import getAllCountries from './utils/getAllCountries';
 import getCountriesByName from './utils/getCountriesByName';
@@ -28,6 +27,7 @@ import {
   getContainerStyle,
   getCountryPickerStyle,
   getFlagContainerStyle,
+  getFlagStyle,
   getFlagTextStyle,
   getInputStyle,
 } from './utils/getStyles';
@@ -40,10 +40,8 @@ const PhoneInput = forwardRef(
       placeholder,
       placeholderTextColor,
       selectionColor,
-      containerStyle,
-      flagContainerStyle,
-      flagTextStyle,
-      inputStyle,
+      phoneInputStyle,
+      modalStyle,
       disabled,
       modalDisabled,
       modalHeight,
@@ -70,6 +68,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: {
@@ -78,10 +79,8 @@ const PhoneInput = forwardRef(
         placeholder,
         placeholderTextColor,
         selectionColor,
-        containerStyle,
-        flagContainerStyle,
-        flagTextStyle,
-        inputStyle,
+        phoneInputStyle,
+        modalStyle,
         disabled,
         modalDisabled,
         modalHeight,
@@ -101,6 +100,9 @@ const PhoneInput = forwardRef(
           ...refBase,
           getValue: () => phoneNumber,
           value: phoneNumber,
+          getFullPhoneNumber: () =>
+            `${country?.callingCode} ${phoneNumber}`,
+          fullPhoneNumber: `${country?.callingCode} ${phoneNumber}`,
           getSelectedCountry: () => country,
           selectedCountry: country,
           props: {
@@ -154,6 +156,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 +219,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]);
 
@@ -286,22 +290,36 @@ const PhoneInput = forwardRef(
       return (
         <>
           <View
-            style={getContainerStyle(theme, containerStyle, disabled)}
+            style={getContainerStyle(
+              theme,
+              phoneInputStyle?.container,
+              disabled
+            )}
           >
             <TouchableOpacity
               activeOpacity={disabled || modalDisabled ? 1 : 0.6}
               onPress={() =>
                 disabled || modalDisabled ? null : setShow(true)
               }
-              style={getFlagContainerStyle(theme, flagContainerStyle)}
+              style={getFlagContainerStyle(
+                theme,
+                phoneInputStyle?.flagContainer
+              )}
             >
-              <Text style={styles.flag}>{countryValue?.flag}</Text>
-              <Text style={getFlagTextStyle(theme, flagTextStyle)}>
+              <Text style={getFlagStyle(phoneInputStyle?.flag)}>
+                {countryValue?.flag}
+              </Text>
+              <Text
+                style={getFlagTextStyle(
+                  theme,
+                  phoneInputStyle?.callingCode
+                )}
+              >
                 {countryValue?.callingCode}
               </Text>
             </TouchableOpacity>
             <TextInput
-              style={getInputStyle(theme, inputStyle)}
+              style={getInputStyle(theme, phoneInputStyle?.input)}
               placeholder={
                 placeholder ||
                 getPhoneNumberInputPlaceholder(language || 'en')
@@ -335,7 +353,11 @@ const PhoneInput = forwardRef(
                 language || 'en'
               )}
               enableModalAvoiding
-              style={getCountryPickerStyle(theme, modalHeight)}
+              style={getCountryPickerStyle(
+                theme,
+                modalHeight,
+                modalStyle
+              )}
               pickerButtonOnPress={onSelect}
               onBackdropPress={() => setShow(false)}
             />

package/lib/interfaces/modalStyles.ts

@@ -0,0 +1,26 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface IModalStyles {
+  // 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

@@ -1,15 +1,12 @@
 import { Ref } from 'react';
-import {
-  StyleProp,
-  TextInputProps,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
+import { TextInputProps } from 'react-native';
 
 import { ICountry } from './country';
 import { ICountryCca2 } from './countryCca2';
 import { ILanguage } from './language';
 import { ITheme } from './theme';
+import { IModalStyles } from './modalStyles';
+import { IPhoneInputStyles } from './phoneInputStyles';
 import { IPhoneInputRef } from './phoneInputRef';
 
 interface IPhoneInputPropsWithoutRef extends TextInputProps {
@@ -17,10 +14,8 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   selectionColor?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  flagContainerStyle?: StyleProp<ViewStyle>;
-  flagTextStyle?: StyleProp<TextStyle>;
-  inputStyle?: StyleProp<TextStyle>;
+  phoneInputStyle?: IPhoneInputStyles;
+  modalStyle?: IModalStyles;
   theme?: ITheme;
   disabled?: boolean;
   modalDisabled?: boolean;
@@ -40,10 +35,8 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   selectionColor?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  flagContainerStyle?: StyleProp<ViewStyle>;
-  flagTextStyle?: StyleProp<TextStyle>;
-  inputStyle?: StyleProp<TextStyle>;
+  phoneInputStyle?: IPhoneInputStyles;
+  modalStyle?: IModalStyles;
   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/interfaces/phoneInputStyles.ts

@@ -0,0 +1,14 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface IPhoneInputStyles {
+  // Styles for whole modal [View]
+  container?: StyleProp<ViewStyle>;
+  // Styles for modal backdrop [View]
+  flagContainer?: StyleProp<ViewStyle>;
+  // Flag styles [Text]
+  flag?: StyleProp<TextStyle>;
+  // Calling/Dial code styles [Text]
+  callingCode?: StyleProp<TextStyle>;
+  // Styles for search input [TextInput]
+  input?: StyleProp<TextStyle>;
+}

package/lib/styles.js

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontSize: 20,
     marginRight: 10,
+    fontFamily: 'TwemojiMozilla',
   },
   lightFlagText: {
     ...flagTextBase,
@@ -101,6 +102,8 @@ const styles = StyleSheet.create({
     countryMessageContainer: {},
     flag: {
       color: '#FFFFFF',
+      fontSize: 20,
+      fontFamily: 'TwemojiMozilla',
     },
     dialCode: {},
     countryName: {},
@@ -136,6 +139,7 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
+      fontFamily: 'TwemojiMozilla',
     },
     dialCode: {
       color: '#F3F3F3',

package/lib/utils/getStyles.js

@@ -26,6 +26,10 @@ export function getFlagContainerStyle(theme, flagContainerStyle) {
   ];
 }
 
+export function getFlagStyle(flagStyle) {
+  return [styles.flag, flagStyle ? flagStyle : {}];
+}
+
 export function getFlagTextStyle(theme, flagTextStyle) {
   return [
     theme === 'dark' ? styles.darkFlagText : styles.lightFlagText,
@@ -40,20 +44,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.6.0",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",