react-native-international-phone-number 0.1.0
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/.babelrc +3 -0
- package/README.md +186 -0
- package/lib/index.js +97 -0
- package/lib/utils/countriesPhoneCode.js +260 -0
- package/lib/utils/inputMask.js +24 -0
- package/package.json +41 -0
package/.babelrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<div align = "center">
|
|
2
|
+
<img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/gif/preview.gif">
|
|
3
|
+
</div>
|
|
4
|
+
|
|
5
|
+
<br>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">React Native International Phone Number Input</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/react-native-international-phone-number">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/react-native-international-phone-number.svg?style=flat-square">
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://www.npmjs.com/package/react-native-international-phone-number">
|
|
14
|
+
<img src="https://img.shields.io/npm/dm/react-native-international-phone-number.svg?style=flat-square">
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/react-native-international-phone-number">
|
|
17
|
+
<img src="https://img.shields.io/github/issues/AstrOOnauta/react-native-international-phone-number"/>
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://www.npmjs.com/package/react-native-international-phone-number">
|
|
20
|
+
<img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number"/>
|
|
21
|
+
</a>
|
|
22
|
+
</p>
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
$ npm i --save react-native-international-phone-number
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
OR
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
$ yarn add react-native-international-phone-number
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
AND
|
|
37
|
+
|
|
38
|
+
> Update your `metro.config.js` file:
|
|
39
|
+
>
|
|
40
|
+
> ```bash
|
|
41
|
+
> module.exports = {
|
|
42
|
+
> ...
|
|
43
|
+
> resolver: {
|
|
44
|
+
> sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
|
|
45
|
+
> },
|
|
46
|
+
> };
|
|
47
|
+
> ```
|
|
48
|
+
|
|
49
|
+
## Basic Usage
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import React, { useState } from 'react';
|
|
53
|
+
import { View, Text } from 'react-native';
|
|
54
|
+
import {
|
|
55
|
+
phoneMask,
|
|
56
|
+
PhoneInput,
|
|
57
|
+
} from 'react-native-international-phone-number';
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
const [selectedCountry, setSelectedCountry] = useState(undefined);
|
|
61
|
+
const [phoneInput, setPhoneInput] = useState('');
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<View style={{ width: '100%', flex: 1, padding: 24 }}>
|
|
65
|
+
<PhoneInput
|
|
66
|
+
selectedCountry={selectedCountry}
|
|
67
|
+
setSelectedCountry={setSelectedCountry}
|
|
68
|
+
value={phoneInput}
|
|
69
|
+
onChangeText={(newValue) =>
|
|
70
|
+
setPhoneInput(
|
|
71
|
+
phoneMask(newValue, selectedCountry.callingCode[0])
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
/>
|
|
75
|
+
<View style={{ marginTop: 10 }}>
|
|
76
|
+
<Text>
|
|
77
|
+
Country:{' '}
|
|
78
|
+
{`${selectedCountry?.name} (${selectedCountry?.cca2})`}
|
|
79
|
+
</Text>
|
|
80
|
+
<Text>
|
|
81
|
+
Phone: {`${selectedCountry?.callingCode[0]} ${phoneInput}`}
|
|
82
|
+
</Text>
|
|
83
|
+
</View>
|
|
84
|
+
</View>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Advanced Usage Using React-Hook-Form ans Typescript
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import React, { useState } from 'react';
|
|
93
|
+
import { View, Text } from 'react-native';
|
|
94
|
+
import {
|
|
95
|
+
phoneMask,
|
|
96
|
+
PhoneInput,
|
|
97
|
+
} from 'react-native-international-phone-number';
|
|
98
|
+
import { Country } from 'react-native-country-picker-modal';
|
|
99
|
+
import { Controller, FieldValues, useForm } from 'react-hook-form';
|
|
100
|
+
|
|
101
|
+
interface FormProps extends FieldValues {
|
|
102
|
+
phoneNumber: string;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export default function App() {
|
|
106
|
+
const [selectedCountry, setSelectedCountry] = useState<
|
|
107
|
+
undefined | Country
|
|
108
|
+
>(undefined);
|
|
109
|
+
|
|
110
|
+
const { control, handleSubmit, resetField } = useForm();
|
|
111
|
+
|
|
112
|
+
function onSubmit(form: FormProps) {
|
|
113
|
+
Alert.alert(
|
|
114
|
+
'Advanced Result',
|
|
115
|
+
`${selectedCountry?.callingCode[0]} ${form.phoneNumber}`
|
|
116
|
+
);
|
|
117
|
+
resetField('phoneNumber');
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<View style={{ width: '100%', flex: 1, padding: 24 }}>
|
|
122
|
+
<Controller
|
|
123
|
+
name="phoneNumber"
|
|
124
|
+
control={control}
|
|
125
|
+
render={({ field: { onChange, value } }) => (
|
|
126
|
+
<PhoneInput
|
|
127
|
+
selectedCountry={selectedCountry}
|
|
128
|
+
setSelectedCountry={setSelectedCountry}
|
|
129
|
+
value={value}
|
|
130
|
+
onChangeText={(newValue) =>
|
|
131
|
+
onChange(
|
|
132
|
+
phoneMask(newValue, selectedCountry.callingCode[0])
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
/>
|
|
136
|
+
)}
|
|
137
|
+
/>
|
|
138
|
+
<Button
|
|
139
|
+
style={{
|
|
140
|
+
width: '100%',
|
|
141
|
+
marginTop: 10,
|
|
142
|
+
backgroundColor: '#90d7ff',
|
|
143
|
+
}}
|
|
144
|
+
onPress={handleSubmit(onSubmit)}
|
|
145
|
+
/>
|
|
146
|
+
<Text>Submit</Text>
|
|
147
|
+
</Button>
|
|
148
|
+
</View>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Props
|
|
154
|
+
|
|
155
|
+
- `value?`: string
|
|
156
|
+
- `onChangeText?`: (text: string) => void
|
|
157
|
+
- `containerStyle?`: StyleProp<ViewStyle>
|
|
158
|
+
- `inputStyle?`: StyleProp<ViewStyle>
|
|
159
|
+
- `withDarkTheme?`: boolean
|
|
160
|
+
- `disabled?`: boolean
|
|
161
|
+
- `placeholder?`: string
|
|
162
|
+
- `placeholderTextColor?`: string
|
|
163
|
+
|
|
164
|
+
## Methods
|
|
165
|
+
|
|
166
|
+
- `phoneMask`: (value: string, countryCode: string) => string
|
|
167
|
+
|
|
168
|
+
## Contributing
|
|
169
|
+
|
|
170
|
+
- Fork or clone this repository
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
$ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
- Repair, Update and Enjoy 🛠️🚧⚙️
|
|
177
|
+
|
|
178
|
+
- Create a new PR to this repository
|
|
179
|
+
|
|
180
|
+
<br>
|
|
181
|
+
|
|
182
|
+
<div align = "center">
|
|
183
|
+
<br>
|
|
184
|
+
Thanks for stopping by! 😁
|
|
185
|
+
<br>
|
|
186
|
+
</div>
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
StyleSheet,
|
|
4
|
+
Dimensions,
|
|
5
|
+
Platform,
|
|
6
|
+
View,
|
|
7
|
+
TextInput,
|
|
8
|
+
} from 'react-native';
|
|
9
|
+
import CountryPicker, {
|
|
10
|
+
DARK_THEME,
|
|
11
|
+
DEFAULT_THEME,
|
|
12
|
+
} from 'react-native-country-picker-modal';
|
|
13
|
+
|
|
14
|
+
import { phoneMask } from './utils/inputMask';
|
|
15
|
+
|
|
16
|
+
function PhoneInput({
|
|
17
|
+
value,
|
|
18
|
+
onChangeText,
|
|
19
|
+
placeholder,
|
|
20
|
+
placeholderTextColor,
|
|
21
|
+
containerStyle,
|
|
22
|
+
inputStyle,
|
|
23
|
+
withDarkTheme,
|
|
24
|
+
disabled,
|
|
25
|
+
selectedCountry,
|
|
26
|
+
setSelectedCountry,
|
|
27
|
+
}) {
|
|
28
|
+
const onSelect = (country) => {
|
|
29
|
+
if (setSelectedCountry) {
|
|
30
|
+
setSelectedCountry({
|
|
31
|
+
...country,
|
|
32
|
+
callingCode: [`+${country.callingCode[0]}`],
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setSelectedCountry({
|
|
39
|
+
callingCode: ['+55'],
|
|
40
|
+
cca2: 'BR',
|
|
41
|
+
currency: ['BRL'],
|
|
42
|
+
flag: 'flag-br',
|
|
43
|
+
name: 'Brazil',
|
|
44
|
+
region: 'Americas',
|
|
45
|
+
subregion: 'South America',
|
|
46
|
+
});
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<View style={containerStyle ? containerStyle : styles.container}>
|
|
51
|
+
<CountryPicker
|
|
52
|
+
containerButtonStyle={{
|
|
53
|
+
paddingLeft: 20,
|
|
54
|
+
}}
|
|
55
|
+
onSelect={onSelect}
|
|
56
|
+
withFilter
|
|
57
|
+
withCallingCodeButton
|
|
58
|
+
theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
|
|
59
|
+
countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
|
|
60
|
+
/>
|
|
61
|
+
<TextInput
|
|
62
|
+
style={inputStyle ? inputStyle : styles.input}
|
|
63
|
+
value={value}
|
|
64
|
+
onChangeText={onChangeText}
|
|
65
|
+
placeholder={
|
|
66
|
+
placeholder ? placeholder : 'Insert your phone number'
|
|
67
|
+
}
|
|
68
|
+
placeholderTextColor={
|
|
69
|
+
placeholderTextColor ? placeholderTextColor : '#DDDDDD'
|
|
70
|
+
}
|
|
71
|
+
editable={!disabled}
|
|
72
|
+
keyboardType="numeric"
|
|
73
|
+
/>
|
|
74
|
+
</View>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const styles = StyleSheet.create({
|
|
79
|
+
container: {
|
|
80
|
+
flexDirection: 'row',
|
|
81
|
+
alignItems: 'center',
|
|
82
|
+
backgroundColor: '#FFFFFF',
|
|
83
|
+
borderWidth: 1,
|
|
84
|
+
borderStyle: 'solid',
|
|
85
|
+
borderColor: '#DDDDDD',
|
|
86
|
+
borderRadius: 8,
|
|
87
|
+
},
|
|
88
|
+
input: {
|
|
89
|
+
width: Dimensions.get('window').width - 100,
|
|
90
|
+
paddingVertical: Platform.OS === 'ios' ? 16 : 8,
|
|
91
|
+
paddingHorizontal: 16,
|
|
92
|
+
fontSize: 16,
|
|
93
|
+
color: '#000000',
|
|
94
|
+
},
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
export { PhoneInput, phoneMask };
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
export const countriesPhoneCodeList = [
|
|
2
|
+
{code: '+247', matrix: '####'},
|
|
3
|
+
{code: '+290', matrix: '####'},
|
|
4
|
+
{code: '+683', matrix: '####'},
|
|
5
|
+
{code: '+690', matrix: '####'},
|
|
6
|
+
{code: '+500', matrix: '#####'},
|
|
7
|
+
{code: '+676', matrix: '#####'},
|
|
8
|
+
{code: '+677', matrix: '#####'},
|
|
9
|
+
{code: '+678', matrix: '#####'},
|
|
10
|
+
{code: '+688', matrix: '#####'},
|
|
11
|
+
{code: '+49', matrix: '### ###'},
|
|
12
|
+
{code: '+682', matrix: '## ###'},
|
|
13
|
+
{code: '+686', matrix: '## ###'},
|
|
14
|
+
{code: '+688', matrix: '######'},
|
|
15
|
+
{code: '+95', matrix: '### ###'},
|
|
16
|
+
{code: '+298', matrix: '### ###'},
|
|
17
|
+
{code: '+376', matrix: '### ###'},
|
|
18
|
+
{code: '+387', matrix: '## ####'},
|
|
19
|
+
{code: '+508', matrix: '## ####'},
|
|
20
|
+
{code: '+597', matrix: '### ###'},
|
|
21
|
+
{code: '+672', matrix: '### ###'},
|
|
22
|
+
{code: '+681', matrix: '## ####'},
|
|
23
|
+
{code: '+685', matrix: '## ####'},
|
|
24
|
+
{code: '+687', matrix: '## ####'},
|
|
25
|
+
{code: '+850', matrix: '### ###'},
|
|
26
|
+
{code: '+230', matrix: '### ####'},
|
|
27
|
+
{code: '+239', matrix: '## #####'},
|
|
28
|
+
{code: '+245', matrix: '# ######'},
|
|
29
|
+
{code: '+246', matrix: '### ####'},
|
|
30
|
+
{code: '+263', matrix: '# ######'},
|
|
31
|
+
{code: '+269', matrix: '## #####'},
|
|
32
|
+
{code: '+297', matrix: '### ####'},
|
|
33
|
+
{code: '+299', matrix: '## ## ##'},
|
|
34
|
+
{code: '+354', matrix: '### ####'},
|
|
35
|
+
{code: '+372', matrix: '### ####'},
|
|
36
|
+
{code: '+387', matrix: '## #####'},
|
|
37
|
+
{code: '+49', matrix: '### ## ##'},
|
|
38
|
+
{code: '+501', matrix: '### ####'},
|
|
39
|
+
{code: '+507', matrix: '### ####'},
|
|
40
|
+
{code: '+592', matrix: '### ####'},
|
|
41
|
+
{code: '+597', matrix: '### ####'},
|
|
42
|
+
{code: '+599', matrix: '### ####'},
|
|
43
|
+
{code: '+60', matrix: '# ### ###'},
|
|
44
|
+
{code: '+62', matrix: '## ### ##'},
|
|
45
|
+
{code: '+65', matrix: '#### ####'},
|
|
46
|
+
{code: '+670', matrix: '### ####'},
|
|
47
|
+
{code: '+673', matrix: '### ####'},
|
|
48
|
+
{code: '+674', matrix: '### ####'},
|
|
49
|
+
{code: '+677', matrix: '### ####'},
|
|
50
|
+
{code: '+678', matrix: '## #####'},
|
|
51
|
+
{code: '+679', matrix: '## #####'},
|
|
52
|
+
{code: '+680', matrix: '### ####'},
|
|
53
|
+
{code: '+689', matrix: '## ## ##'},
|
|
54
|
+
{code: '+691', matrix: '### ####'},
|
|
55
|
+
{code: '+692', matrix: '### ####'},
|
|
56
|
+
{code: '+95', matrix: '# ### ###'},
|
|
57
|
+
{code: '+960', matrix: '### ####'},
|
|
58
|
+
{code: '+220', matrix: '### ## ##'},
|
|
59
|
+
{code: '+232', matrix: '## ######'},
|
|
60
|
+
{code: '+234', matrix: '## ### ##'},
|
|
61
|
+
{code: '+237', matrix: '#### ####'},
|
|
62
|
+
{code: '+238', matrix: '### ## ##'},
|
|
63
|
+
{code: '+248', matrix: '# ### ###'},
|
|
64
|
+
{code: '+252', matrix: '# ### ###'},
|
|
65
|
+
{code: '+265', matrix: '# ### ###'},
|
|
66
|
+
{code: '+291', matrix: '# ### ###'},
|
|
67
|
+
{code: '+350', matrix: '### #####'},
|
|
68
|
+
{code: '+356', matrix: '#### ####'},
|
|
69
|
+
{code: '+372', matrix: '#### ####'},
|
|
70
|
+
{code: '+373', matrix: '#### ####'},
|
|
71
|
+
{code: '+47', matrix: '### ## ###'},
|
|
72
|
+
{code: '+49', matrix: '### ## ###'},
|
|
73
|
+
{code: '+504', matrix: '#### ####'},
|
|
74
|
+
{code: '+505', matrix: '#### ####'},
|
|
75
|
+
{code: '+506', matrix: '#### ####'},
|
|
76
|
+
{code: '+52', matrix: '## ## ####'},
|
|
77
|
+
{code: '+53', matrix: '# ### ####'},
|
|
78
|
+
{code: '+599', matrix: '#### ####'},
|
|
79
|
+
{code: '+60', matrix: '## ### ###'},
|
|
80
|
+
{code: '+62', matrix: '## ### ###'},
|
|
81
|
+
{code: '+64', matrix: '## ### ###'},
|
|
82
|
+
{code: '+66', matrix: '## ### ###'},
|
|
83
|
+
{code: '+670', matrix: '### #####'},
|
|
84
|
+
{code: '+850', matrix: '#### ####'},
|
|
85
|
+
{code: '+852', matrix: '#### ####'},
|
|
86
|
+
{code: '+853', matrix: '#### ####'},
|
|
87
|
+
{code: '+886', matrix: '#### ####'},
|
|
88
|
+
{code: '+95', matrix: '## ### ###'},
|
|
89
|
+
{code: '+961', matrix: '# ### ###'},
|
|
90
|
+
{code: '+965', matrix: '#### ####'},
|
|
91
|
+
{code: '+967', matrix: '# ### ###'},
|
|
92
|
+
{code: '+973', matrix: '#### ####'},
|
|
93
|
+
{code: '+974', matrix: '#### ####'},
|
|
94
|
+
{code: '+975', matrix: '# ### ###'},
|
|
95
|
+
{code: '+1', matrix: '### ### ####'},
|
|
96
|
+
{code: '+216', matrix: '## ### ###'},
|
|
97
|
+
{code: '+218', matrix: '## ### ###'},
|
|
98
|
+
{code: '+222', matrix: '## ## ####'},
|
|
99
|
+
{code: '+223', matrix: '## ## ####'},
|
|
100
|
+
{code: '+224', matrix: '## ### ###'},
|
|
101
|
+
{code: '+225', matrix: '## ### ###'},
|
|
102
|
+
{code: '+226', matrix: '## ## ####'},
|
|
103
|
+
{code: '+227', matrix: '## ## ####'},
|
|
104
|
+
{code: '+228', matrix: '## ### ###'},
|
|
105
|
+
{code: '+229', matrix: '## ## ####'},
|
|
106
|
+
{code: '+231', matrix: '## ### ###'},
|
|
107
|
+
{code: '+234', matrix: '## ### ###'},
|
|
108
|
+
{code: '+236', matrix: '## ## ####'},
|
|
109
|
+
{code: '+241', matrix: '# ## ## ##'},
|
|
110
|
+
{code: '+252', matrix: '## ### ###'},
|
|
111
|
+
{code: '+254', matrix: '### ######'},
|
|
112
|
+
{code: '+257', matrix: '## ## ####'},
|
|
113
|
+
{code: '+258', matrix: '## ### ###'},
|
|
114
|
+
{code: '+262', matrix: '##### ####'},
|
|
115
|
+
{code: '+262', matrix: '##### ####'},
|
|
116
|
+
{code: '+266', matrix: '# ### ####'},
|
|
117
|
+
{code: '+267', matrix: '## ### ###'},
|
|
118
|
+
{code: '+268', matrix: '## ## ####'},
|
|
119
|
+
{code: '+27', matrix: '## ### ####'},
|
|
120
|
+
{code: '+31', matrix: '## ### ####'},
|
|
121
|
+
{code: '+32', matrix: '### ### ###'},
|
|
122
|
+
{code: '+33', matrix: '### ### ###'},
|
|
123
|
+
{code: '+34', matrix: '### ### ###'},
|
|
124
|
+
{code: '+357', matrix: '## ### ###'},
|
|
125
|
+
{code: '+36', matrix: '### ### ###'},
|
|
126
|
+
{code: '+370', matrix: '### ## ###'},
|
|
127
|
+
{code: '+371', matrix: '## ### ###'},
|
|
128
|
+
{code: '+374', matrix: '## ### ###'},
|
|
129
|
+
{code: '+377', matrix: '## ### ###'},
|
|
130
|
+
{code: '+382', matrix: '## ### ###'},
|
|
131
|
+
{code: '+385', matrix: '## ### ###'},
|
|
132
|
+
{code: '+386', matrix: '## ### ###'},
|
|
133
|
+
{code: '+389', matrix: '## ### ###'},
|
|
134
|
+
{code: '+39', matrix: '# ### #####'},
|
|
135
|
+
{code: '+40', matrix: '## ### ####'},
|
|
136
|
+
{code: '+41', matrix: '## ### ####'},
|
|
137
|
+
{code: '+45', matrix: '## ## ## ##'},
|
|
138
|
+
{code: '+46', matrix: '## ### ####'},
|
|
139
|
+
{code: '+48', matrix: '### ### ###'},
|
|
140
|
+
{code: '+49', matrix: '### ## ####'},
|
|
141
|
+
{code: '+502', matrix: '# ### ####'},
|
|
142
|
+
{code: '+503', matrix: '## ## ####'},
|
|
143
|
+
{code: '+509', matrix: '## ## ####'},
|
|
144
|
+
{code: '+51', matrix: '### ### ###'},
|
|
145
|
+
{code: '+56', matrix: '# #### ####'},
|
|
146
|
+
{code: '+591', matrix: '# ### ####'},
|
|
147
|
+
{code: '+593', matrix: '# ### ####'},
|
|
148
|
+
{code: '+594', matrix: '##### ####'},
|
|
149
|
+
{code: '+60', matrix: '## ### ####'},
|
|
150
|
+
{code: '+60', matrix: '### ### ###'},
|
|
151
|
+
{code: '+61', matrix: '# #### ####'},
|
|
152
|
+
{code: '+62', matrix: '## ### ####'},
|
|
153
|
+
{code: '+64', matrix: '### ### ###'},
|
|
154
|
+
{code: '+66', matrix: '## ### ####'},
|
|
155
|
+
{code: '+675', matrix: '### ## ###'},
|
|
156
|
+
{code: '+81', matrix: '### ### ###'},
|
|
157
|
+
{code: '+82', matrix: '## ### ####'},
|
|
158
|
+
{code: '+84', matrix: '## #### ###'},
|
|
159
|
+
{code: '+850', matrix: '## ### ###'},
|
|
160
|
+
{code: '+855', matrix: '## ### ###'},
|
|
161
|
+
{code: '+856', matrix: '## ### ###'},
|
|
162
|
+
{code: '+880', matrix: '## ### ###'},
|
|
163
|
+
{code: '+93', matrix: '## ### ####'},
|
|
164
|
+
{code: '+94', matrix: '## ### ####'},
|
|
165
|
+
{code: '+961', matrix: '## ### ###'},
|
|
166
|
+
{code: '+966', matrix: '# ### ####'},
|
|
167
|
+
{code: '+967', matrix: '## ### ###'},
|
|
168
|
+
{code: '+968', matrix: '## ### ###'},
|
|
169
|
+
{code: '+971', matrix: '# ### ####'},
|
|
170
|
+
{code: '+972', matrix: '# ### ####'},
|
|
171
|
+
{code: '+975', matrix: '## ### ###'},
|
|
172
|
+
{code: '+976', matrix: '## ## ####'},
|
|
173
|
+
{code: '+977', matrix: '## ### ###'},
|
|
174
|
+
{code: '+993', matrix: '# ### ####'},
|
|
175
|
+
{code: '+20', matrix: '### ### ####'},
|
|
176
|
+
{code: '+211', matrix: '## ### ####'},
|
|
177
|
+
{code: '+212', matrix: '## #### ###'},
|
|
178
|
+
{code: '+213', matrix: '## ### ####'},
|
|
179
|
+
{code: '+218', matrix: '## ### ####'},
|
|
180
|
+
{code: '+221', matrix: '## ### ####'},
|
|
181
|
+
{code: '+233', matrix: '### ### ###'},
|
|
182
|
+
{code: '+235', matrix: '## ## ## ##'},
|
|
183
|
+
{code: '+240', matrix: '## ### ####'},
|
|
184
|
+
{code: '+242', matrix: '## ### ####'},
|
|
185
|
+
{code: '+243', matrix: '### ### ###'},
|
|
186
|
+
{code: '+244', matrix: '### ### ###'},
|
|
187
|
+
{code: '+249', matrix: '## ### ####'},
|
|
188
|
+
{code: '+250', matrix: '### ### ###'},
|
|
189
|
+
{code: '+251', matrix: '## ### ####'},
|
|
190
|
+
{code: '+253', matrix: '## ## ## ##'},
|
|
191
|
+
{code: '+255', matrix: '## ### ####'},
|
|
192
|
+
{code: '+256', matrix: '### ### ###'},
|
|
193
|
+
{code: '+260', matrix: '## ### ####'},
|
|
194
|
+
{code: '+261', matrix: '## ## #####'},
|
|
195
|
+
{code: '+264', matrix: '## ### ####'},
|
|
196
|
+
{code: '+265', matrix: '# #### ####'},
|
|
197
|
+
{code: '+30', matrix: '### ### ####'},
|
|
198
|
+
{code: '+351', matrix: '### ### ###'},
|
|
199
|
+
{code: '+352', matrix: '### ### ###'},
|
|
200
|
+
{code: '+353', matrix: '### ### ###'},
|
|
201
|
+
{code: '+355', matrix: '### ### ###'},
|
|
202
|
+
{code: '+359', matrix: '### ### ###'},
|
|
203
|
+
{code: '+377', matrix: '### ### ###'},
|
|
204
|
+
{code: '+378', matrix: '#### ######'},
|
|
205
|
+
{code: '+381', matrix: '## ### ####'},
|
|
206
|
+
{code: '+39', matrix: '### #### ###'},
|
|
207
|
+
{code: '+420', matrix: '### ### ###'},
|
|
208
|
+
{code: '+421', matrix: '### ### ###'},
|
|
209
|
+
{code: '+43', matrix: '### ### ####'},
|
|
210
|
+
{code: '+44', matrix: '## #### ####'},
|
|
211
|
+
{code: '+49', matrix: '### ### ####'},
|
|
212
|
+
{code: '+52', matrix: '### ### ####'},
|
|
213
|
+
{code: '+54', matrix: '### ### ####'},
|
|
214
|
+
{code: '+57', matrix: '### ### ####'},
|
|
215
|
+
{code: '+58', matrix: '### ### ####'},
|
|
216
|
+
{code: '+590', matrix: '### ### ###'},
|
|
217
|
+
{code: '+593', matrix: '## ### ####'},
|
|
218
|
+
{code: '+595', matrix: '### ### ###'},
|
|
219
|
+
{code: '+598', matrix: '# ### ## ##'},
|
|
220
|
+
{code: '+62', matrix: '### ### ####'},
|
|
221
|
+
{code: '+63', matrix: '### ### ####'},
|
|
222
|
+
{code: '+64', matrix: '### ### ####'},
|
|
223
|
+
{code: '+7', matrix: '### ### ## ##'},
|
|
224
|
+
{code: '+81', matrix: '## #### ####'},
|
|
225
|
+
{code: '+84', matrix: '### #### ###'},
|
|
226
|
+
{code: '+86', matrix: '### #### ###'},
|
|
227
|
+
{code: '+886', matrix: '# #### ####'},
|
|
228
|
+
{code: '+90', matrix: '### ### ####'},
|
|
229
|
+
{code: '+91', matrix: '#### ### ###'},
|
|
230
|
+
{code: '+92', matrix: '### ### ####'},
|
|
231
|
+
{code: '+962', matrix: '# #### ####'},
|
|
232
|
+
{code: '+963', matrix: '## #### ###'},
|
|
233
|
+
{code: '+966', matrix: '# #### ####'},
|
|
234
|
+
{code: '+967', matrix: '### ### ###'},
|
|
235
|
+
{code: '+970', matrix: '## ### ####'},
|
|
236
|
+
{code: '+971', matrix: '## ### ####'},
|
|
237
|
+
{code: '+972', matrix: '## ### ####'},
|
|
238
|
+
{code: '+98', matrix: '### ### ####'},
|
|
239
|
+
{code: '+992', matrix: '## ### ####'},
|
|
240
|
+
{code: '+995', matrix: '### ### ###'},
|
|
241
|
+
{code: '+996', matrix: '### ### ###'},
|
|
242
|
+
{code: '+998', matrix: '## ### ####'},
|
|
243
|
+
{code: '+234', matrix: '### ### ####'},
|
|
244
|
+
{code: '+234', matrix: '### ### ####'},
|
|
245
|
+
{code: '+375', matrix: '## ### ## ##'},
|
|
246
|
+
{code: '+380', matrix: '## ### ## ##'},
|
|
247
|
+
{code: '+423', matrix: '### ### ####'},
|
|
248
|
+
{code: '+49', matrix: '#### ### ####'},
|
|
249
|
+
{code: '+55', matrix: '## ##### ####'},
|
|
250
|
+
{code: '+596', matrix: '### ## ## ##'},
|
|
251
|
+
{code: '+850', matrix: '### #### ###'},
|
|
252
|
+
{code: '+856', matrix: '#### ### ###'},
|
|
253
|
+
{code: '+86', matrix: '### #### ####'},
|
|
254
|
+
{code: '+964', matrix: '### ### ####'},
|
|
255
|
+
{code: '+994', matrix: '## ### ## ##'},
|
|
256
|
+
{code: '+358', matrix: '### ### ## ##'},
|
|
257
|
+
{code: '+62', matrix: '### ### ## ###'},
|
|
258
|
+
{code: '+86', matrix: '## ##### #####'},
|
|
259
|
+
{code: '+850', matrix: '#### #############'},
|
|
260
|
+
];
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { countriesPhoneCodeList } from './countriesPhoneCode';
|
|
2
|
+
|
|
3
|
+
export const phoneMask = (value, countryCode) => {
|
|
4
|
+
let matrix = '## ##### ####';
|
|
5
|
+
|
|
6
|
+
countriesPhoneCodeList.forEach((item) => {
|
|
7
|
+
const newCode = item.code.replace(/[\s#]/g, '');
|
|
8
|
+
|
|
9
|
+
if (countryCode && countryCode.includes(newCode)) {
|
|
10
|
+
matrix = item.matrix;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
let i = 0;
|
|
15
|
+
const newValue = value.replace(/\D/g, '');
|
|
16
|
+
|
|
17
|
+
return matrix.replace(/(?!\+)./g, function (a) {
|
|
18
|
+
return /[#\d]/.test(a) && i < newValue.length
|
|
19
|
+
? newValue.charAt(i++)
|
|
20
|
+
: i >= newValue.length
|
|
21
|
+
? ''
|
|
22
|
+
: a;
|
|
23
|
+
});
|
|
24
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-native-international-phone-number",
|
|
3
|
+
"author": "AstrOOnauta (https://github.com/AstrOOnauta)",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"description": "International mobile phone input component with mask for React Native",
|
|
6
|
+
"main": "lib/index.js",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
|
+
},
|
|
10
|
+
"keywords": [
|
|
11
|
+
"react-native",
|
|
12
|
+
"typescript",
|
|
13
|
+
"react-hook-form",
|
|
14
|
+
"mask-input",
|
|
15
|
+
"phone-input",
|
|
16
|
+
"international-number-phone",
|
|
17
|
+
"components",
|
|
18
|
+
"country-picker",
|
|
19
|
+
"country",
|
|
20
|
+
"flag"
|
|
21
|
+
],
|
|
22
|
+
"license": "ISC",
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/AstrOOnauta/react-native-international-phone-number.git"
|
|
26
|
+
},
|
|
27
|
+
"bugs": {
|
|
28
|
+
"url": "https://github.com/AstrOOnauta/react-native-international-phone-number/issues"
|
|
29
|
+
},
|
|
30
|
+
"homepage": "https://github.com/AstrOOnauta/react-native-international-phone-number",
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"react": "*",
|
|
33
|
+
"react-native": "*"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"react-native-country-picker-modal": "^2.0.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"metro-react-native-babel-preset": "^0.61.0"
|
|
40
|
+
}
|
|
41
|
+
}
|