created Akira

Author: halilb

Example/TextInputEffectsExample.js

@@ -10,6 +10,7 @@ import {
   Jiro,
   Isao,
   Madoka,
+  Akira,
 } from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
@@ -43,10 +44,14 @@ export default class TextInputEffectsExample extends Component {
           borderColor={'#da7071'}
         />
         <Madoka
-          style={{ marginTop: 16 }}
+          style={{ marginTop: 8 }}
           label={'Weight'}
           borderColor={'#7A7593'}
         />
+        <Akira
+          label={'Maiden Name'}
+          borderColor={'#7A7593'}
+        />
       </ScrollView>
     );
   }

lib/Akira.js

@@ -0,0 +1,155 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  Animated,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+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,
+    height: PropTypes.number,
+  };
+
+  static defaultProps = {
+    borderColor: '#7A7593',
+    height: 48,
+    animationDuration: 200,
+  };
+
+  render() {
+    const {
+      label,
+      style: containerStyle,
+      height: inputHeight,
+      inputStyle,
+      labelStyle,
+      borderColor,
+    } = this.props;
+    const {
+      width,
+      focusedAnim,
+      value,
+    } = this.state;
+
+    return (
+      <View style={[containerStyle, styles.container]} onLayout={this._onLayout}>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={{
+            width,
+            height: LABEL_HEIGHT,
+            transform: [{
+              translateY: focusedAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [LABEL_HEIGHT + PADDING, 0],
+              }),
+            }],
+          }}>
+            <Text style={[styles.label, labelStyle]}>
+              {label}
+            </Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+        <TextInput
+          ref="input"
+          {...this.props}
+          style={[styles.textInput, inputStyle, {
+            width,
+            height: inputHeight,
+          }]}
+          value={value}
+          onBlur={this._onBlur}
+          onChange={this._onChange}
+          onFocus={this._onFocus}
+        />
+        {/* left border */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            height: inputHeight,
+            width: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [6, 1],
+            }),
+            backgroundColor: borderColor,
+          }}
+        />
+        {/* top border */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: LABEL_HEIGHT,
+            width,
+            height: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [6, 1],
+            }),
+            backgroundColor: borderColor,
+          }}
+        />
+        {/* right border */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            height: inputHeight,
+            width: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [6, 1],
+            }),
+            backgroundColor: borderColor,
+          }}
+        />
+        {/* bottom border */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            height: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [6, 1],
+            }),
+            width,
+            backgroundColor: borderColor,
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
+  label: {
+    backgroundColor: 'transparent',
+    fontFamily: 'Arial',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#cc6055',
+    textAlign: 'center',
+  },
+  textInput: {
+    padding: PADDING,
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+  },
+});

lib/Isao.js

@@ -134,4 +134,3 @@ const styles = StyleSheet.create({
     right: 0,
   },
 });
-

lib/index.js

@@ -3,11 +3,13 @@ import Hoshi from './Hoshi';
 import Jiro from './Jiro';
 import Isao from './Isao';
 import Madoka from './Madoka';
+import Akira from './Akira';
 
 export {
   Kaede,
   Hoshi,
   Jiro,
   Isao,
   Madoka,
+  Akira,
 };