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

package/README.md

@@ -157,7 +157,7 @@ interface FormProps extends FieldValues {
 export default function App() {
   const [selectedCountry, setSelectedCountry] = useState<undefined | Country>(undefined);
 
-  const { control, handleSubmit, resetField } = useForm();
+  const { control, handleSubmit, resetField } = useForm<FormProps>();
 
   function onSubmit(form: FormProps) {
     Alert.alert(
@@ -215,7 +215,11 @@ export default function App() {
   />
 ```
 
-### containerStyle + inputStyle:
+### Custom Lib Styles:
+
+<div>
+  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png">
+</div>
 
 ```jsx
   <PhoneInput
@@ -230,6 +234,12 @@ export default function App() {
       borderColor: '#F3F3F3',
       marginVertical: 16,
     }}
+    flagContainerStyle={{
+      borderTopLeftRadius: 7,
+      borderBottomLeftRadius: 7,
+      backgroundColor: '#808080',
+      justifyContent: 'center',
+    }}
   />
 ```
 
@@ -238,7 +248,8 @@ export default function App() {
 - `value?`: string
 - `onChangeText?`: (text: string) => void
 - `containerStyle?`: StyleProp<ViewStyle>
-- `inputStyle?`: StyleProp<ViewStyle>
+- `flagContainerStyle?`: StyleProp<ViewStyle>
+- `inputStyle?`: StyleProp<InputStyle>
 - `withDarkTheme?`: boolean
 - `disabled?`: boolean
 - `placeholder?`: string

package/lib/index.d.ts

@@ -11,6 +11,7 @@ interface PhoneInputProps extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
+  flagContainerStyle?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   withDarkTheme?: boolean;
   disabled?: boolean;

package/lib/index.js

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StyleSheet,
   Dimensions,
-  Platform,
   View,
   TextInput,
 } from 'react-native';
@@ -18,6 +17,7 @@ function PhoneInput({
   placeholderTextColor,
   selectionColor,
   containerStyle,
+  flagContainerStyle,
   inputStyle,
   withDarkTheme,
   disabled,
@@ -25,6 +25,10 @@ function PhoneInput({
   setSelectedCountry,
   ...rest
 }) {
+  const [containerWidth, setContainerWidth] = useState(
+    Dimensions.get('window').width
+  );
+
   const onSelect = (country) => {
     if (setSelectedCountry) {
       setSelectedCountry({
@@ -52,11 +56,13 @@ function PhoneInput({
         withDarkTheme ? styles.darkContainer : styles.lightContainer,
         containerStyle ? containerStyle : {},
       ]}
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
     >
       <CountryPicker
-        containerButtonStyle={{
-          paddingLeft: 20,
-        }}
+        containerButtonStyle={[
+          flagContainerBase,
+          flagContainerStyle ? flagContainerStyle : {},
+        ]}
         onSelect={onSelect}
         withFilter
         withAlphaFilter
@@ -68,6 +74,7 @@ function PhoneInput({
       <TextInput
         style={[
           withDarkTheme ? styles.darkInput : styles.lightInput,
+          { width: containerWidth - 100 },
           inputStyle ? inputStyle : {},
         ]}
         placeholder={
@@ -98,14 +105,24 @@ function PhoneInput({
 const containerBase = {
   flexDirection: 'row',
   alignItems: 'center',
+  justifyContent: 'space-between',
   borderWidth: 1,
   borderStyle: 'solid',
   borderRadius: 8,
+  width: '100%',
+  height: 45,
+};
+
+const flagContainerBase = {
+  width: 100,
+  height: '99%',
+  alignItems: 'center',
+  justifyContent: 'center',
 };
 
 const inputBase = {
-  width: Dimensions.get('window').width - 100,
-  paddingVertical: Platform.OS === 'ios' ? 16 : 8,
+  width: Dimensions.get('window').width - 140,
+  paddingVertical: 8,
   paddingHorizontal: 16,
   fontSize: 16,
 };