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 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 Expo;
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
- - `modalStyles?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
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: ['262 ### ###', '639 ### ###'],
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 (callingCode && callingCode.includes(newCode)) {
16
+ if (
17
+ item.cca2 === cca2 &&
18
+ callingCode &&
19
+ callingCode.includes(newCode)
20
+ ) {
17
21
  if (phoneMask.length === 1) {
18
- if (cca2 !== 'CA' && cca2 !== 'US' && cca2 !== 'IT') {
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.0",
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": "^2.3.3"
47
+ "react-native-country-codes-picker": "2.3.3"
48
48
  },
49
49
  "devDependencies": {
50
50
  "metro-react-native-babel-preset": "^0.61.0"