react-native-international-phone-number 0.11.1 → 0.11.3
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 +58 -55
- package/lib/index.js +26 -7
- package/lib/interfaces/phoneInputProps.ts +17 -10
- package/lib/interfaces/phoneInputRef.ts +36 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -69,11 +69,11 @@
|
|
|
69
69
|
- [Basic Usage](#basic-usage)
|
|
70
70
|
- [With Class Component](#class-component)
|
|
71
71
|
- [With Function Component](#function-component)
|
|
72
|
-
- [With Typescript + defaultValue](#typescript)
|
|
72
|
+
- [With Typescript + defaultValue](#typescript--defaultvalue)
|
|
73
73
|
- [Intermediate Usage](#intermediate-usage)
|
|
74
|
-
- [Typescript + useRef + defaultValue](#typescript--useref)
|
|
74
|
+
- [Typescript + useRef + defaultValue](#typescript--useref--defaultvalue)
|
|
75
75
|
- [Advanced Usage](#advanced-usage)
|
|
76
|
-
- [React-Hook-Form + Typescript + defaultValue](#react-hook-form--typescript--
|
|
76
|
+
- [React-Hook-Form + Typescript + defaultValue](#react-hook-form--typescript--defaultvalue)
|
|
77
77
|
- [Customizing Lib](#customizing-lib)
|
|
78
78
|
- [Lib Props](#component-props-phoneinputprops)
|
|
79
79
|
- [Lib Functions](#functions)
|
|
@@ -99,14 +99,16 @@
|
|
|
99
99
|
|
|
100
100
|
## Installation
|
|
101
101
|
|
|
102
|
+
To use this library, make sure you have **react-native-international-phone-number** installed along with its required dependency **react-native-safe-area-context**:
|
|
103
|
+
|
|
102
104
|
```bash
|
|
103
|
-
|
|
105
|
+
npm install react-native-international-phone-number react-native-safe-area-context
|
|
104
106
|
```
|
|
105
107
|
|
|
106
|
-
|
|
108
|
+
Since **react-native-safe-area-context** includes native code, you’ll need to install the iOS pods on macOS to complete the linking:
|
|
107
109
|
|
|
108
110
|
```bash
|
|
109
|
-
|
|
111
|
+
npx pod-install ios
|
|
110
112
|
```
|
|
111
113
|
|
|
112
114
|
## Additional config to WEB
|
|
@@ -506,55 +508,56 @@ export default function App() {
|
|
|
506
508
|
|
|
507
509
|
## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
|
|
508
510
|
|
|
509
|
-
| Prop | Type
|
|
510
|
-
| -------------------------------------- |
|
|
511
|
-
| `theme` | `ITheme`
|
|
512
|
-
| `language` | `ILanguage`
|
|
513
|
-
| `defaultValue` | `string`
|
|
514
|
-
| `value` | `string`
|
|
515
|
-
| `onChangePhoneNumber` | `(phoneNumber: string) => void`
|
|
516
|
-
| `defaultCountry` | `ICountryCca2`
|
|
517
|
-
| `selectedCountry` | `ICountry`
|
|
518
|
-
| `onChangeSelectedCountry` | `(country: ICountry) => void`
|
|
519
|
-
| `placeholder` | `string`
|
|
520
|
-
| `phoneInputPlaceholderTextColor` | `string`
|
|
521
|
-
| `phoneInputSelectionColor` | `string`
|
|
522
|
-
| `phoneInputStyles` | `IPhoneInputStyles`
|
|
523
|
-
| `modalStyles` | `ICountrySelectStyles`
|
|
524
|
-
| `disabled` | `boolean`
|
|
525
|
-
| `modalDisabled` | `boolean`
|
|
526
|
-
| `customMask` | `string`
|
|
527
|
-
| `visibleCountries` | `ICountryCca2[]`
|
|
528
|
-
| `hiddenCountries` | `ICountryCca2[]`
|
|
529
|
-
| `popularCountries` | `ICountryCca2[]`
|
|
530
|
-
| `customCaret` | `() => ReactNode`
|
|
531
|
-
| `
|
|
532
|
-
| `
|
|
533
|
-
| `
|
|
534
|
-
| `
|
|
535
|
-
| `
|
|
536
|
-
| `
|
|
537
|
-
| `
|
|
538
|
-
| `
|
|
539
|
-
| `
|
|
540
|
-
| `
|
|
541
|
-
| `
|
|
542
|
-
| `
|
|
543
|
-
| `
|
|
544
|
-
| `
|
|
545
|
-
| `
|
|
546
|
-
| `
|
|
547
|
-
| `
|
|
548
|
-
| `
|
|
549
|
-
| `
|
|
550
|
-
| `
|
|
551
|
-
| `
|
|
552
|
-
| `
|
|
553
|
-
| `
|
|
554
|
-
| `
|
|
555
|
-
| `
|
|
556
|
-
| `
|
|
557
|
-
| `
|
|
511
|
+
| Prop | Type | Description |
|
|
512
|
+
| -------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------- |
|
|
513
|
+
| `theme` | `ITheme` | Theme configuration for the component |
|
|
514
|
+
| `language` | `ILanguage` | Language for country names and UI |
|
|
515
|
+
| `defaultValue` | `string` | Default phone number value (format: `+(country code)(area code)(number)`) |
|
|
516
|
+
| `value` | `string` | Controlled phone number value |
|
|
517
|
+
| `onChangePhoneNumber` | `(phoneNumber: string) => void` | Callback when phone number changes |
|
|
518
|
+
| `defaultCountry` | `ICountryCca2` | Default selected country (ISO 3166-1 alpha-2) |
|
|
519
|
+
| `selectedCountry` | `ICountry` | Currently selected country object |
|
|
520
|
+
| `onChangeSelectedCountry` | `(country: ICountry) => void` | Callback when country selection changes |
|
|
521
|
+
| `placeholder` | `string` | Placeholder text for phone input |
|
|
522
|
+
| `phoneInputPlaceholderTextColor` | `string` | Color of placeholder text |
|
|
523
|
+
| `phoneInputSelectionColor` | `string` | Color of text selection |
|
|
524
|
+
| `phoneInputStyles` | `IPhoneInputStyles` | Custom styles for phone input component |
|
|
525
|
+
| `modalStyles` | `ICountrySelectStyles` | Custom styles for country selection modal |
|
|
526
|
+
| `disabled` | `boolean` | Disable the entire phone input |
|
|
527
|
+
| `modalDisabled` | `boolean` | Disable only the country selection modal |
|
|
528
|
+
| `customMask` | `string` | Custom phone number mask (format like this: `(###) ###-####`) |
|
|
529
|
+
| `visibleCountries` | `ICountryCca2[]` | Array of country codes to show in modal |
|
|
530
|
+
| `hiddenCountries` | `ICountryCca2[]` | Array of country codes to hide from modal |
|
|
531
|
+
| `popularCountries` | `ICountryCca2[]` | Array of country codes to show in popular section |
|
|
532
|
+
| `customCaret` | `() => ReactNode` | Custom dropdown arrow component |
|
|
533
|
+
| `customFlag` | `(country: ICountry) => ReactNode` | Custom flag component to replace default flag emoji |
|
|
534
|
+
| `rtl` | `boolean` | Enable right-to-left layout |
|
|
535
|
+
| `isFullScreen` | `boolean` | Show modal in full screen mode |
|
|
536
|
+
| `modalType` | `'bottomSheet' \| 'popup'` | Type of modal presentation |
|
|
537
|
+
| `modalDragHandleIndicatorComponent` | `() => ReactNode` | Custom drag handle indicator component |
|
|
538
|
+
| `modalSearchInputPlaceholderTextColor` | `string` | Color of modal search placeholder text |
|
|
539
|
+
| `modalSearchInputPlaceholder` | `string` | Placeholder text for modal search input |
|
|
540
|
+
| `modalSearchInputSelectionColor` | `string` | Color of modal search text selection |
|
|
541
|
+
| `modalPopularCountriesTitle` | `string` | Title for popular countries section |
|
|
542
|
+
| `modalAllCountriesTitle` | `string` | Title for all countries section |
|
|
543
|
+
| `modalSectionTitleComponent` | `() => ReactNode` | Custom section title component |
|
|
544
|
+
| `modalCountryItemComponent` | `() => ReactNode` | Custom country item component |
|
|
545
|
+
| `modalCloseButtonComponent` | `() => ReactNode` | Custom close button component |
|
|
546
|
+
| `modalSectionTitleDisabled` | `boolean` | Disable section titles in modal |
|
|
547
|
+
| `modalNotFoundCountryMessage` | `string` | Message when no countries found |
|
|
548
|
+
| `disabledModalBackdropPress` | `boolean` | Disable modal close on backdrop press |
|
|
549
|
+
| `removedModalBackdrop` | `boolean` | Remove modal backdrop entirely |
|
|
550
|
+
| `onModalBackdropPress` | `() => void` | Callback when modal backdrop is pressed |
|
|
551
|
+
| `onModalRequestClose` | `() => void` | Callback when modal close is requested |
|
|
552
|
+
| `showModalAlphabetFilter` | `boolean` | Show alphabet filter in modal |
|
|
553
|
+
| `showModalSearchInput` | `boolean` | Show search input in modal |
|
|
554
|
+
| `showModalCloseButton` | `boolean` | Show close button in modal |
|
|
555
|
+
| `showModalScrollIndicator` | `boolean` | Show scroll indicator in modal |
|
|
556
|
+
| `allowFontScaling` | `boolean` | Allow font scaling based on device settings (default: `true`) |
|
|
557
|
+
| `initialBottomsheetHeight` | `number \| string` | Initial height of the bottom sheet modal |
|
|
558
|
+
| `minBottomsheetHeight` | `number \| string` | Minimum height of the bottom sheet modal |
|
|
559
|
+
| `maxBottomsheetHeight` | `number \| string` | Maximum height of the bottom sheet modal |
|
|
560
|
+
| `ref` | `Ref<IPhoneInputRef>` | Ref to access component methods |
|
|
558
561
|
|
|
559
562
|
<br>
|
|
560
563
|
|
package/lib/index.js
CHANGED
|
@@ -91,6 +91,8 @@ const PhoneInput = forwardRef(
|
|
|
91
91
|
showModalSearchInput,
|
|
92
92
|
showModalCloseButton,
|
|
93
93
|
showModalScrollIndicator,
|
|
94
|
+
allowFontScaling = true,
|
|
95
|
+
customFlag,
|
|
94
96
|
accessibilityLabelPhoneInput,
|
|
95
97
|
accessibilityHintPhoneInput,
|
|
96
98
|
accessibilityLabelCountriesButton,
|
|
@@ -109,7 +111,6 @@ const PhoneInput = forwardRef(
|
|
|
109
111
|
accessibilityHintAlphabetFilter,
|
|
110
112
|
accessibilityLabelAlphabetLetter,
|
|
111
113
|
accessibilityHintAlphabetLetter,
|
|
112
|
-
allowFontScaling = true,
|
|
113
114
|
...rest
|
|
114
115
|
},
|
|
115
116
|
ref
|
|
@@ -127,6 +128,18 @@ const PhoneInput = forwardRef(
|
|
|
127
128
|
focus: () => textInputRef.current?.focus(),
|
|
128
129
|
blur: () => textInputRef.current?.blur(),
|
|
129
130
|
clear: () => textInputRef.current?.clear(),
|
|
131
|
+
isFocused: () => textInputRef.current?.isFocused(),
|
|
132
|
+
setNativeProps: (nativeProps) =>
|
|
133
|
+
textInputRef.current?.setNativeProps(nativeProps),
|
|
134
|
+
measure: (callback) => textInputRef.current?.measure(callback),
|
|
135
|
+
measureInWindow: (callback) =>
|
|
136
|
+
textInputRef.current?.measureInWindow(callback),
|
|
137
|
+
measureLayout: (relativeToNativeNode, onSuccess, onFail) =>
|
|
138
|
+
textInputRef.current?.measureLayout(
|
|
139
|
+
relativeToNativeNode,
|
|
140
|
+
onSuccess,
|
|
141
|
+
onFail
|
|
142
|
+
),
|
|
130
143
|
getValue: () => inputValue,
|
|
131
144
|
value: inputValue,
|
|
132
145
|
getFullPhoneNumber: () =>
|
|
@@ -182,6 +195,7 @@ const PhoneInput = forwardRef(
|
|
|
182
195
|
showModalSearchInput,
|
|
183
196
|
showModalCloseButton,
|
|
184
197
|
showModalScrollIndicator,
|
|
198
|
+
customFlag,
|
|
185
199
|
accessibilityLabelPhoneInput,
|
|
186
200
|
accessibilityHintPhoneInput,
|
|
187
201
|
accessibilityLabelCountriesButton,
|
|
@@ -417,12 +431,16 @@ const PhoneInput = forwardRef(
|
|
|
417
431
|
// Create a separate constant for each part of the component
|
|
418
432
|
const touchableStart = (
|
|
419
433
|
<>
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
434
|
+
{(customFlag &&
|
|
435
|
+
countryValue &&
|
|
436
|
+
customFlag(countryValue)) || (
|
|
437
|
+
<Text
|
|
438
|
+
style={getFlagStyle(phoneInputStyles?.flag)}
|
|
439
|
+
allowFontScaling={allowFontScaling}
|
|
440
|
+
>
|
|
441
|
+
{countryValue?.flag || countryValue?.cca2}
|
|
442
|
+
</Text>
|
|
443
|
+
)}
|
|
426
444
|
{(customCaret && customCaret()) || (
|
|
427
445
|
<View style={phoneInputStyles?.caret}>
|
|
428
446
|
<View
|
|
@@ -599,6 +617,7 @@ const PhoneInput = forwardRef(
|
|
|
599
617
|
showSearchInput={showModalSearchInput}
|
|
600
618
|
showAlphabetFilter={showModalAlphabetFilter}
|
|
601
619
|
countryNotFoundMessage={modalNotFoundCountryMessage}
|
|
620
|
+
customFlag={customFlag}
|
|
602
621
|
accessibilityLabelBackdrop={
|
|
603
622
|
accessibilityLabelBackdrop
|
|
604
623
|
}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Ref } from 'react';
|
|
3
|
+
import { TextInputProps } from 'react-native';
|
|
3
4
|
import {
|
|
4
5
|
ICountry,
|
|
5
6
|
ICountryCca2,
|
|
6
7
|
ICountrySelectLanguages,
|
|
7
8
|
ICountrySelectStyle,
|
|
9
|
+
ISectionTitle,
|
|
8
10
|
} from 'react-native-country-select';
|
|
9
11
|
|
|
10
|
-
import {ITheme} from './theme';
|
|
11
|
-
import {IPhoneInputStyles} from './phoneInputStyles';
|
|
12
|
-
import {IPhoneInputRef} from './phoneInputRef';
|
|
12
|
+
import { ITheme } from './theme';
|
|
13
|
+
import { IPhoneInputStyles } from './phoneInputStyles';
|
|
14
|
+
import { IPhoneInputRef } from './phoneInputRef';
|
|
13
15
|
|
|
14
16
|
interface BasePhoneInput extends TextInputProps {
|
|
15
17
|
theme?: ITheme;
|
|
@@ -27,7 +29,7 @@ interface BasePhoneInput extends TextInputProps {
|
|
|
27
29
|
visibleCountries?: Array<ICountryCca2>;
|
|
28
30
|
hiddenCountries?: Array<ICountryCca2>;
|
|
29
31
|
popularCountries?: Array<ICountryCca2>;
|
|
30
|
-
customCaret?: () =>
|
|
32
|
+
customCaret?: () => React.ReactElement;
|
|
31
33
|
rtl?: boolean;
|
|
32
34
|
allowFontScaling?: boolean;
|
|
33
35
|
isFullScreen?: boolean;
|
|
@@ -35,21 +37,26 @@ interface BasePhoneInput extends TextInputProps {
|
|
|
35
37
|
minBottomsheetHeight?: number | string;
|
|
36
38
|
maxBottomsheetHeight?: number | string;
|
|
37
39
|
initialBottomsheetHeight?: number | string;
|
|
38
|
-
modalDragHandleIndicatorComponent?: () =>
|
|
40
|
+
modalDragHandleIndicatorComponent?: () => React.ReactElement;
|
|
39
41
|
modalSearchInputPlaceholderTextColor?: string;
|
|
40
42
|
modalSearchInputPlaceholder?: string;
|
|
41
43
|
modalSearchInputSelectionColor?: string;
|
|
42
44
|
modalPopularCountriesTitle?: string;
|
|
43
45
|
modalAllCountriesTitle?: string;
|
|
44
|
-
modalSectionTitleComponent?: (
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
modalSectionTitleComponent?: (
|
|
47
|
+
item: ISectionTitle
|
|
48
|
+
) => React.ReactElement;
|
|
49
|
+
modalCountryItemComponent?: (item: ICountry) => React.ReactElement;
|
|
50
|
+
modalCloseButtonComponent?: () => React.ReactElement;
|
|
47
51
|
modalSectionTitleDisabled?: boolean;
|
|
48
52
|
modalNotFoundCountryMessage?: string;
|
|
49
53
|
disabledModalBackdropPress?: boolean;
|
|
50
54
|
removedModalBackdrop?: boolean;
|
|
51
55
|
onModalBackdropPress?: () => void;
|
|
52
56
|
onModalRequestClose?: () => void;
|
|
57
|
+
customFlag?: (
|
|
58
|
+
country: ICountry
|
|
59
|
+
) => React.ReactElement | null | undefined;
|
|
53
60
|
showModalAlphabetFilter?: boolean;
|
|
54
61
|
showModalSearchInput?: boolean;
|
|
55
62
|
showModalCloseButton?: boolean;
|
|
@@ -1,12 +1,45 @@
|
|
|
1
|
-
import {TextInput} from 'react-native';
|
|
2
|
-
import {ICountry} from 'react-native-country-select';
|
|
1
|
+
import { TextInput } from 'react-native';
|
|
2
|
+
import { ICountry } from 'react-native-country-select';
|
|
3
3
|
|
|
4
|
-
import {PhoneInputProps} from './phoneInputProps';
|
|
4
|
+
import { PhoneInputProps } from './phoneInputProps';
|
|
5
5
|
|
|
6
6
|
export interface IPhoneInputRef extends TextInput {
|
|
7
7
|
props: PhoneInputProps;
|
|
8
|
+
// Métodos nativos do TextInput
|
|
8
9
|
onFocus: () => void;
|
|
9
10
|
focus: () => void;
|
|
11
|
+
blur: () => void;
|
|
12
|
+
clear: () => void;
|
|
13
|
+
isFocused: () => boolean;
|
|
14
|
+
setNativeProps: (nativeProps: object) => void;
|
|
15
|
+
measure: (
|
|
16
|
+
callback: (
|
|
17
|
+
x: number,
|
|
18
|
+
y: number,
|
|
19
|
+
width: number,
|
|
20
|
+
height: number,
|
|
21
|
+
pageX: number,
|
|
22
|
+
pageY: number
|
|
23
|
+
) => void
|
|
24
|
+
) => void;
|
|
25
|
+
measureInWindow: (
|
|
26
|
+
callback: (
|
|
27
|
+
x: number,
|
|
28
|
+
y: number,
|
|
29
|
+
width: number,
|
|
30
|
+
height: number
|
|
31
|
+
) => void
|
|
32
|
+
) => void;
|
|
33
|
+
measureLayout: (
|
|
34
|
+
relativeToNativeNode: number,
|
|
35
|
+
onSuccess: (
|
|
36
|
+
x: number,
|
|
37
|
+
y: number,
|
|
38
|
+
width: number,
|
|
39
|
+
height: number
|
|
40
|
+
) => void,
|
|
41
|
+
onFail: () => void
|
|
42
|
+
) => void;
|
|
10
43
|
getValue: () => string;
|
|
11
44
|
value: string;
|
|
12
45
|
getValueFormatted: () => string;
|
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.11.
|
|
4
|
+
"version": "0.11.3",
|
|
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,8 +44,8 @@
|
|
|
44
44
|
"react-native": "*"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"react-native-country-select": "0.3.
|
|
48
|
-
"libphonenumber-js": "1.12.
|
|
47
|
+
"react-native-country-select": "0.3.7",
|
|
48
|
+
"libphonenumber-js": "1.12.28"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"metro-react-native-babel-preset": "^0.61.0"
|