react-native-international-phone-number 0.2.8 → 0.2.10

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.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/lib/index.js +53 -16
  3. package/package.json +6 -1
package/README.md CHANGED
@@ -52,7 +52,7 @@ AND
52
52
  ## Features
53
53
 
54
54
  - 📱 Works with iOS, Android (Cross-platform) and Expo;
55
- - 🎨 Lib with UI customizable
55
+ - 🎨 Lib with UI customizable;
56
56
  - 🌎 Phone Input Mask according to the selected country.
57
57
 
58
58
  ## Basic Usage
package/lib/index.js CHANGED
@@ -16,6 +16,7 @@ import { phoneMask } from './utils/inputMask';
16
16
  function PhoneInput({
17
17
  placeholder,
18
18
  placeholderTextColor,
19
+ selectionColor,
19
20
  containerStyle,
20
21
  inputStyle,
21
22
  withDarkTheme,
@@ -47,7 +48,10 @@ function PhoneInput({
47
48
 
48
49
  return (
49
50
  <View
50
- style={[styles.container, containerStyle ? containerStyle : {}]}
51
+ style={[
52
+ withDarkTheme ? styles.darkContainer : styles.lightContainer,
53
+ containerStyle ? containerStyle : {},
54
+ ]}
51
55
  >
52
56
  <CountryPicker
53
57
  containerButtonStyle={{
@@ -55,17 +59,33 @@ function PhoneInput({
55
59
  }}
56
60
  onSelect={onSelect}
57
61
  withFilter
62
+ withAlphaFilter
63
+ withCallingCode
58
64
  withCallingCodeButton
59
65
  theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
60
66
  countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
61
67
  />
62
68
  <TextInput
63
- style={[styles.input, inputStyle ? inputStyle : {}]}
69
+ style={[
70
+ withDarkTheme ? styles.darkInput : styles.lightInput,
71
+ inputStyle ? inputStyle : {},
72
+ ]}
64
73
  placeholder={
65
74
  placeholder ? placeholder : 'Insert your phone number'
66
75
  }
67
76
  placeholderTextColor={
68
- placeholderTextColor ? placeholderTextColor : '#DDDDDD'
77
+ placeholderTextColor
78
+ ? placeholderTextColor
79
+ : withDarkTheme
80
+ ? '#CCCCCC'
81
+ : '#DDDDDD'
82
+ }
83
+ selectionColor={
84
+ selectionColor
85
+ ? selectedColor
86
+ : withDarkTheme
87
+ ? '#F3F3F3'
88
+ : '#0A0A0A'
69
89
  }
70
90
  editable={!disabled}
71
91
  keyboardType="numeric"
@@ -75,22 +95,39 @@ function PhoneInput({
75
95
  );
76
96
  }
77
97
 
98
+ const containerBase = {
99
+ flexDirection: 'row',
100
+ alignItems: 'center',
101
+ borderWidth: 1,
102
+ borderStyle: 'solid',
103
+ borderRadius: 8,
104
+ };
105
+
106
+ const inputBase = {
107
+ width: Dimensions.get('window').width - 100,
108
+ paddingVertical: Platform.OS === 'ios' ? 16 : 8,
109
+ paddingHorizontal: 16,
110
+ fontSize: 16,
111
+ };
112
+
78
113
  const styles = StyleSheet.create({
79
- container: {
80
- flexDirection: 'row',
81
- alignItems: 'center',
114
+ lightContainer: {
115
+ ...containerBase,
82
116
  backgroundColor: '#FFFFFF',
83
- borderWidth: 1,
84
- borderStyle: 'solid',
85
- borderColor: '#DDDDDD',
86
- borderRadius: 8,
117
+ borderColor: '#AAAAAA',
118
+ },
119
+ darkContainer: {
120
+ ...containerBase,
121
+ backgroundColor: '#575757',
122
+ borderColor: '#F3F3F3',
123
+ },
124
+ lightInput: {
125
+ ...inputBase,
126
+ color: '#0A0A0A',
87
127
  },
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',
128
+ darkInput: {
129
+ ...inputBase,
130
+ color: '#F3F3F3',
94
131
  },
95
132
  });
96
133
 
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.2.8",
4
+ "version": "0.2.10",
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",
@@ -9,7 +9,12 @@
9
9
  "test": "echo \"Error: no test specified\" && exit 1"
10
10
  },
11
11
  "keywords": [
12
+ "mobile",
13
+ "ios",
14
+ "android",
12
15
  "react-native",
16
+ "expo",
17
+ "components",
13
18
  "typescript",
14
19
  "react-hook-form",
15
20
  "mask-input",