Initial commit of components and README.

Author: evblurbs

README.md

@@ -0,0 +1,3 @@
+# React Native Material Design TextInput
+
+React Native TextInput styled with Material Design.

index.js

@@ -0,0 +1 @@
+import TextField from './lib/TextField';

lib/FloatingLabel.js

@@ -0,0 +1,81 @@
+'use strict';
+/* @flow */
+
+import React, {
+	Component,
+  StyleSheet,
+  Animated,
+	PropTypes
+} from 'react-native';
+
+export default class FloatingLabel extends Component {
+  constructor(props: Object) {
+    super(props);
+    this.state = {
+      top: new Animated.Value(34),
+      fontSize: new Animated.Value(16)
+    };
+  }
+  floatLabel() {
+    Animated.parallel([
+      Animated.timing(this.state.top, {
+        toValue: 16,
+        duration: this.props.duration
+      }),
+      Animated.timing(this.state.fontSize, {
+        toValue: 10,
+        duration: this.props.duration
+      })
+    ]).start();
+  }
+  sinkLabel() {
+    Animated.parallel([
+      Animated.timing(this.state.top, {
+        toValue: 34,
+        duration: this.props.duration
+      }),
+      Animated.timing(this.state.fontSize, {
+        toValue: 16,
+        duration: this.props.duration
+      })
+    ]).start();
+  }
+  render() {
+		let {
+			label,
+			labelColor,
+			highlightColor
+		} = this.props;
+    return (
+      <Animated.Text
+        style={[{
+          fontSize: this.state.fontSize,
+          top: this.state.top,
+					color: labelColor
+        }, styles.labelText, this.props.isFocused && {
+					color: highlightColor
+				}]}
+        onPress={()=> {
+          this.props.focusHandler();
+        }}
+      >
+        {label}
+      </Animated.Text>
+    );
+  }
+}
+
+FloatingLabel.propTypes = {
+	duration: PropTypes.number,
+	label: PropTypes.string,
+	labelColor: PropTypes.string,
+	highlightColor: PropTypes.string
+};
+
+const styles = StyleSheet.create({
+  labelText: {
+    position: 'absolute',
+    left: 1,
+    backgroundColor: 'rgba(0,0,0,0)'
+  }
+});

lib/TextField.js

@@ -0,0 +1,111 @@
+'use strict';
+/* @flow */
+
+import React, {
+	Component,
+	View,
+  TextInput,
+  StyleSheet,
+	PropTypes
+} from 'react-native';
+
+import Underline from './Underline';
+import FloatingLabel from './FloatingLabel';
+
+export default class TextField extends Component {
+  constructor(props: Object, context: Object) {
+    super(props, context);
+    this.state = {
+      isFocused: false,
+      text: ''
+    }
+    this.input = null;
+  }
+  focusInput() {
+    // this.input.focus();
+		this.refs.input.focus();
+  }
+  render() {
+		let {
+			label,
+			highlightColor,
+			duration,
+			labelColor,
+			borderColor,
+			...props
+		} = this.props;
+    return (
+      <View style={styles.wrapper} ref="wrapper">
+        <View style={[styles.inputWrapper, this.state.isFocused && styles.inputWrapperActive]}>
+          <TextInput
+            style={styles.textInput}
+            onFocus={() => {
+              this.setState({isFocused: true});
+              this.refs.floatingLabel.floatLabel();
+							this.refs.underline.expandLine();
+            }}
+            onBlur={() => {
+              this.setState({isFocused: false});
+              if(!this.state.text.length) {
+                this.refs.floatingLabel.sinkLabel();
+              }
+							this.refs.underline.shrinkLine();
+            }}
+            onChangeText={(text) => {
+              this.setState({text: text});
+            }}
+            ref="input"
+						{...props}
+          />
+					<Underline
+						ref="underline"
+						highlightColor={highlightColor}
+						duration={duration}
+						borderColor={borderColor}
+					/>
+        </View>
+        <FloatingLabel
+          isFocused={this.state.isFocused}
+          ref="floatingLabel"
+          focusHandler={this.focusInput.bind(this)}
+          label={label}
+					labelColor={labelColor}
+					highlightColor={highlightColor}
+					duration={duration}
+        />
+      </View>
+    );
+  }
+}
+
+TextField.propTypes = {
+	duration: PropTypes.number,
+	label: PropTypes.string,
+	highlightColor: PropTypes.string
+};
+
+TextField.defaultProps = {
+	duration: 200,
+	labelColor: '#9E9E9E',
+	borderColor: '#E0E0E0'
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    height: 72,
+    flex: 1,
+    paddingTop: 28,
+    paddingBottom: 8,
+    position: 'relative'
+  },
+  textInput: {
+    flex: 1,
+    fontSize: 16,
+    lineHeight: 16
+  },
+  inputWrapper: {
+    borderWidth: 0,
+    height: 32,
+    flex: 1
+  }
+});

lib/Underline.js

@@ -0,0 +1,78 @@
+'use strict';
+/* @flow */
+
+import React, {
+	Component,
+	View,
+  StyleSheet,
+  Animated,
+	PropTypes
+} from 'react-native';
+
+export default class Underline extends Component {
+	constructor(props: Object) {
+    super(props);
+    this.state = {
+      lineLength: new Animated.Value(0),
+    };
+		this.wrapperWidth = 0;
+  }
+	componentDidMount() {
+		requestAnimationFrame(() => {
+			if (this.refs.wrapper == null) {
+			 return;
+			}
+      const container = this.refs.wrapper;  // un-box animated view
+      container.measure((left, top, width, height) => {
+				this.wrapperWidth = width;
+      });
+    });
+	}
+	expandLine() {
+		Animated.timing(this.state.lineLength, {
+			toValue: this.wrapperWidth,
+			duration: this.props.duration
+		}).start();
+	}
+	shrinkLine() {
+		Animated.timing(this.state.lineLength, {
+			toValue: 0,
+			duration: this.props.duration
+		}).start();
+	}
+	render() {
+		let {
+			borderColor,
+			highlightColor
+		} = this.props;
+		return (
+			<View
+				style={[styles.underlineWrapper, {
+					backgroundColor: borderColor
+				}]}
+				ref="wrapper"
+			>
+				<Animated.View
+					style={[{
+						width: this.state.lineLength,
+						height: 1,
+						backgroundColor: highlightColor
+					}]}>
+				</Animated.View>
+			</View>
+		);
+	}
+}
+
+Underline.propTypes = {
+	duration: PropTypes.number,
+	highlightColor: PropTypes.string,
+	borderColor: PropTypes.string
+};
+
+const styles = StyleSheet.create({
+	underlineWrapper: {
+		height: 1,
+		alignItems: 'center'
+	}
+});