From 9801f4b990f48e86873c4d032430b602f77eb486 Mon Sep 17 00:00:00 2001
From: Halil Bilir <hbilir@gmail.com>
Date: Fri, 8 Feb 2019 15:56:31 +0300
Subject: [PATCH] moved component level constants into props

---
 README.md     | 15 +++++++++++++++
 lib/Akira.js  | 17 ++++++++++-------
 lib/Fumi.js   | 19 ++++++++++---------
 lib/Hoshi.js  | 22 +++++++++++++---------
 lib/Isao.js   | 31 ++++++++++++++++---------------
 lib/Jiro.js   | 15 ++++++++-------
 lib/Kaede.js  | 16 ++++++++++------
 lib/Kohana.js | 17 ++++++++++-------
 lib/Madoka.js | 19 +++++++++++--------
 lib/Makiko.js | 18 ++++++++++++------
 lib/Sae.js    | 17 ++++++++++-------
 11 files changed, 125 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index 3b4b19f..e9a1517 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,8 @@ const saeInput = (
     iconClass={FontAwesomeIcon}
     iconName={'pencil'}
     iconColor={'white'}
+    inputPadding={16}
+    labelHeight={24}
     // active border height
     borderHeight={2}
     // TextInput props
@@ -99,6 +101,8 @@ const fumiInput = (
     iconName={'university'}
     iconColor={'#f95a25'}
     iconSize={20}
+    iconWidth={40}
+    inputPadding={16}
   />
 );
 ```
@@ -119,6 +123,7 @@ const kohanaInput = (
     iconClass={MaterialsIcon}
     iconName={'directions-bus'}
     iconColor={'#f4d29a'}
+    inputPadding={16}
     labelStyle={{ color: '#91627b' }}
     inputStyle={{ color: '#91627b' }}
     labelContainerStyle={{ padding: 20 }}
@@ -143,6 +148,7 @@ const makikoInput = (
     iconClass={FontAwesomeIcon}
     iconName={'comment'}
     iconColor={'white'}
+    inputPadding={16}
     inputStyle={{ color: '#db786d' }}
   />
 );
@@ -164,6 +170,8 @@ const isaoInput = (
     activeColor={'#da7071'}
     // active border height
     borderHeight={8}
+    inputPadding={16}
+    labelHeight={24}
     // this is applied as passive border and label color
     passiveColor={'#dadada'}
   />
@@ -185,6 +193,7 @@ const hoshiInput = (
     borderColor={'#b76c94'}
     // active border height
     borderHeight={3}
+    inputPadding={16}
     // this is used to set backgroundColor of label mask.
     // please pass the backgroundColor of your TextInput container.
     backgroundColor={'#F9F7F6'}
@@ -205,6 +214,7 @@ const jiroInput = (
     label={'Dog\'s name'}
     // this is used as active and passive border color
     borderColor={'#9b537a'}
+    inputPadding={16}
     inputStyle={{ color: 'white' }}
   />
 );
@@ -221,6 +231,7 @@ import { Kaede } from 'react-native-textinput-effects';
 const kaedeInput = (
   <Kaede
     label={'Website'}
+    inputPadding={16}
   />
 );
 ```
@@ -238,6 +249,8 @@ const akiraInput = (
     label={'First Name'}
     // this is used as active and passive border color
     borderColor={'#a5d1cc'}
+    inputPadding={16}
+    labelHeight={24}
     labelStyle={{ color: '#ac83c4' }}
   />
 );
@@ -256,6 +269,8 @@ const madokaInput = (
     label={'Frequency'}
     // this is used as active and passive border color
     borderColor={'#aee2c9'}
+    inputPadding={16}
+    labelHeight={24}
     labelStyle={{ color: '#008445' }}
     inputStyle={{ color: '#f4a197' }}
   />
diff --git a/lib/Akira.js b/lib/Akira.js
index f218bdd..f646a3b 100644
--- a/lib/Akira.js
+++ b/lib/Akira.js
@@ -11,20 +11,21 @@ import {
 
 import BaseInput from './BaseInput';
 
-const LABEL_HEIGHT = 24;
-const PADDING = 16;
-
 export default class Akira extends BaseInput {
   static propTypes = {
     /*
      * this is applied as active border and label color
      */
     borderColor: PropTypes.string,
+    labelHeight: PropTypes.number,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: '#7A7593',
+    labelHeight: 24,
+    inputPadding: 16,
     height: 48,
     animationDuration: 200,
   };
@@ -34,6 +35,8 @@ export default class Akira extends BaseInput {
       label,
       style: containerStyle,
       height: inputHeight,
+      labelHeight,
+      inputPadding,
       inputStyle,
       labelStyle,
       borderColor,
@@ -50,12 +53,12 @@ export default class Akira extends BaseInput {
           <Animated.View
             style={{
               width,
-              height: LABEL_HEIGHT,
+              height: labelHeight,
               transform: [
                 {
                   translateY: focusedAnim.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [LABEL_HEIGHT + PADDING, 0],
+                    outputRange: [labelHeight + inputPadding, 0],
                   }),
                 },
               ],
@@ -75,6 +78,7 @@ export default class Akira extends BaseInput {
             {
               width,
               height: inputHeight,
+              paddingHorizontal: inputPadding,
             },
           ]}
           value={value}
@@ -101,7 +105,7 @@ export default class Akira extends BaseInput {
         <Animated.View
           style={{
             position: 'absolute',
-            top: LABEL_HEIGHT,
+            top: labelHeight,
             width,
             height: focusedAnim.interpolate({
               inputRange: [0, 1],
@@ -151,7 +155,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   textInput: {
-    paddingHorizontal: PADDING,
     padding: 0,
     color: 'black',
     fontSize: 18,
diff --git a/lib/Fumi.js b/lib/Fumi.js
index 2468290..c1a86b4 100644
--- a/lib/Fumi.js
+++ b/lib/Fumi.js
@@ -10,9 +10,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-const ICON_WIDTH = 40;
-
 export default class Fumi extends BaseInput {
   static propTypes = {
     /*
@@ -43,6 +40,8 @@ export default class Fumi extends BaseInput {
     height: 48,
     iconColor: '#00aeef',
     iconSize: 20,
+    iconWidth: 40,
+    inputPadding: 16,
     passiveIconColor: '#a3a3a3',
     animationDuration: 300,
   };
@@ -58,11 +57,13 @@ export default class Fumi extends BaseInput {
       style: containerStyle,
       inputStyle,
       height: inputHeight,
+      inputPadding,
+      iconWidth,
       labelStyle,
     } = this.props;
     const { focusedAnim, value } = this.state;
     const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
-    const ANIM_PATH = PADDING + inputHeight;
+    const ANIM_PATH = inputPadding + inputHeight;
     const NEGATIVE_ANIM_PATH = ANIM_PATH * -1;
 
     return (
@@ -79,7 +80,7 @@ export default class Fumi extends BaseInput {
             size={iconSize}
             style={{
               position: 'absolute',
-              left: PADDING,
+              left: inputPadding,
               bottom: focusedAnim.interpolate({
                 inputRange: [0, 0.5, 0.51, 0.7, 1],
                 outputRange: [
@@ -102,7 +103,7 @@ export default class Fumi extends BaseInput {
             styles.separator,
             {
               height: inputHeight,
-              left: ICON_WIDTH + 8,
+              left: iconWidth + 8,
             },
           ]}
         />
@@ -110,7 +111,7 @@ export default class Fumi extends BaseInput {
           <Animated.View
             style={{
               position: 'absolute',
-              left: ICON_WIDTH + PADDING,
+              left: iconWidth + inputPadding,
               height: inputHeight,
               top: focusedAnim.interpolate({
                 inputRange: [0, 0.5, 0.51, 0.7, 1],
@@ -119,7 +120,7 @@ export default class Fumi extends BaseInput {
                   ANIM_PATH,
                   NEGATIVE_ANIM_PATH,
                   NEGATIVE_ANIM_PATH,
-                  PADDING / 2,
+                  inputPadding / 2,
                 ],
               }),
             }}
@@ -150,7 +151,7 @@ export default class Fumi extends BaseInput {
           style={[
             styles.textInput,
             {
-              marginLeft: ICON_WIDTH + PADDING,
+              marginLeft: iconWidth + inputPadding,
               color: iconColor,
             },
             inputStyle,
diff --git a/lib/Hoshi.js b/lib/Hoshi.js
index 98a51a6..544fba9 100644
--- a/lib/Hoshi.js
+++ b/lib/Hoshi.js
@@ -11,9 +11,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-const BORDER_HEIGHT_DEFAULT = 3;
-
 export default class Hoshi extends BaseInput {
   static propTypes = {
     borderColor: PropTypes.string,
@@ -22,13 +19,15 @@ export default class Hoshi extends BaseInput {
      * this should be replaced if we can find a better way to mask label animation.
      */
     maskColor: PropTypes.string,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: 'red',
+    inputPadding: 16,
     height: 48,
-    borderHeight: 6,
+    borderHeight: 3,
   };
 
   render() {
@@ -40,6 +39,7 @@ export default class Hoshi extends BaseInput {
       maskColor,
       borderColor,
       borderHeight,
+      inputPadding,
       height: inputHeight,
     } = this.props;
     const { width, focusedAnim, value } = this.state;
@@ -52,7 +52,7 @@ export default class Hoshi extends BaseInput {
           styles.container,
           containerStyle,
           {
-            height: inputHeight + PADDING,
+            height: inputHeight + inputPadding,
             width: containerWidth,
           },
         ]}
@@ -67,6 +67,7 @@ export default class Hoshi extends BaseInput {
             {
               width,
               height: inputHeight,
+              left: inputPadding,
             },
           ]}
           value={value}
@@ -90,7 +91,7 @@ export default class Hoshi extends BaseInput {
                 }),
                 left: focusedAnim.interpolate({
                   inputRange: [0, 0.5, 0.51, 1],
-                  outputRange: [PADDING, 2 * PADDING, 0, PADDING],
+                  outputRange: [inputPadding, 2 * inputPadding, 0, inputPadding],
                 }),
               },
             ]}
@@ -100,7 +101,12 @@ export default class Hoshi extends BaseInput {
             </Text>
           </Animated.View>
         </TouchableWithoutFeedback>
-        <View style={[styles.labelMask, { backgroundColor: maskColor }]} />
+        <View
+          style={[styles.labelMask, {
+            backgroundColor: maskColor,
+            width: inputPadding,
+          }]}
+        />
         <Animated.View
           style={[
             styles.border,
@@ -134,7 +140,6 @@ const styles = StyleSheet.create({
   textInput: {
     position: 'absolute',
     bottom: 2,
-    left: PADDING,
     padding: 0,
     color: '#6a7989',
     fontSize: 18,
@@ -142,7 +147,6 @@ const styles = StyleSheet.create({
   },
   labelMask: {
     height: 24,
-    width: PADDING,
   },
   border: {
     position: 'absolute',
diff --git a/lib/Isao.js b/lib/Isao.js
index a294988..3438911 100644
--- a/lib/Isao.js
+++ b/lib/Isao.js
@@ -11,9 +11,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const LABEL_HEIGHT = 24;
-const PADDING = 16;
-
 export default class Isao extends BaseInput {
   static propTypes = {
     /*
@@ -28,6 +25,8 @@ export default class Isao extends BaseInput {
      * active border height
      */
     borderHeight: PropTypes.number,
+    labelHeight: PropTypes.number,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
@@ -35,6 +34,8 @@ export default class Isao extends BaseInput {
     activeColor: 'red',
     passiveColor: 'white',
     height: 48,
+    labelHeight: 24,
+    inputPadding: 16,
     borderHeight: 8,
     easing: Easing.bezier(0.2, 1, 0.3, 1),
   };
@@ -45,6 +46,8 @@ export default class Isao extends BaseInput {
       style: containerStyle,
       height: inputHeight,
       borderHeight,
+      inputPadding,
+      labelHeight,
       inputStyle,
       labelStyle,
       activeColor,
@@ -61,7 +64,7 @@ export default class Isao extends BaseInput {
         style={[
           containerStyle,
           {
-            height: inputHeight + LABEL_HEIGHT,
+            height: inputHeight + labelHeight,
           },
         ]}
         onLayout={this._onLayout}
@@ -84,6 +87,7 @@ export default class Isao extends BaseInput {
               {
                 width,
                 height: inputHeight,
+                paddingHorizontal: inputPadding,
               },
             ]}
             value={value}
@@ -96,7 +100,7 @@ export default class Isao extends BaseInput {
         <TouchableWithoutFeedback onPress={this.focus}>
           <View
             style={{
-              height: LABEL_HEIGHT,
+              height: labelHeight,
               width,
             }}
           >
@@ -113,9 +117,11 @@ export default class Isao extends BaseInput {
                   }),
                   bottom: focusedAnim.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [0, LABEL_HEIGHT],
+                    outputRange: [0, labelHeight],
                   }),
                   color: passiveColor,
+                  height: labelHeight,
+                  left: inputPadding,
                 },
               ]}
             >
@@ -133,9 +139,11 @@ export default class Isao extends BaseInput {
                   }),
                   bottom: focusedAnim.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [LABEL_HEIGHT * -1, 0],
+                    outputRange: [labelHeight * -1, 0],
                   }),
                   color: activeColor,
+                  height: labelHeight,
+                  left: inputPadding,
                 },
               ]}
             >
@@ -153,6 +161,7 @@ export default class Isao extends BaseInput {
               }),
               width,
               backgroundColor: activeColor,
+              bottom: labelHeight,
             },
           ]}
         />
@@ -165,21 +174,14 @@ const styles = StyleSheet.create({
   inputContainer: {
     borderBottomWidth: 2,
   },
-  labelContainer: {
-    paddingLeft: PADDING,
-    height: LABEL_HEIGHT,
-  },
   label: {
     position: 'absolute',
-    height: LABEL_HEIGHT,
-    left: PADDING,
     paddingTop: 4,
     backgroundColor: 'transparent',
     fontSize: 14,
     fontWeight: 'bold',
   },
   textInput: {
-    paddingHorizontal: PADDING,
     color: '#afb3b8',
     fontSize: 18,
     fontWeight: 'bold',
@@ -187,7 +189,6 @@ const styles = StyleSheet.create({
   },
   border: {
     position: 'absolute',
-    bottom: LABEL_HEIGHT,
     left: 0,
     right: 0,
   },
diff --git a/lib/Jiro.js b/lib/Jiro.js
index 90a65a1..d47d394 100644
--- a/lib/Jiro.js
+++ b/lib/Jiro.js
@@ -12,16 +12,16 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-
 export default class Jiro extends BaseInput {
   static propTypes = {
     borderColor: PropTypes.string,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: 'red',
+    inputPadding: 16,
     height: 48,
   };
 
@@ -82,6 +82,7 @@ export default class Jiro extends BaseInput {
       labelStyle,
       borderColor,
       height: inputHeight,
+      inputPadding,
     } = this.props;
     const {
       width,
@@ -90,7 +91,7 @@ export default class Jiro extends BaseInput {
       labelPositionAnim,
       value,
     } = this.state;
-    const totalHeight = inputHeight + 2 * PADDING;
+    const totalHeight = inputHeight + 2 * inputPadding;
 
     return (
       <View
@@ -112,7 +113,7 @@ export default class Jiro extends BaseInput {
               }),
               top: borderPositionAnim.interpolate({
                 inputRange: [0, 1],
-                outputRange: [totalHeight - 3, 2 * PADDING],
+                outputRange: [totalHeight - 3, 2 * inputPadding],
               }),
               backgroundColor: borderColor,
             },
@@ -127,6 +128,7 @@ export default class Jiro extends BaseInput {
             {
               width,
               height: inputHeight,
+              left: inputPadding,
             },
           ]}
           value={value}
@@ -142,8 +144,9 @@ export default class Jiro extends BaseInput {
               {
                 bottom: labelPositionAnim.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [PADDING / 2, inputHeight + PADDING / 4],
+                  outputRange: [inputPadding / 2, inputHeight + inputPadding / 4],
                 }),
+                left: inputPadding,
               },
             ]}
           >
@@ -160,7 +163,6 @@ export default class Jiro extends BaseInput {
 const styles = StyleSheet.create({
   labelContainer: {
     position: 'absolute',
-    left: PADDING,
     backgroundColor: 'transparent',
   },
   label: {
@@ -172,7 +174,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 0,
     padding: 0,
-    left: PADDING,
     color: 'black',
     fontSize: 18,
     fontWeight: 'bold',
diff --git a/lib/Kaede.js b/lib/Kaede.js
index 10cd246..e66deba 100644
--- a/lib/Kaede.js
+++ b/lib/Kaede.js
@@ -12,16 +12,16 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-
 export default class Kaede extends BaseInput {
   static propTypes = {
     easing: PropTypes.func,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     easing: Easing.bezier(0.2, 1, 0.3, 1),
+    inputPadding: 16,
     height: 60,
   };
 
@@ -32,6 +32,7 @@ export default class Kaede extends BaseInput {
       inputStyle,
       labelStyle,
       height: inputHeight,
+      inputPadding,
     } = this.props;
     const { width, focusedAnim, value } = this.state;
     const inputWidth = width * 0.6;
@@ -56,7 +57,10 @@ export default class Kaede extends BaseInput {
           <TextInput
             ref={this.input}
             {...this.props}
-            style={[styles.textInput, inputStyle, { height: inputHeight }]}
+            style={[styles.textInput, inputStyle, {
+              height: inputHeight,
+              padding: inputPadding,
+            }]}
             value={value}
             onBlur={this._onBlur}
             onFocus={this._onFocus}
@@ -79,7 +83,9 @@ export default class Kaede extends BaseInput {
               backgroundColor: labelBackgroundColor,
             }}
           >
-            <Text style={[styles.label, labelStyle]}>
+            <Text style={[styles.label, labelStyle, {
+              marginHorizontal: inputPadding,
+            }]}>
               {label}
             </Text>
           </Animated.View>
@@ -91,13 +97,11 @@ export default class Kaede extends BaseInput {
 
 const styles = StyleSheet.create({
   label: {
-    marginHorizontal: PADDING,
     fontSize: 16,
     fontWeight: 'bold',
     color: '#6a7989',
   },
   textInput: {
-    padding: PADDING,
     backgroundColor: 'white',
     color: 'black',
     fontSize: 16,
diff --git a/lib/Kohana.js b/lib/Kohana.js
index bc25a58..e019e04 100644
--- a/lib/Kohana.js
+++ b/lib/Kohana.js
@@ -12,8 +12,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-
 export default class Kohana extends BaseInput {
   static propTypes = {
     /*
@@ -34,11 +32,14 @@ export default class Kohana extends BaseInput {
      * Passed to react-native-vector-icons library as size prop.
      */
     iconSize: PropTypes.number,
+
+    inputPadding: PropTypes.number,
   };
 
   static defaultProps = {
     easing: Easing.bezier(0.2, 1, 0.3, 1),
     iconSize: 25,
+    inputPadding: 16,
     useNativeDriver: false,
   };
 
@@ -50,6 +51,7 @@ export default class Kohana extends BaseInput {
       iconName,
       label,
       style: containerStyle,
+      inputPadding,
       inputStyle,
       labelStyle,
       iconContainerStyle,
@@ -66,7 +68,7 @@ export default class Kohana extends BaseInput {
           <Animated.View
             style={{
               justifyContent: 'center',
-              padding: PADDING,
+              padding: inputPadding,
               transform: [
                 {
                   translateX: focusedAnim.interpolate({
@@ -85,13 +87,13 @@ export default class Kohana extends BaseInput {
           <Animated.View
             style={{
               position: 'absolute',
-              top: PADDING,
+              top: inputPadding,
               left: 0,
               transform: [
                 {
                   translateX: focusedAnim.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [PADDING, 80],
+                    outputRange: [inputPadding, 80],
                   }),
                 },
               ],
@@ -110,7 +112,9 @@ export default class Kohana extends BaseInput {
         <TextInput
           ref={this.input}
           {...this.props}
-          style={[styles.textInput, inputStyle]}
+          style={[styles.textInput, inputStyle, {
+            paddingHorizontal: inputPadding,
+          }]}
           value={value}
           onBlur={this._onBlur}
           onFocus={this._onFocus}
@@ -136,7 +140,6 @@ const styles = StyleSheet.create({
   },
   textInput: {
     flex: 1,
-    paddingHorizontal: PADDING,
     paddingVertical: 0,
     color: 'black',
     fontSize: 18,
diff --git a/lib/Madoka.js b/lib/Madoka.js
index 76ec37b..8066bd0 100644
--- a/lib/Madoka.js
+++ b/lib/Madoka.js
@@ -10,21 +10,22 @@ import {
 
 import BaseInput from './BaseInput';
 
-const LABEL_HEIGHT = 24;
-const PADDING = 16;
-
 export default class Madoka extends BaseInput {
   static propTypes = {
     /*
      * this is applied as active border and label color
      */
     borderColor: PropTypes.string,
+    labelHeight: PropTypes.number,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: '#7A7593',
     animationDuration: 250,
+    labelHeight: 24,
+    inputPadding: 16,
     height: 48,
   };
 
@@ -33,6 +34,8 @@ export default class Madoka extends BaseInput {
       label,
       style: containerStyle,
       height: inputHeight,
+      inputPadding,
+      labelHeight,
       inputStyle,
       labelStyle,
       borderColor,
@@ -45,7 +48,7 @@ export default class Madoka extends BaseInput {
 
     return (
       <View
-        style={[containerStyle, { height: inputHeight + LABEL_HEIGHT + 8 }]}
+        style={[containerStyle, { height: inputHeight + labelHeight + 8 }]}
         onLayout={this._onLayout}
       >
         <View
@@ -60,6 +63,7 @@ export default class Madoka extends BaseInput {
               {
                 width,
                 height: inputHeight,
+                paddingHorizontal: inputPadding,
               },
             ]}
             value={value}
@@ -117,11 +121,12 @@ export default class Madoka extends BaseInput {
               styles.labelContainer,
               {
                 width,
-                height: LABEL_HEIGHT,
+                height: labelHeight,
                 bottom: focusedAnim.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [LABEL_HEIGHT + PADDING, 0],
+                  outputRange: [labelHeight + inputPadding, 0],
                 }),
+                left: inputPadding,
               },
             ]}
           >
@@ -152,7 +157,6 @@ const styles = StyleSheet.create({
   },
   labelContainer: {
     position: 'absolute',
-    left: PADDING,
   },
   label: {
     backgroundColor: 'transparent',
@@ -160,7 +164,6 @@ const styles = StyleSheet.create({
     color: '#6a7989',
   },
   textInput: {
-    paddingHorizontal: PADDING,
     paddingVertical: 0,
     color: 'black',
     fontSize: 18,
diff --git a/lib/Makiko.js b/lib/Makiko.js
index fdf798a..363bd3e 100644
--- a/lib/Makiko.js
+++ b/lib/Makiko.js
@@ -12,8 +12,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-
 export default class Makiko extends BaseInput {
   static propTypes = {
     /*
@@ -41,6 +39,9 @@ export default class Makiko extends BaseInput {
      */
     iconSize: PropTypes.number,
     iconWidth: PropTypes.number,
+
+    inputPadding: PropTypes.number,
+    height: PropTypes.number,
   };
 
   static defaultProps = {
@@ -48,6 +49,7 @@ export default class Makiko extends BaseInput {
     iconSize: 30,
     iconWidth: 60,
     height: 48,
+    inputPadding: 16,
     easing: Easing.bezier(0.7, 0, 0.3, 1),
     animationDuration: 300,
   };
@@ -61,6 +63,7 @@ export default class Makiko extends BaseInput {
       iconWidth,
       style: containerStyle,
       height: inputHeight,
+      inputPadding,
       inputStyle,
       label,
       labelStyle,
@@ -97,7 +100,7 @@ export default class Makiko extends BaseInput {
                 }),
                 left: focusedAnim.interpolate({
                   inputRange: [0, 0.2, 1],
-                  outputRange: [PADDING, -22, -22],
+                  outputRange: [inputPadding, -22, -22],
                 }),
                 height: focusedAnim.interpolate({
                   inputRange: [0, 0.2, 1],
@@ -113,7 +116,11 @@ export default class Makiko extends BaseInput {
               style={[
                 styles.label,
                 labelStyle,
-                { left: iconWidth, color: iconColor },
+                {
+                  left: iconWidth,
+                  top: inputPadding,
+                  color: iconColor,
+                },
               ]}
             >
               {label}
@@ -141,6 +148,7 @@ export default class Makiko extends BaseInput {
             {
               width,
               height: inputHeight,
+              paddingHorizontal: inputPadding,
             },
           ]}
           value={value}
@@ -161,14 +169,12 @@ const styles = StyleSheet.create({
   },
   label: {
     position: 'absolute',
-    top: PADDING,
     fontSize: 16,
     fontWeight: 'bold',
     color: 'white',
     backgroundColor: 'transparent',
   },
   textInput: {
-    paddingHorizontal: PADDING,
     paddingVertical: 0,
     color: 'black',
     fontSize: 18,
diff --git a/lib/Sae.js b/lib/Sae.js
index 5658f16..9378127 100644
--- a/lib/Sae.js
+++ b/lib/Sae.js
@@ -10,9 +10,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const LABEL_HEIGHT = 24;
-const PADDING = 16;
-
 export default class Sae extends BaseInput {
   static propTypes = {
     height: PropTypes.number,
@@ -35,11 +32,15 @@ export default class Sae extends BaseInput {
      * This is also used as border color.
      */
     iconColor: PropTypes.string,
+    inputPadding: PropTypes.number,
+    labelHeight: PropTypes.number,
   };
 
   static defaultProps = {
     iconColor: 'white',
     height: 48,
+    inputPadding: 16,
+    labelHeight: 24,
     borderHeight: 2,
     animationDuration: 300,
     iconName: 'pencil',
@@ -53,6 +54,8 @@ export default class Sae extends BaseInput {
       label,
       style: containerStyle,
       height: inputHeight,
+      inputPadding,
+      labelHeight,
       borderHeight,
       inputStyle,
       labelStyle,
@@ -66,7 +69,7 @@ export default class Sae extends BaseInput {
           styles.container,
           containerStyle,
           {
-            height: inputHeight + PADDING,
+            height: inputHeight + inputPadding,
           },
         ]}
         onLayout={this._onLayout}
@@ -77,7 +80,7 @@ export default class Sae extends BaseInput {
               position: 'absolute',
               bottom: focusedAnim.interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, LABEL_HEIGHT + PADDING],
+                outputRange: [0, labelHeight + inputPadding],
               }),
             }}
           >
@@ -106,6 +109,7 @@ export default class Sae extends BaseInput {
             {
               width,
               height: inputHeight,
+              paddingTop: inputPadding / 2,
             },
           ]}
           value={value}
@@ -123,7 +127,7 @@ export default class Sae extends BaseInput {
               bottom: 0,
               right: focusedAnim.interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, width + PADDING],
+                outputRange: [0, width + inputPadding],
               }),
               transform: [
                 {
@@ -170,7 +174,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 0,
     left: 0,
-    paddingTop: PADDING / 2,
     paddingLeft: 0,
     color: 'white',
     fontSize: 18,