created Fumi

Author: halilb

Example/TextInputEffectsExample.js

@@ -19,6 +19,7 @@ import {
   Kohana,
   Makiko,
   Sae,
+  Fumi,
 } from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
@@ -62,6 +63,13 @@ export default class TextInputEffectsExample extends Component {
           backgroundColor={'#F9F7F6'}
           borderColor={'#00ffaa'}
         />
+        <Fumi
+          style={styles.input}
+          label={'Degree'}
+          iconClass={FontAwesomeIcon}
+          iconName={'graduation-cap'}
+          iconColor={'#00aeef'}
+        />
         <Jiro
           style={styles.input}
           label={'Cat\'s name'}

lib/Fumi.js

@@ -0,0 +1,153 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  Animated,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+import BaseInput from './BaseInput';
+
+const PADDING = 16;
+const ICON_WIDTH = 40;
+
+export default class Fumi 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
+     */
+    iconName: PropTypes.string.isRequired,
+    /*
+     * Passed to react-native-vector-icons library as color prop.
+     * Also used as textInput color.
+     */
+    iconColor: PropTypes.string,
+    height: PropTypes.number,
+  };
+
+  static defaultProps = {
+    height: 48,
+    iconColor: '#00aeef',
+    animationDuration: 300,
+  };
+
+  render() {
+    const {
+      iconClass,
+      iconColor,
+      iconName,
+      label,
+      style: containerStyle,
+      inputStyle,
+      height: inputHeight,
+      labelStyle,
+    } = this.props;
+    const { focusedAnim, value } = this.state;
+    const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
+    const ANIM_PATH = PADDING + inputHeight;
+    const NEGATIVE_ANIM_PATH = ANIM_PATH * -1;
+
+    return (
+      <View style={[containerStyle, styles.container]} onLayout={this._onLayout}>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <AnimatedIcon
+            name={iconName}
+            color={iconColor}
+            size={20}
+            style={{
+              position: 'absolute',
+              left: PADDING,
+              bottom: focusedAnim.interpolate({
+                inputRange: [0, 0.5, 0.51, 0.7, 1],
+                outputRange: [24, ANIM_PATH, NEGATIVE_ANIM_PATH, NEGATIVE_ANIM_PATH, 24],
+              }),
+              color: focusedAnim.interpolate({
+                inputRange: [0, 0.5, 1],
+                outputRange: ['#a3a3a3', iconColor, iconColor],
+              }),
+            }}
+          />
+        </TouchableWithoutFeedback>
+        <View
+          style={[styles.separator, {
+            height: inputHeight,
+            left: ICON_WIDTH + 8,
+          }]}
+        />
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={{
+            position: 'absolute',
+            left: ICON_WIDTH + PADDING,
+            height: inputHeight,
+            top: focusedAnim.interpolate({
+              inputRange: [0, 0.5, 0.51, 0.7, 1],
+              outputRange: [22, ANIM_PATH, NEGATIVE_ANIM_PATH, NEGATIVE_ANIM_PATH, 8],
+            }),
+          }}>
+            <Animated.Text style={[styles.label, labelStyle, {
+              fontSize: focusedAnim.interpolate({
+                inputRange: [0, 0.7, 0.71, 1],
+                outputRange: [16, 16, 12, 12],
+              }),
+              color: focusedAnim.interpolate({
+                inputRange: [0, 0.7],
+                outputRange: ['#696969', '#a3a3a3'],
+              }),
+            }]}>
+              {label}
+            </Animated.Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+        <TextInput
+          ref="input"
+          {...this.props}
+          style={[styles.textInput, inputStyle, {
+            marginLeft: ICON_WIDTH + PADDING,
+            color: iconColor,
+            marginBottom: PADDING * -1,
+          }]}
+          value={value}
+          onBlur={this._onBlur}
+          onFocus={this._onFocus}
+          onChange={this._onChange}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'white',
+    marginHorizontal: PADDING,
+    overflow: 'hidden',
+    paddingTop: 16,
+  },
+  label: {
+    fontSize: 18,
+    fontFamily: 'Arial',
+    fontWeight: 'bold',
+  },
+  textInput: {
+    flex: 1,
+    color: 'black',
+    fontSize: 18,
+  },
+  separator: {
+    position: 'absolute',
+    width: 1,
+    backgroundColor: '#f0f0f0',
+    marginTop: -8,
+  },
+});

lib/index.js

@@ -8,6 +8,7 @@ import Hideo from './Hideo';
 import Kohana from './Kohana';
 import Makiko from './Makiko';
 import Sae from './Sae';
+import Fumi from './Fumi';
 
 export {
   Kaede,
@@ -20,4 +21,5 @@ export {
   Kohana,
   Makiko,
   Sae,
+  Fumi,
 };