created Kohana

Author: halilb

Example/TextInputEffectsExample.js

@@ -14,6 +14,7 @@ import {
   Madoka,
   Akira,
   Hideo,
+  Kohana,
 } from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
@@ -61,10 +62,18 @@ export default class TextInputEffectsExample extends Component {
           borderColor={'#7A7593'}
         />
         <Hideo
+          style={styles.input}
           iconClass={FontAwesomeIcon}
           iconName={'envelope'}
           iconColor={'white'}
         />
+        <Kohana
+          style={styles.input}
+          label={'Phone'}
+          iconClass={FontAwesomeIcon}
+          iconName={'phone'}
+          iconColor={'#ddd'}
+        />
       </ScrollView>
     );
   }

lib/Hideo.js

@@ -31,7 +31,6 @@ export default class Akira extends BaseInput {
      * Passed to react-native-vector-icons library as color prop
      */
     iconColor: PropTypes.string,
-    height: PropTypes.number,
   };
 
   static defaultProps = {
@@ -48,7 +47,6 @@ export default class Akira extends BaseInput {
       iconName,
       iconBackgroundColor,
       style: containerStyle,
-      height: inputHeight,
       inputStyle,
     } = this.props;
     const {

lib/Kohana.js

@@ -0,0 +1,100 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  Animated,
+  Easing,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+import BaseInput from './BaseInput';
+
+export default class Kohana extends BaseInput {
+
+  static defaultProps = {
+    easing: Easing.bezier(0.2, 1, 0.3, 1),
+  };
+
+  render() {
+    const {
+      iconClass: Icon,
+      iconColor,
+      iconName,
+      label,
+      style: containerStyle,
+      inputStyle,
+      labelStyle,
+    } = this.props;
+    const { focusedAnim, value } = this.state;
+
+    return (
+      <View style={[containerStyle, styles.container]} onLayout={this._onLayout}>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={{
+            justifyContent: 'center',
+            padding: 16,
+            marginLeft: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [-40, 0],
+            }),
+          }}>
+            <Icon
+              name={iconName}
+              color={iconColor}
+              size={25}
+            />
+          </Animated.View>
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={{
+            position: 'absolute',
+            left: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 80],
+            }),
+            opacity: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+            }),
+          }}>
+            <Text style={[styles.label, labelStyle]}>
+              {label}
+            </Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+        <TextInput
+          ref="input"
+          {...this.props}
+          style={[styles.textInput, inputStyle]}
+          value={value}
+          onBlur={this._onBlur}
+          onFocus={this._onFocus}
+          onChange={this._onChange}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'white',
+  },
+  label: {
+    padding: 16,
+    fontSize: 18,
+    fontFamily: 'Arial',
+    fontWeight: 'bold',
+    color: '#D2D2D2',
+  },
+  textInput: {
+    flex: 1,
+    paddingHorizontal: 16,
+    color: 'black',
+    fontSize: 18,
+  },
+});

lib/index.js

@@ -5,6 +5,7 @@ import Isao from './Isao';
 import Madoka from './Madoka';
 import Akira from './Akira';
 import Hideo from './Hideo';
+import Kohana from './Kohana';
 
 export {
   Kaede,
@@ -14,4 +15,5 @@ export {
   Madoka,
   Akira,
   Hideo,
+  Kohana,
 };