react-native-international-phone-number 0.7.1 → 0.7.3

package/README.md

@@ -641,7 +641,7 @@ export default function App() {
 
 > Observations:
 >
-> 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
+> 1. You need to use a default value with the [e164](https://en.wikipedia.org/wiki/E.164) 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).
 
 - ### Show Only Some Countries Inside Modal:

package/lib/index.js

@@ -316,12 +316,22 @@ const PhoneInput = forwardRef(
                 {countryValue?.flag}
               </Text>
               {customCaret || (
-                <View
-                  style={getCaretStyle(
-                    theme,
-                    phoneInputStyles?.caret
-                  )}
-                />
+                <View style={phoneInputStyles?.caret}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      justifyContent: 'center',
+                      paddingTop: 4,
+                    }}
+                  >
+                    <View
+                      style={getCaretStyle(
+                        theme,
+                        phoneInputStyles?.caret
+                      )}
+                    />
+                  </View>
+                </View>
               )}
               <View
                 style={getDividerStyle(

package/lib/styles.js

@@ -24,7 +24,6 @@ const flagContainerBase = {
 const caretBase = {
   width: 0,
   height: 0,
-  marginTop: 4,
   borderWidth: 7,
   borderBottomWidth: 0,
   borderLeftColor: 'transparent',
@@ -74,7 +73,10 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontSize: 20,
     marginRight: 6,
-    fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+    fontFamily:
+      Platform.OS === 'web' && navigator?.userAgent?.includes('Win')
+        ? 'TwemojiMozilla'
+        : 'System',
   },
   lightCaret: {
     ...caretBase,
@@ -137,7 +139,10 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+      fontFamily:
+        Platform.OS === 'web' && navigator?.userAgent?.includes('Win')
+          ? 'TwemojiMozilla'
+          : 'System',
     },
     dialCode: {},
     countryName: {},
@@ -173,7 +178,10 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+      fontFamily:
+        Platform.OS === 'web' && navigator?.userAgent?.includes('Win')
+          ? 'TwemojiMozilla'
+          : 'System',
     },
     dialCode: {
       color: '#F3F3F3',

package/lib/utils/getStyles.js

@@ -35,20 +35,17 @@ export function getFlagStyle(flagStyle) {
 export function getCaretStyle(theme, caretStyle) {
   return [
     theme === 'dark' ? styles.darkCaret : styles.lightCaret,
-    caretStyle
+    caretStyle?.color !== undefined
       ? {
-          borderTopColor: caretStyle?.color
-            ? caretStyle?.color
-            : theme === 'dark'
-            ? styles.darkCaret.borderTopColor
-            : styles.lightCaret.borderTopColor,
-          borderWidth: caretStyle?.fontSize
-            ? caretStyle?.fontSize * 0.45
-            : theme === 'dark'
-            ? styles.darkCaret.borderWidth
-            : styles.lightCaret.borderWidth,
+          borderTopColor: caretStyle?.color,
         }
       : {},
+    caretStyle?.fontSize !== undefined
+      ? { borderWidth: caretStyle?.fontSize * 0.45 }
+      : {},
+    caretStyle && caretStyle?.display === 'none'
+      ? { display: 'none', borderWidth: 0 }
+      : {},
   ];
 }
 

package/package.json

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