created Sae

Author: halilb

Example/TextInputEffectsExample.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import {
   ScrollView,
   StyleSheet,
+  Text,
+  View,
 } from 'react-native';
 
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
@@ -16,13 +18,28 @@ import {
   Hideo,
   Kohana,
   Makiko,
+  Sae,
 } from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
 
   render() {
     return (
       <ScrollView style={styles.container} keyboardDismissMode={'on-drag'}>
+        <View style={[styles.card, { backgroundColor: '#8781bd' }]}>
+          <Text style={styles.title}>Sae</Text>
+          <Sae
+            label={'Email Address'}
+            iconClass={FontAwesomeIcon}
+            iconName={'pencil'}
+            iconColor={'white'}
+          />
+          <Sae
+            style={styles.input}
+            label={'Invitation Code'}
+            iconClass={FontAwesomeIcon}
+          />
+        </View>
         <Kaede
           style={styles.input}
           label={'Number'}
@@ -93,7 +110,17 @@ const styles = StyleSheet.create({
     paddingTop: 24,
     backgroundColor: '#F9F7F6',
   },
+  card: {
+    height: 180,
+  },
   input: {
     marginTop: 4,
   },
+  title: {
+    textAlign: 'center',
+    color: 'white',
+    fontSize: 20,
+    fontWeight: 'bold',
+    opacity: 0.8,
+  },
 });

lib/Sae.js

@@ -0,0 +1,156 @@
+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 Sae extends BaseInput {
+
+  static propTypes = {
+    height: PropTypes.number,
+    /*
+     * 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,
+    /*
+     * Passed to react-native-vector-icons library as color prop.
+     * This is also used as border color.
+     */
+    iconColor: PropTypes.string,
+  };
+
+  static defaultProps = {
+    iconColor: 'white',
+    height: 48,
+    animationDuration: 300,
+    iconName: 'pencil',
+  };
+
+  render() {
+    const {
+      iconClass,
+      iconColor,
+      iconName,
+      label,
+      style: containerStyle,
+      height: inputHeight,
+      inputStyle,
+      labelStyle,
+    } = this.props;
+    const {
+      width,
+      focusedAnim,
+      value,
+    } = this.state;
+    const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
+
+    return (
+      <View
+        style={[containerStyle, styles.container, {
+          height: inputHeight + PADDING,
+        }]}
+        onLayout={this._onLayout}
+      >
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={{
+            position: 'absolute',
+            bottom: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, LABEL_HEIGHT + PADDING],
+            }),
+          }}>
+            <Animated.Text style={[styles.label, labelStyle, {
+              fontSize: focusedAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [18, 12],
+              }),
+            }]}>
+              {label}
+            </Animated.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}
+        />
+        <AnimatedIcon
+          name={iconName}
+          color={iconColor}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, width + PADDING],
+            }),
+            transform: [{
+              rotate: focusedAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '-90deg'],
+              }),
+            }],
+            fontSize: 20,
+            backgroundColor: 'transparent',
+          }}
+        />
+        {/* bottom border */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            height: 2,
+            width: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, width],
+            }),
+            backgroundColor: iconColor,
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    marginHorizontal: PADDING,
+  },
+  label: {
+    backgroundColor: 'transparent',
+    fontFamily: 'Arial',
+    fontWeight: 'bold',
+    color: '#7771ab',
+  },
+  textInput: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    color: 'white',
+    fontSize: 18,
+  },
+});

lib/index.js

@@ -7,6 +7,7 @@ import Akira from './Akira';
 import Hideo from './Hideo';
 import Kohana from './Kohana';
 import Makiko from './Makiko';
+import Sae from './Sae';
 
 export {
   Kaede,
@@ -18,4 +19,5 @@ export {
   Hideo,
   Kohana,
   Makiko,
+  Sae,
 };