react-native-international-phone-number 0.6.0 → 0.6.1
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/README.md +30 -3
- package/lib/constants/countries.js +59 -20
- package/lib/index.js +6 -11
- package/lib/interfaces/phoneInputProps.ts +4 -0
- package/lib/utils/getInputMask.js +10 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -66,6 +66,8 @@
|
|
|
66
66
|
- [Custom Phone Mask](#custom-phone-mask)
|
|
67
67
|
- [Custom Default Flag/Country](#custom-default-flagcountry)
|
|
68
68
|
- [Default Phone Number Value](#default-phone-number-value)
|
|
69
|
+
- [Show Only Some Countries Inside Modal](#show-only-some-countries)
|
|
70
|
+
- [Exclude some countries Inside Modal](#exclude-some-countries)
|
|
69
71
|
- [Lib Props](#component-props-phoneinputprops)
|
|
70
72
|
- [Lib Functions](#functions)
|
|
71
73
|
- [Supported languages](#🎌-supported-languages-🎌)
|
|
@@ -134,7 +136,7 @@ create a `react-native.config.js` file at the root of your react-native project
|
|
|
134
136
|
|
|
135
137
|
## Features
|
|
136
138
|
|
|
137
|
-
- 📱 Works with iOS, Android (Cross-platform) and
|
|
139
|
+
- 📱 Works with iOS, Android (Cross-platform), Expo and Web;
|
|
138
140
|
- 🎨 Lib with UI customizable;
|
|
139
141
|
- 🌎 Phone Input Mask according with the selected country;
|
|
140
142
|
- 👨💻 Functional and class component support;
|
|
@@ -453,7 +455,7 @@ export default function App() {
|
|
|
453
455
|
backgroundColor: '#808080',
|
|
454
456
|
justifyContent: 'center',
|
|
455
457
|
},
|
|
456
|
-
flag: {}
|
|
458
|
+
flag: {},
|
|
457
459
|
callingCode: {
|
|
458
460
|
fontSize: 16,
|
|
459
461
|
fontWeight: 'bold',
|
|
@@ -601,6 +603,28 @@ export default function App() {
|
|
|
601
603
|
> 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
|
|
602
604
|
> 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).
|
|
603
605
|
|
|
606
|
+
- ### Show Only Some Countries Inside Modal:
|
|
607
|
+
|
|
608
|
+
```jsx
|
|
609
|
+
...
|
|
610
|
+
<PhoneInput
|
|
611
|
+
...
|
|
612
|
+
showOnly={['BR', 'PT', 'CA', 'US']}
|
|
613
|
+
/>
|
|
614
|
+
...
|
|
615
|
+
```
|
|
616
|
+
|
|
617
|
+
- ### Exclude Some Countries Inside Modal:
|
|
618
|
+
|
|
619
|
+
```jsx
|
|
620
|
+
...
|
|
621
|
+
<PhoneInput
|
|
622
|
+
...
|
|
623
|
+
excludedCountries={['BR', 'PT', 'CA', 'US']}
|
|
624
|
+
/>
|
|
625
|
+
...
|
|
626
|
+
```
|
|
627
|
+
|
|
604
628
|
</br>
|
|
605
629
|
|
|
606
630
|
## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
|
|
@@ -610,13 +634,16 @@ export default function App() {
|
|
|
610
634
|
- `defaultValue?:` string;
|
|
611
635
|
- `value?:` string;
|
|
612
636
|
- `onChangePhoneNumber?:` (phoneNumber: string) => void;
|
|
637
|
+
- `defaultCountry?:` [ICountryCca2](lib/interfaces/countryCca2.ts);
|
|
613
638
|
- `selectedCountry?:` [ICountry](lib/interfaces/country.ts);
|
|
614
639
|
- `onChangeSelectedCountry?:` (country: [ICountry](lib/interfaces/country.ts)) => void;
|
|
640
|
+
- `showOnly?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
|
|
641
|
+
- `excludedCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
|
|
615
642
|
- `disabled?:` boolean;
|
|
616
643
|
- `modalDisabled?:` boolean;
|
|
617
644
|
- `modalHeight?:` number | string;
|
|
618
645
|
- `theme?:` [ITheme](lib/interfaces/theme.ts);
|
|
619
|
-
- `
|
|
646
|
+
- `phoneInputStyle?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
|
|
620
647
|
- `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
|
|
621
648
|
- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
|
|
622
649
|
|
|
@@ -277,7 +277,13 @@ export const countries = [
|
|
|
277
277
|
ua: 'Антарктида',
|
|
278
278
|
zh: '南極洲',
|
|
279
279
|
},
|
|
280
|
-
phoneMasks: [
|
|
280
|
+
phoneMasks: [
|
|
281
|
+
'10 ####',
|
|
282
|
+
'11 ####',
|
|
283
|
+
'12 ####',
|
|
284
|
+
'13 ####',
|
|
285
|
+
'14 ####',
|
|
286
|
+
],
|
|
281
287
|
},
|
|
282
288
|
{
|
|
283
289
|
callingCode: '+54',
|
|
@@ -389,7 +395,12 @@ export const countries = [
|
|
|
389
395
|
ua: 'Австралія',
|
|
390
396
|
zh: '澳大利亞',
|
|
391
397
|
},
|
|
392
|
-
phoneMasks: [
|
|
398
|
+
phoneMasks: [
|
|
399
|
+
'2 #### ####',
|
|
400
|
+
'3 #### ####',
|
|
401
|
+
'4## ### ###',
|
|
402
|
+
'7 #### ####',
|
|
403
|
+
],
|
|
393
404
|
},
|
|
394
405
|
{
|
|
395
406
|
callingCode: '+297',
|
|
@@ -445,7 +456,7 @@ export const countries = [
|
|
|
445
456
|
ua: 'Аландські острови',
|
|
446
457
|
zh: '奧蘭群島',
|
|
447
458
|
},
|
|
448
|
-
phoneMasks: ['
|
|
459
|
+
phoneMasks: ['18 ### ##', '18 ## ## ##'],
|
|
449
460
|
},
|
|
450
461
|
{
|
|
451
462
|
callingCode: '+994',
|
|
@@ -753,7 +764,7 @@ export const countries = [
|
|
|
753
764
|
ua: 'Сен-Бартелемі',
|
|
754
765
|
zh: '聖巴托洛繆島',
|
|
755
766
|
},
|
|
756
|
-
phoneMasks: ['
|
|
767
|
+
phoneMasks: ['690 ## ## ##'],
|
|
757
768
|
},
|
|
758
769
|
{
|
|
759
770
|
callingCode: '+1',
|
|
@@ -1112,7 +1123,7 @@ export const countries = [
|
|
|
1112
1123
|
ua: 'Кокосові (Кілінг) острови',
|
|
1113
1124
|
zh: '科科斯(基林)群島',
|
|
1114
1125
|
},
|
|
1115
|
-
phoneMasks: ['
|
|
1126
|
+
phoneMasks: ['8 9162 ####'],
|
|
1116
1127
|
},
|
|
1117
1128
|
{
|
|
1118
1129
|
callingCode: '+243',
|
|
@@ -1504,7 +1515,7 @@ export const countries = [
|
|
|
1504
1515
|
ua: 'Острів Різдва',
|
|
1505
1516
|
zh: '聖誕島',
|
|
1506
1517
|
},
|
|
1507
|
-
phoneMasks: ['
|
|
1518
|
+
phoneMasks: ['8 9164 ####'],
|
|
1508
1519
|
},
|
|
1509
1520
|
{
|
|
1510
1521
|
callingCode: '+357',
|
|
@@ -1931,7 +1942,7 @@ export const countries = [
|
|
|
1931
1942
|
ua: 'Фінляндія',
|
|
1932
1943
|
zh: '芬蘭',
|
|
1933
1944
|
},
|
|
1934
|
-
phoneMasks: ['### ### ## ##'],
|
|
1945
|
+
phoneMasks: ['4## ### ## ##', '5## ### ## ##'],
|
|
1935
1946
|
},
|
|
1936
1947
|
{
|
|
1937
1948
|
callingCode: '+679',
|
|
@@ -1987,7 +1998,7 @@ export const countries = [
|
|
|
1987
1998
|
ua: 'Фолклендські острови (Мальвінські острови)',
|
|
1988
1999
|
zh: '福 克蘭群島(馬爾維納斯)',
|
|
1989
2000
|
},
|
|
1990
|
-
phoneMasks: ['
|
|
2001
|
+
phoneMasks: ['5# ###', '6# ###'],
|
|
1991
2002
|
},
|
|
1992
2003
|
{
|
|
1993
2004
|
callingCode: '+691',
|
|
@@ -2127,7 +2138,26 @@ export const countries = [
|
|
|
2127
2138
|
ua: "Об'єднане Королівство",
|
|
2128
2139
|
zh: '英國',
|
|
2129
2140
|
},
|
|
2130
|
-
phoneMasks: [
|
|
2141
|
+
phoneMasks: [
|
|
2142
|
+
'160## ####',
|
|
2143
|
+
'169## ####',
|
|
2144
|
+
'160## #####',
|
|
2145
|
+
'169## #####',
|
|
2146
|
+
'2# #### ####',
|
|
2147
|
+
'11# ### ####',
|
|
2148
|
+
'12# ### ####',
|
|
2149
|
+
'13# ### ####',
|
|
2150
|
+
'141 ### ####',
|
|
2151
|
+
'151 ### ####',
|
|
2152
|
+
'161 ### ####',
|
|
2153
|
+
'12## ## ####',
|
|
2154
|
+
'13## ## ####',
|
|
2155
|
+
'1642 ## ####',
|
|
2156
|
+
'17## ## ####',
|
|
2157
|
+
'18## ## ####',
|
|
2158
|
+
'19## ## ####',
|
|
2159
|
+
'1539# ## ###',
|
|
2160
|
+
],
|
|
2131
2161
|
},
|
|
2132
2162
|
{
|
|
2133
2163
|
callingCode: '+1',
|
|
@@ -2239,7 +2269,7 @@ export const countries = [
|
|
|
2239
2269
|
ua: 'Гернсі',
|
|
2240
2270
|
zh: '根西島',
|
|
2241
2271
|
},
|
|
2242
|
-
phoneMasks: ['
|
|
2272
|
+
phoneMasks: ['1481 ######'],
|
|
2243
2273
|
},
|
|
2244
2274
|
{
|
|
2245
2275
|
callingCode: '+233',
|
|
@@ -2407,7 +2437,7 @@ export const countries = [
|
|
|
2407
2437
|
ua: 'Гваделупа',
|
|
2408
2438
|
zh: '瓜德羅普島',
|
|
2409
2439
|
},
|
|
2410
|
-
phoneMasks: ['
|
|
2440
|
+
phoneMasks: ['69# ## ## ##'],
|
|
2411
2441
|
},
|
|
2412
2442
|
{
|
|
2413
2443
|
callingCode: '+240',
|
|
@@ -2491,7 +2521,7 @@ export const countries = [
|
|
|
2491
2521
|
ua: 'Південна Джорджія та Південні Сандвічеві острови',
|
|
2492
2522
|
zh: '南喬治亞島和南桑威奇群島',
|
|
2493
2523
|
},
|
|
2494
|
-
phoneMasks: ['
|
|
2524
|
+
phoneMasks: ['4####'],
|
|
2495
2525
|
},
|
|
2496
2526
|
{
|
|
2497
2527
|
callingCode: '+502',
|
|
@@ -2861,7 +2891,7 @@ export const countries = [
|
|
|
2861
2891
|
ua: 'Острів Мен',
|
|
2862
2892
|
zh: '馬恩島',
|
|
2863
2893
|
},
|
|
2864
|
-
phoneMasks: ['
|
|
2894
|
+
phoneMasks: ['1624 ######'],
|
|
2865
2895
|
},
|
|
2866
2896
|
{
|
|
2867
2897
|
callingCode: '+91',
|
|
@@ -3057,7 +3087,7 @@ export const countries = [
|
|
|
3057
3087
|
ua: 'Джерсі',
|
|
3058
3088
|
zh: '球衣',
|
|
3059
3089
|
},
|
|
3060
|
-
phoneMasks: ['
|
|
3090
|
+
phoneMasks: ['1534 ######'],
|
|
3061
3091
|
},
|
|
3062
3092
|
{
|
|
3063
3093
|
callingCode: '+1',
|
|
@@ -3903,7 +3933,7 @@ export const countries = [
|
|
|
3903
3933
|
ua: 'Святий Мартін',
|
|
3904
3934
|
zh: '聖馬丁',
|
|
3905
3935
|
},
|
|
3906
|
-
phoneMasks: ['
|
|
3936
|
+
phoneMasks: ['690 ## ## ##'],
|
|
3907
3937
|
},
|
|
3908
3938
|
{
|
|
3909
3939
|
callingCode: '+261',
|
|
@@ -4519,7 +4549,7 @@ export const countries = [
|
|
|
4519
4549
|
ua: 'Острів Норфолк',
|
|
4520
4550
|
zh: '諾福克島',
|
|
4521
4551
|
},
|
|
4522
|
-
phoneMasks: ['#
|
|
4552
|
+
phoneMasks: ['3 2# ###', '3 5# ###'],
|
|
4523
4553
|
},
|
|
4524
4554
|
{
|
|
4525
4555
|
callingCode: '+234',
|
|
@@ -4631,7 +4661,16 @@ export const countries = [
|
|
|
4631
4661
|
ua: 'Норвегія',
|
|
4632
4662
|
zh: '挪威',
|
|
4633
4663
|
},
|
|
4634
|
-
phoneMasks: [
|
|
4664
|
+
phoneMasks: [
|
|
4665
|
+
'4## ## ###',
|
|
4666
|
+
'9## ## ###',
|
|
4667
|
+
'2# ## ## ##',
|
|
4668
|
+
'3# ## ## ##',
|
|
4669
|
+
'5# ## ## ##',
|
|
4670
|
+
'6# ## ## ##',
|
|
4671
|
+
'7# ## ## ##',
|
|
4672
|
+
'2# ## ## ##',
|
|
4673
|
+
],
|
|
4635
4674
|
},
|
|
4636
4675
|
{
|
|
4637
4676
|
callingCode: '+977',
|
|
@@ -5219,7 +5258,7 @@ export const countries = [
|
|
|
5219
5258
|
ua: 'Реюньйон',
|
|
5220
5259
|
zh: '團圓',
|
|
5221
5260
|
},
|
|
5222
|
-
phoneMasks: ['
|
|
5261
|
+
phoneMasks: ['6## ## ## ##'],
|
|
5223
5262
|
},
|
|
5224
5263
|
{
|
|
5225
5264
|
callingCode: '+40',
|
|
@@ -5583,7 +5622,7 @@ export const countries = [
|
|
|
5583
5622
|
ua: 'Шпіцберген та Ян Маєн',
|
|
5584
5623
|
zh: '斯瓦爾巴和揚· 馬延',
|
|
5585
5624
|
},
|
|
5586
|
-
phoneMasks: ['
|
|
5625
|
+
phoneMasks: ['79 ## ## ##'],
|
|
5587
5626
|
},
|
|
5588
5627
|
{
|
|
5589
5628
|
callingCode: '+421',
|
|
@@ -7074,7 +7113,7 @@ export const countries = [
|
|
|
7074
7113
|
ua: 'Майотта',
|
|
7075
7114
|
zh: '馬約特島',
|
|
7076
7115
|
},
|
|
7077
|
-
phoneMasks: ['
|
|
7116
|
+
phoneMasks: ['269 ### ###', '639 ### ###'],
|
|
7078
7117
|
},
|
|
7079
7118
|
{
|
|
7080
7119
|
callingCode: '+27',
|
package/lib/index.js
CHANGED
|
@@ -51,6 +51,8 @@ const PhoneInput = forwardRef(
|
|
|
51
51
|
selectedCountry,
|
|
52
52
|
onChangeSelectedCountry,
|
|
53
53
|
customMask,
|
|
54
|
+
showOnly,
|
|
55
|
+
excludedCountries,
|
|
54
56
|
...rest
|
|
55
57
|
},
|
|
56
58
|
ref
|
|
@@ -90,6 +92,8 @@ const PhoneInput = forwardRef(
|
|
|
90
92
|
selectedCountry,
|
|
91
93
|
onChangeSelectedCountry,
|
|
92
94
|
customMask,
|
|
95
|
+
showOnly,
|
|
96
|
+
excludedCountries,
|
|
93
97
|
...rest,
|
|
94
98
|
},
|
|
95
99
|
};
|
|
@@ -245,17 +249,6 @@ const PhoneInput = forwardRef(
|
|
|
245
249
|
defaultValue.replace(/\D/g, '').length +
|
|
246
250
|
callingCode.length
|
|
247
251
|
);
|
|
248
|
-
} else if (
|
|
249
|
-
callingCode === '+39' &&
|
|
250
|
-
countryValue.cca2 === 'VA'
|
|
251
|
-
) {
|
|
252
|
-
phoneNumber = defaultValue
|
|
253
|
-
.replace(/\s/g, '')
|
|
254
|
-
.substring(
|
|
255
|
-
callingCode.length + 5,
|
|
256
|
-
defaultValue.replace(/\D/g, '').length +
|
|
257
|
-
callingCode.length
|
|
258
|
-
);
|
|
259
252
|
} else {
|
|
260
253
|
phoneNumber = defaultValue
|
|
261
254
|
.replace(/\s/g, '')
|
|
@@ -360,6 +353,8 @@ const PhoneInput = forwardRef(
|
|
|
360
353
|
)}
|
|
361
354
|
pickerButtonOnPress={onSelect}
|
|
362
355
|
onBackdropPress={() => setShow(false)}
|
|
356
|
+
showOnly={showOnly}
|
|
357
|
+
excludedCountries={excludedCountries}
|
|
363
358
|
/>
|
|
364
359
|
) : null}
|
|
365
360
|
</>
|
|
@@ -27,6 +27,8 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
|
|
|
27
27
|
selectedCountry: ICountry | undefined | null;
|
|
28
28
|
onChangeSelectedCountry: (country: ICountry) => void;
|
|
29
29
|
customMask?: Array<string>;
|
|
30
|
+
showOnly?: Array<ICountryCca2>;
|
|
31
|
+
excludedCountries?: Array<ICountryCca2>;
|
|
30
32
|
ref?: never;
|
|
31
33
|
}
|
|
32
34
|
|
|
@@ -48,6 +50,8 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
|
|
|
48
50
|
selectedCountry?: never;
|
|
49
51
|
onChangeSelectedCountry?: never;
|
|
50
52
|
customMask?: Array<string>;
|
|
53
|
+
showOnly?: Array<ICountryCca2>;
|
|
54
|
+
excludedCountries?: Array<ICountryCca2>;
|
|
51
55
|
ref: Ref<IPhoneInputRef>;
|
|
52
56
|
}
|
|
53
57
|
|
|
@@ -13,10 +13,16 @@ export default function getInputMask(
|
|
|
13
13
|
const phoneMask =
|
|
14
14
|
(Array.isArray(customMask) && customMask) || item.phoneMasks;
|
|
15
15
|
|
|
16
|
-
if (
|
|
16
|
+
if (
|
|
17
|
+
item.cca2 === cca2 &&
|
|
18
|
+
callingCode &&
|
|
19
|
+
callingCode.includes(newCode)
|
|
20
|
+
) {
|
|
17
21
|
if (phoneMask.length === 1) {
|
|
18
|
-
if (
|
|
22
|
+
if (newCode === '+1' && cca2 !== 'CA' && cca2 !== 'US') {
|
|
19
23
|
matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
|
|
24
|
+
} else {
|
|
25
|
+
matrix = phoneMask[0].replace(/[0-9]/g, '#').trim();
|
|
20
26
|
}
|
|
21
27
|
} else if (phoneMask.length > 1) {
|
|
22
28
|
let hasDifferentLengthsOfPhoneNumbers = false;
|
|
@@ -34,7 +40,7 @@ export default function getInputMask(
|
|
|
34
40
|
if (cca2 === 'CA' || cca2 === 'US') {
|
|
35
41
|
matrix = phoneMask[0].replace(/\d/g, '#').trim();
|
|
36
42
|
} else {
|
|
37
|
-
matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
|
|
43
|
+
matrix = phoneMask[0].replace(/[0-9]/g, '#').trim();
|
|
38
44
|
}
|
|
39
45
|
} else {
|
|
40
46
|
for (let i = 0; i < phoneMask.length; i++) {
|
|
@@ -42,7 +48,7 @@ export default function getInputMask(
|
|
|
42
48
|
phoneNumber.length > phoneMask[i].length &&
|
|
43
49
|
phoneMask[i + 1]
|
|
44
50
|
) {
|
|
45
|
-
matrix = phoneMask[i + 1].replace(/[0-9]/g, '').trim();
|
|
51
|
+
matrix = phoneMask[i + 1].replace(/[0-9]/g, '#').trim();
|
|
46
52
|
}
|
|
47
53
|
}
|
|
48
54
|
}
|
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.6.
|
|
4
|
+
"version": "0.6.1",
|
|
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",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-native": "*"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"react-native-country-codes-picker": "
|
|
47
|
+
"react-native-country-codes-picker": "2.3.3"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"metro-react-native-babel-preset": "^0.61.0"
|