Merge pull request #2 from Dhruv-Rathi/master

Changed some styling, aligned the icon and text

Author: rjvim

src/Base/Base.stories.js

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

src/Base/index.js

@@ -1,3 +1,4 @@
+import {height} from 'dom-helpers';
 import React from 'react';
 import {Text, View, TextInput} from 'react-native';
 
@@ -33,45 +34,57 @@ const Input = ({
   const getBorderColor = () => {
     if (error) {
       return props.borderColor || '#DC2626';
+    } else if (focused) {
+      return props.focusBorderColor || props.borderColor;
     }
-
-    if (focused) {
-      return props.focusColor || '#52525B';
-    }
+    return props.borderColor;
   };
 
   return (
     <>
       <View style={{...props.labelStyles}}>
-        {label && <Text>{label}</Text>}
+        {label && (
+          <Text style={{color: props.labelTextColor || '#000'}}>{label}</Text>
+        )}
       </View>
       <View
         style={{
           ...(props.wrapperStyles || {
-            height: 42,
-            borderWidth: 1,
-            borderRadius: 4,
-            paddingHorizontal: 5,
-            marginTop: 5,
-            alignItems: icon ? 'center' : 'baseline',
+            height: props.height || 42,
+            borderWidth: props.borderWidth || 1,
+            borderRadius: props.borderRadius || 4,
+            paddingHorizontal: props.paddingHorizontal || 5,
+            marginTop: props.marginTop || 5,
+            alignItems: 'center',
             borderColor: getBorderColor(),
-            flexDirection: getFlexDirection(),
+            flexDirection: getFlexDirection() || 'row',
           }),
         }}>
-        <View>{icon && icon}</View>
-        <TextInput
-          placeholder={placeholder}
-          style={textInputStyles}
-          onChangeText={onChangeText}
-          value={value}
-          onFocus={() => {
-            setFocused(true);
-          }}
-          onBlur={() => {
-            setFocused(false);
-          }}
-          {...props}
-        />
+        <View
+          style={{
+            alignItems: 'center',
+          }}>
+          {icon && icon}
+        </View>
+        <View
+          style={{
+            height: props.height || 42,
+          }}>
+          <TextInput
+            placeholder={placeholder}
+            style={textInputStyles}
+            color={props.color || '#000'}
+            onChangeText={onChangeText}
+            value={value}
+            onFocus={() => {
+              setFocused(true);
+            }}
+            onBlur={() => {
+              setFocused(false);
+            }}
+            {...props}
+          />
+        </View>
       </View>
       <View>
         {error && (