created BaseInput and Kaede

Author: halilb

Example/TextInputEffectsExample.js

@@ -1,25 +1,36 @@
 import React, { Component } from 'react';
 import {
-  View,
+  Dimensions,
+  ScrollView,
   StyleSheet,
 } from 'react-native';
 
-import TextInputEffects from 'react-native-textinput-effects';
+import { Kaede } from 'react-native-textinput-effects';
+
+const screenWidth = Dimensions.get('window').width;
 
 export default class TextInputEffectsExample extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
-        <TextInputEffects />
-      </View>
+      <ScrollView style={styles.container} keyboardDismissMode={'on-drag'}>
+        <Kaede
+          placeholder={'First Name'}
+          width={screenWidth}
+        />
+        <Kaede
+          placeholder={'Second Name'}
+          width={screenWidth}
+        />
+      </ScrollView>
     );
   }
 }
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 54,
-    paddingLeft: 16,
+    paddingTop: 100,
+    backgroundColor: '#F9F7F6',
   },
 });

lib/BaseInput.js

@@ -0,0 +1,52 @@
+import React, {
+  PropTypes,
+  Component
+} from 'react';
+import {
+  Animated,
+} from 'react-native';
+
+export default class BaseInput extends Component {
+
+  static propTypes = {
+    placeholder: PropTypes.string.isRequired,
+    width: PropTypes.number.isRequired,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._onChange = this._onChange.bind(this);
+    this._focus = this._focus.bind(this);
+    this._blur = this._blur.bind(this);
+
+    this.currentText = '';
+    this.state = {
+      focusedAnim: new Animated.Value(0),
+    };
+  }
+
+  _onChange(event) {
+    this.currentText = event.nativeEvent.text;
+  }
+
+  _focus() {
+    this._toggle(true);
+    this.refs.input.focus();
+  }
+
+  _blur() {
+    if (!this.currentText) {
+      this._toggle(false);
+    }
+  }
+
+  _toggle(displayed) {
+    Animated.timing(
+      this.state.focusedAnim, {
+        toValue: displayed ? 1 : 0,
+        duration: 300,
+      },
+    ).start();
+  }
+}

lib/Kaede.js

@@ -0,0 +1,78 @@
+import React, { PropTypes, Component } from 'react';
+import {
+  Animated,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+import BaseInput from './BaseInput';
+
+export default class Kaede extends BaseInput {
+
+  render() {
+    const { placeholder, width } = this.props;
+    const { focusedAnim } = this.state;
+    const inputWidth = width * 0.6;
+
+    return (
+      <View style={styles.container}>
+        <Animated.View style={[styles.textInputContainer, {
+          width: inputWidth,
+          marginLeft: focusedAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [inputWidth * -1, 0],
+          }),
+        }]}>
+          <TextInput
+            ref="input"
+            style={styles.textInput}
+            onBlur={this._blur}
+            onChange={this._onChange}
+          />
+        </Animated.View>
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={[styles.placeholderContainer, {
+            width,
+            marginRight: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, inputWidth * -1],
+            }),
+          }]}>
+            <Text style={styles.placeholder}>
+              {placeholder}
+            </Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  placeholderContainer: {
+    backgroundColor: '#EBEAEA',
+    height: 62,
+  },
+  placeholder: {
+    padding: 16,
+    fontSize: 18,
+    color: '#6a7989',
+  },
+  textInputContainer: {
+    height: 62,
+    backgroundColor: 'white',
+    padding: 16,
+  },
+  textInput: {
+    height: 30,
+    color: 'black',
+    fontSize: 18,
+  },
+});

lib/index.js

@@ -1,16 +1,5 @@
-import React from 'react';
-import {
-  Text,
-  View,
-} from 'react-native';
+import Kaede from './Kaede';
 
-export default class TextInputEffects extends React.Component {
-
-  render() {
-    return (
-      <View>
-        <Text>test</Text>
-      </View>
-    );
-  }
-}
+export {
+  Kaede,
+};