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

package/README.md

@@ -52,7 +52,7 @@ AND
 ## Features
 
 - 📱 Works with iOS, Android (Cross-platform) and Expo;
-- 🎨 Lib with UI customizable
+- 🎨 Lib with UI customizable;
 - 🌎 Phone Input Mask according to the selected country.
 
 ## Basic Usage
@@ -204,6 +204,35 @@ export default function App() {
 }
 ```
 
+## Customizing lib
+
+### Dark mode:
+
+```jsx
+  <PhoneInput
+    ...
+    withDarkTheme
+  />
+```
+
+### containerStyle + inputStyle:
+
+```jsx
+  <PhoneInput
+    ...
+    inputStyle={{
+      color: '#F3F3F3',
+    }}
+    containerStyle={{
+      backgroundColor: '#575757',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: '#F3F3F3',
+      marginVertical: 16,
+    }}
+  />
+```
+
 ## Props
 
 - `value?`: string

package/lib/index.d.ts

@@ -1,12 +1,17 @@
 import { Dispatch, SetStateAction } from 'react';
-import { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+import {
+  StyleProp,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import { Country } from 'react-native-country-picker-modal';
 
 interface PhoneInputProps extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
   withDarkTheme?: boolean;
   disabled?: boolean;
   selectedCountry: undefined | Country;

package/lib/index.js

@@ -16,6 +16,7 @@ import { phoneMask } from './utils/inputMask';
 function PhoneInput({
   placeholder,
   placeholderTextColor,
+  selectionColor,
   containerStyle,
   inputStyle,
   withDarkTheme,
@@ -46,7 +47,12 @@ function PhoneInput({
   }, []);
 
   return (
-    <View style={containerStyle ? containerStyle : styles.container}>
+    <View
+      style={[
+        withDarkTheme ? styles.darkContainer : styles.lightContainer,
+        containerStyle ? containerStyle : {},
+      ]}
+    >
       <CountryPicker
         containerButtonStyle={{
           paddingLeft: 20,
@@ -58,12 +64,26 @@ function PhoneInput({
         countryCode={selectedCountry ? selectedCountry.cca2 : 'BR'}
       />
       <TextInput
-        style={inputStyle ? inputStyle : styles.input}
+        style={[
+          withDarkTheme ? styles.darkInput : styles.lightInput,
+          inputStyle ? inputStyle : {},
+        ]}
         placeholder={
           placeholder ? placeholder : 'Insert your phone number'
         }
         placeholderTextColor={
-          placeholderTextColor ? placeholderTextColor : '#DDDDDD'
+          placeholderTextColor
+            ? placeholderTextColor
+            : withDarkTheme
+            ? '#CCCCCC'
+            : '#DDDDDD'
+        }
+        selectionColor={
+          selectionColor
+            ? selectedColor
+            : withDarkTheme
+            ? '#F3F3F3'
+            : '#0A0A0A'
         }
         editable={!disabled}
         keyboardType="numeric"
@@ -73,22 +93,39 @@ function PhoneInput({
   );
 }
 
+const containerBase = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: 8,
+};
+
+const inputBase = {
+  width: Dimensions.get('window').width - 100,
+  paddingVertical: Platform.OS === 'ios' ? 16 : 8,
+  paddingHorizontal: 16,
+  fontSize: 16,
+};
+
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
+  lightContainer: {
+    ...containerBase,
     backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: '#DDDDDD',
-    borderRadius: 8,
+    borderColor: '#AAAAAA',
+  },
+  darkContainer: {
+    ...containerBase,
+    backgroundColor: '#575757',
+    borderColor: '#F3F3F3',
+  },
+  lightInput: {
+    ...inputBase,
+    color: '#0A0A0A',
   },
-  input: {
-    width: Dimensions.get('window').width - 100,
-    paddingVertical: Platform.OS === 'ios' ? 16 : 8,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    color: '#000000',
+  darkInput: {
+    ...inputBase,
+    color: '#F3F3F3',
   },
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",