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

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 +51 -16
  3. package/package.json +1 -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={{
@@ -60,12 +64,26 @@ function PhoneInput({
60
64
  countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
61
65
  />
62
66
  <TextInput
63
- style={[styles.input, inputStyle ? inputStyle : {}]}
67
+ style={[
68
+ withDarkTheme ? styles.darkInput : styles.lightInput,
69
+ inputStyle ? inputStyle : {},
70
+ ]}
64
71
  placeholder={
65
72
  placeholder ? placeholder : 'Insert your phone number'
66
73
  }
67
74
  placeholderTextColor={
68
- placeholderTextColor ? placeholderTextColor : '#DDDDDD'
75
+ placeholderTextColor
76
+ ? placeholderTextColor
77
+ : withDarkTheme
78
+ ? '#CCCCCC'
79
+ : '#DDDDDD'
80
+ }
81
+ selectionColor={
82
+ selectionColor
83
+ ? selectedColor
84
+ : withDarkTheme
85
+ ? '#F3F3F3'
86
+ : '#0A0A0A'
69
87
  }
70
88
  editable={!disabled}
71
89
  keyboardType="numeric"
@@ -75,22 +93,39 @@ function PhoneInput({
75
93
  );
76
94
  }
77
95
 
96
+ const containerBase = {
97
+ flexDirection: 'row',
98
+ alignItems: 'center',
99
+ borderWidth: 1,
100
+ borderStyle: 'solid',
101
+ borderRadius: 8,
102
+ };
103
+
104
+ const inputBase = {
105
+ width: Dimensions.get('window').width - 100,
106
+ paddingVertical: Platform.OS === 'ios' ? 16 : 8,
107
+ paddingHorizontal: 16,
108
+ fontSize: 16,
109
+ };
110
+
78
111
  const styles = StyleSheet.create({
79
- container: {
80
- flexDirection: 'row',
81
- alignItems: 'center',
112
+ lightContainer: {
113
+ ...containerBase,
82
114
  backgroundColor: '#FFFFFF',
83
- borderWidth: 1,
84
- borderStyle: 'solid',
85
- borderColor: '#DDDDDD',
86
- borderRadius: 8,
115
+ borderColor: '#AAAAAA',
116
+ },
117
+ darkContainer: {
118
+ ...containerBase,
119
+ backgroundColor: '#575757',
120
+ borderColor: '#F3F3F3',
121
+ },
122
+ lightInput: {
123
+ ...inputBase,
124
+ color: '#0A0A0A',
87
125
  },
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',
126
+ darkInput: {
127
+ ...inputBase,
128
+ color: '#F3F3F3',
94
129
  },
95
130
  });
96
131
 
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.9",
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",