created Hoshi

Author: halilb

Example/TextInputEffectsExample.js

@@ -4,7 +4,10 @@ import {
   StyleSheet,
 } from 'react-native';
 
-import { Kaede } from 'react-native-textinput-effects';
+import {
+  Kaede,
+  Hoshi,
+} from 'react-native-textinput-effects';
 
 export default class TextInputEffectsExample extends Component {
 
@@ -13,21 +16,24 @@ export default class TextInputEffectsExample extends Component {
       <ScrollView style={styles.container} keyboardDismissMode={'on-drag'}>
         <Kaede
           label={'Name'}
-          value={'halil'}
         />
         <Kaede
           label={'Number'}
-          style={{ marginTop: 8 }}
           labelStyle={{
-            color: 'red',
-            backgroundColor: 'yellow',
+            color: '#990fe2',
+            backgroundColor: '#f5f785',
           }}
           inputStyle={{
             color: 'white',
-            backgroundColor: 'grey',
+            backgroundColor: '#d693f9',
           }}
           keyboardType="numeric"
         />
+        <Hoshi
+          label={'Street'}
+          backgroundColor={'#F9F7F6'}
+          borderColor={'#00ffaa'}
+        />
       </ScrollView>
     );
   }

lib/BaseInput.js

@@ -22,6 +22,7 @@ export default class BaseInput extends Component {
      * so, i'm calling them manually
      */
     onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
     onChange: PropTypes.func,
   };
 
@@ -31,6 +32,7 @@ export default class BaseInput extends Component {
     this._onLayout = this._onLayout.bind(this);
     this._onChange = this._onChange.bind(this);
     this._onBlur = this._onBlur.bind(this);
+    this._onFocus = this._onFocus.bind(this);
     this._focus = this._focus.bind(this);
 
     this.state = {
@@ -67,8 +69,16 @@ export default class BaseInput extends Component {
     }
   }
 
-  _focus() {
+  _onFocus(event) {
     this._toggle(true);
+
+    const onFocus = this.props.onFocus;
+    if (onFocus) {
+      onFocus(event);
+    }
+  }
+
+  _focus() {
     this.refs.input.focus();
   }
 

lib/Hoshi.js

@@ -0,0 +1,120 @@
+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 {
+
+  static propTypes = {
+    borderColor: PropTypes.string,
+
+    /*
+     * this is used to set backgroundColor of label mask.
+     * this should be replaced if we can find a better way to mask label animation.
+     */
+    backgroundColor: PropTypes.string,
+  };
+
+  static defaultProps = {
+    borderColor: 'red',
+  };
+
+  render() {
+    const {
+      label,
+      style: containerStyle,
+      inputStyle,
+      labelStyle,
+      backgroundColor: maskColor,
+      borderColor,
+    } = this.props;
+    const {
+      width,
+      focusedAnim,
+      value,
+    } = this.state;
+
+    return (
+      <View style={[containerStyle, styles.container, { height: 60 }]} onLayout={this._onLayout}>
+        <TextInput
+          ref="input"
+          {...this.props}
+          style={[styles.textInput, inputStyle, { width, height: 30 }]}
+          value={value}
+          onBlur={this._onBlur}
+          onChange={this._onChange}
+          onFocus={this._onFocus}
+        />
+        <TouchableWithoutFeedback onPress={this._focus}>
+          <Animated.View style={[styles.labelContainer, {
+            opacity: focusedAnim.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [1, 0, 1],
+            }),
+            top: focusedAnim.interpolate({
+              inputRange: [0, 0.5, 0.51, 1],
+              outputRange: [24, 24, 0, 0],
+            }),
+            left: focusedAnim.interpolate({
+              inputRange: [0, 0.5, 0.51, 1],
+              outputRange: [16, 32, 0, 16],
+            }),
+          }]}>
+            <Text style={[styles.label, labelStyle]}>
+              {label}
+            </Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+        <View style={[styles.labelMask, { backgroundColor: maskColor }]} />
+        <Animated.View
+          style={[styles.border, {
+            width: focusedAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, width],
+            }),
+            backgroundColor: borderColor,
+          }]}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderBottomWidth: 2,
+  },
+  labelContainer: {
+    position: 'absolute',
+  },
+  label: {
+    fontSize: 18,
+    color: '#6a7989',
+  },
+  textInput: {
+    position: 'absolute',
+    bottom: 8,
+    left: 16,
+    color: 'black',
+    fontSize: 18,
+  },
+  labelMask: {
+    height: 24,
+    width: 16,
+  },
+  border: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+  },
+});

lib/Kaede.js

@@ -37,6 +37,7 @@ export default class Kaede extends BaseInput {
             style={[styles.textInput, inputStyle]}
             value={value}
             onBlur={this._onBlur}
+            onFocus={this._onFocus}
             onChange={this._onChange}
           />
         </Animated.View>

lib/index.js

@@ -1,5 +1,7 @@
 import Kaede from './Kaede';
+import Hoshi from './Hoshi';
 
 export {
   Kaede,
+  Hoshi,
 };