created Makiko

Author: halilb

Example/TextInputEffectsExample.js

@@ -15,6 +15,7 @@ import {
   Akira,
   Hideo,
   Kohana,
+  Makiko,
 } from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
@@ -74,6 +75,13 @@ export default class TextInputEffectsExample extends Component {
           iconName={'phone'}
           iconColor={'#ddd'}
         />
+        <Makiko
+          style={styles.input}
+          label={'Comment'}
+          iconClass={FontAwesomeIcon}
+          iconName={'comment'}
+          iconColor={'white'}
+        />
       </ScrollView>
     );
   }

lib/Hideo.js

@@ -9,7 +9,7 @@ import {
 
 import BaseInput from './BaseInput';
 
-export default class Akira extends BaseInput {
+export default class Hideo extends BaseInput {
 
   static propTypes = {
     /*
@@ -26,7 +26,7 @@ export default class Akira extends BaseInput {
     /*
      * Passed to react-native-vector-icons library as name prop
      */
-    iconName: PropTypes.string,
+    iconName: PropTypes.string.isRequired,
     /*
      * Passed to react-native-vector-icons library as color prop
      */

lib/Hoshi.js

@@ -10,7 +10,7 @@ import {
 
 import BaseInput from './BaseInput';
 
-export default class Kaede extends BaseInput {
+export default class Hoshi extends BaseInput {
 
   static propTypes = {
     borderColor: PropTypes.string,

lib/Kohana.js

@@ -23,7 +23,7 @@ export default class Kohana extends BaseInput {
     /*
      * Passed to react-native-vector-icons library as name prop
      */
-    iconName: PropTypes.string,
+    iconName: PropTypes.string.isRequired,
     /*
      * Passed to react-native-vector-icons library as color prop
      */

lib/Makiko.js

@@ -0,0 +1,151 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  Animated,
+  Easing,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+import BaseInput from './BaseInput';
+
+const ICON_WIDTH = 60;
+const ICON_SIZE = 30;
+
+export default class Makiko extends BaseInput {
+
+  static propTypes = {
+    /*
+     * This is the icon component you are importing from react-native-vector-icons.
+     * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+     * iconClass={FontAwesomeIcon}
+     */
+    iconClass: PropTypes.func.isRequired,
+
+    /*
+     * Passed to react-native-vector-icons library as name prop.
+     * This icon expands and covers the input.
+     * So, the icon should not have any blank spaces for animation experience.
+     * This is the limitation for Makiko.
+     */
+    iconName: PropTypes.string.isRequired,
+
+    /*
+     * Passed to react-native-vector-icons library as color prop
+     */
+    iconColor: PropTypes.string,
+  };
+
+  static defaultProps = {
+    iconColor: 'white',
+    height: 48,
+    easing: Easing.bezier(0.7, 0, 0.3, 1),
+    animationDuration: 300,
+  };
+
+  render() {
+    const {
+      iconClass,
+      iconColor,
+      iconName,
+      style: containerStyle,
+      height: inputHeight,
+      inputStyle,
+      label,
+      labelStyle,
+    } = this.props;
+    const {
+      width,
+      focusedAnim,
+      value,
+    } = this.state;
+    const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
+
+    return (
+      <View style={[containerStyle, styles.container]} onLayout={this._onLayout}>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <View>
+            <AnimatedIcon
+              name={iconName}
+              color={iconColor}
+              style={{
+                position: 'absolute',
+                backgroundColor: 'transparent',
+                top: focusedAnim.interpolate({
+                  inputRange: [0, 0.2],
+                  outputRange: [8, ICON_SIZE * -1],
+                }),
+                left: focusedAnim.interpolate({
+                  inputRange: [0, 0.2],
+                  outputRange: [16, -18],
+                }),
+                height: focusedAnim.interpolate({
+                  inputRange: [0, 0.2],
+                  outputRange: [ICON_SIZE, inputHeight * 2],
+                }),
+                fontSize: focusedAnim.interpolate({
+                  inputRange: [0, 0.2],
+                  outputRange: [ICON_SIZE, ICON_SIZE * 4],
+                }),
+              }}
+            />
+            <Text style={[styles.label, labelStyle, { color: iconColor }]}>
+              {label}
+            </Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <Animated.View
+          style={{
+            position: 'absolute',
+            backgroundColor: 'white',
+            left: ICON_WIDTH,
+            height: inputHeight,
+            width: focusedAnim.interpolate({
+              inputRange: [0, 0.2, 1],
+              outputRange: [0, 0, width],
+            }),
+          }}
+        />
+        <TextInput
+          ref="input"
+          {...this.props}
+          style={[styles.textInput, inputStyle, {
+            width,
+            height: inputHeight,
+          }]}
+          value={value}
+          onBlur={this._onBlur}
+          onChange={this._onChange}
+          onFocus={this._onFocus}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    marginHorizontal: 16,
+    backgroundColor: '#CBCBCB',
+    overflow: 'hidden',
+  },
+  label: {
+    position: 'absolute',
+    top: 16,
+    left: ICON_WIDTH,
+    fontSize: 16,
+    fontFamily: 'Arial',
+    fontWeight: 'bold',
+    color: 'white',
+    backgroundColor: 'transparent',
+  },
+  textInput: {
+    paddingHorizontal: 16,
+    color: 'black',
+    fontSize: 18,
+  },
+});

lib/index.js

@@ -6,6 +6,7 @@ import Madoka from './Madoka';
 import Akira from './Akira';
 import Hideo from './Hideo';
 import Kohana from './Kohana';
+import Makiko from './Makiko';
 
 export {
   Kaede,
@@ -16,4 +17,5 @@ export {
   Akira,
   Hideo,
   Kohana,
+  Makiko,
 };