react-native-international-phone-number 0.7.1 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +16 -6
- package/lib/styles.js +12 -4
- package/lib/utils/getStyles.js +8 -11
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -316,12 +316,22 @@ const PhoneInput = forwardRef(
|
|
|
316
316
|
{countryValue?.flag}
|
|
317
317
|
</Text>
|
|
318
318
|
{customCaret || (
|
|
319
|
-
<View
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
319
|
+
<View style={phoneInputStyles?.caret}>
|
|
320
|
+
<View
|
|
321
|
+
style={{
|
|
322
|
+
flexDirection: 'row',
|
|
323
|
+
justifyContent: 'center',
|
|
324
|
+
paddingTop: 4,
|
|
325
|
+
}}
|
|
326
|
+
>
|
|
327
|
+
<View
|
|
328
|
+
style={getCaretStyle(
|
|
329
|
+
theme,
|
|
330
|
+
phoneInputStyles?.caret
|
|
331
|
+
)}
|
|
332
|
+
/>
|
|
333
|
+
</View>
|
|
334
|
+
</View>
|
|
325
335
|
)}
|
|
326
336
|
<View
|
|
327
337
|
style={getDividerStyle(
|
package/lib/styles.js
CHANGED
|
@@ -24,7 +24,6 @@ const flagContainerBase = {
|
|
|
24
24
|
const caretBase = {
|
|
25
25
|
width: 0,
|
|
26
26
|
height: 0,
|
|
27
|
-
marginTop: 4,
|
|
28
27
|
borderWidth: 7,
|
|
29
28
|
borderBottomWidth: 0,
|
|
30
29
|
borderLeftColor: 'transparent',
|
|
@@ -74,7 +73,10 @@ const styles = StyleSheet.create({
|
|
|
74
73
|
color: '#FFFFFF',
|
|
75
74
|
fontSize: 20,
|
|
76
75
|
marginRight: 6,
|
|
77
|
-
fontFamily:
|
|
76
|
+
fontFamily:
|
|
77
|
+
Platform.OS === 'web' && navigator.userAgent.includes('Win')
|
|
78
|
+
? 'TwemojiMozilla'
|
|
79
|
+
: 'System',
|
|
78
80
|
},
|
|
79
81
|
lightCaret: {
|
|
80
82
|
...caretBase,
|
|
@@ -137,7 +139,10 @@ const styles = StyleSheet.create({
|
|
|
137
139
|
flag: {
|
|
138
140
|
color: '#FFFFFF',
|
|
139
141
|
fontSize: 20,
|
|
140
|
-
fontFamily:
|
|
142
|
+
fontFamily:
|
|
143
|
+
Platform.OS === 'web' && navigator.userAgent.includes('Win')
|
|
144
|
+
? 'TwemojiMozilla'
|
|
145
|
+
: 'System',
|
|
141
146
|
},
|
|
142
147
|
dialCode: {},
|
|
143
148
|
countryName: {},
|
|
@@ -173,7 +178,10 @@ const styles = StyleSheet.create({
|
|
|
173
178
|
flag: {
|
|
174
179
|
color: '#FFFFFF',
|
|
175
180
|
fontSize: 20,
|
|
176
|
-
fontFamily:
|
|
181
|
+
fontFamily:
|
|
182
|
+
Platform.OS === 'web' && navigator.userAgent.includes('Win')
|
|
183
|
+
? 'TwemojiMozilla'
|
|
184
|
+
: 'System',
|
|
177
185
|
},
|
|
178
186
|
dialCode: {
|
|
179
187
|
color: '#F3F3F3',
|
package/lib/utils/getStyles.js
CHANGED
|
@@ -35,20 +35,17 @@ export function getFlagStyle(flagStyle) {
|
|
|
35
35
|
export function getCaretStyle(theme, caretStyle) {
|
|
36
36
|
return [
|
|
37
37
|
theme === 'dark' ? styles.darkCaret : styles.lightCaret,
|
|
38
|
-
caretStyle
|
|
38
|
+
caretStyle?.color !== undefined
|
|
39
39
|
? {
|
|
40
|
-
borderTopColor: caretStyle?.color
|
|
41
|
-
? caretStyle?.color
|
|
42
|
-
: theme === 'dark'
|
|
43
|
-
? styles.darkCaret.borderTopColor
|
|
44
|
-
: styles.lightCaret.borderTopColor,
|
|
45
|
-
borderWidth: caretStyle?.fontSize
|
|
46
|
-
? caretStyle?.fontSize * 0.45
|
|
47
|
-
: theme === 'dark'
|
|
48
|
-
? styles.darkCaret.borderWidth
|
|
49
|
-
: styles.lightCaret.borderWidth,
|
|
40
|
+
borderTopColor: caretStyle?.color,
|
|
50
41
|
}
|
|
51
42
|
: {},
|
|
43
|
+
caretStyle?.fontSize !== undefined
|
|
44
|
+
? { borderWidth: caretStyle?.fontSize * 0.45 }
|
|
45
|
+
: {},
|
|
46
|
+
caretStyle && caretStyle?.display === 'none'
|
|
47
|
+
? { display: 'none', borderWidth: 0 }
|
|
48
|
+
: {},
|
|
52
49
|
];
|
|
53
50
|
}
|
|
54
51
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-international-phone-number",
|
|
3
3
|
"author": "AstrOOnauta (https://github.com/AstrOOnauta)",
|
|
4
|
-
"version": "0.7.
|
|
4
|
+
"version": "0.7.2",
|
|
5
5
|
"description": "International mobile phone input component with mask for React Native",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|