Required Changes

Author: Dhruv-Rathi

src/Base/Base.stories.js

@@ -29,11 +29,11 @@ storiesOf('Default', module)
       onChangeText={text => onChangeText(text)}
       labelTextColor="#3B82F6"
       // value={value}
-      icon={<Text>+91</Text>}
+      // icon={<Text>+91</Text>}
       borderColor="#3B82F6"
       // color="#3B82F6"
       // iconPosition="left"
-      // focusColor="#22D3EE"
+      // focusBorderColor="#22D3EE"
     />
   ))
   .add('Default Required Field', () => (

src/Base/index.js

@@ -34,10 +34,8 @@ const Input = ({
   const getBorderColor = () => {
     if (error) {
       return props.borderColor || '#DC2626';
-    }
-
-    if (focused) {
-      return props.focusColor || props.borderColor || '#52525B';
+    } else if (focused) {
+      return props.focusBorderColor || props.borderColor;
     }
     return props.borderColor;
   };
@@ -57,21 +55,19 @@ const Input = ({
             borderRadius: props.borderRadius || 4,
             paddingHorizontal: props.paddingHorizontal || 5,
             marginTop: props.marginTop || 5,
-            alignItems: 'icon' ? 'center' : 'baseline',
+            alignItems: 'center',
             borderColor: getBorderColor(),
             flexDirection: getFlexDirection() || 'row',
           }),
         }}>
         <View
           style={{
-            flex: 1,
             alignItems: 'center',
           }}>
           {icon && icon}
         </View>
         <View
           style={{
-            flex: 8,
             height: props.height || 42,
           }}>
           <TextInput