Added custom fonts and ability to keep the highlight color

README.md

@@ -67,14 +67,19 @@ Prop | Type | Default | description
 -----|------|---------|------------
 label | string | | This string appears as the label.
 highlightColor | string | | This string represents the hex code, rgb, or rgba color of the textInput label and underline when it is active/focused on.
+keepHighlightColor | bool | false | If true will keep the highlight color active.
+labelFontFamily | string | | Adds a custom font to the label.
+textInputFontFamily | string | | Adds a custom font to the text input.
 duration | number | `200` | A number representing the duration of floating label and underline animations in milliseconds.
 labelColor | string | `#9E9E9E` | This string represents the hex code, rgb, or rgba color of the textInput label when it is inactive.
 borderColor | string | `#E0E0E0` | This string represents the hex code, rgb, or rgba color of the textInput underline when it is inactive.
 dense | bool | `false` | If true, it will render the "dense" input field which is smaller in height and has smaller font sizes. You can view more [here](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels).
+multiline | bool | `false` | If true, it will allow multiline text input
+height | number | `false` | A number representing the initial height of the textInput
+autoGrow | bool | `false` | If true enables autogrow of the textInput
 underlineColorAndroid | string | `rgba(0,0,0,0)` | This sets the default underline color on Android to transparent ([Issue #1](https://github.com/evblurbs/react-native-md-textinput/issues/1)).
 
 ## TODO
 
-- [ ] Support multi-line TextInput fields
 - [ ] Support character limit
 - [ ] Add option for dark theme

examples/FloatingLabel/index.android.js

@@ -3,13 +3,8 @@
  * that demos the react-native-md-textinput
  */
 'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  ScrollView
-} from 'react-native';
+import React, {Component} from "react";
+import {AppRegistry, StyleSheet, Text, ScrollView} from "react-native";
 
 import TextField from 'react-native-md-textinput';
 

examples/FloatingLabel/index.ios.js

@@ -3,13 +3,8 @@
  * that demos the react-native-md-textinput
  */
 'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  ScrollView
-} from 'react-native';
+import React, {Component} from "react";
+import {AppRegistry, StyleSheet, Text, ScrollView} from "react-native";
 
 import TextField from 'react-native-md-textinput';
 

lib/FloatingLabel.js

@@ -1,12 +1,6 @@
 'use strict';
-/* @flow */
-
-import React, {
-	Component,
-  StyleSheet,
-  Animated,
-	PropTypes
-} from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, Animated} from "react-native";
 
 export default class FloatingLabel extends Component {
   constructor(props: Object) {
@@ -60,14 +54,17 @@ export default class FloatingLabel extends Component {
 		let {
 			label,
 			labelColor,
-			highlightColor
+			highlightColor,
+      labelFontFamily,
+      keepHightlightColor
 		} = this.props;
     return (
       <Animated.Text
-        style={[{
+        style={[labelFontFamily ? {fontFamily: labelFontFamily} : {},
+        keepHightlightColor ? {color: highlightColor} : {color: labelColor},
+        {
           fontSize: this.state.fontSize,
           top: this.state.top,
-					color: labelColor
         }, styles.labelText, this.props.isFocused && {
 					color: highlightColor
 				}]}
@@ -86,7 +83,9 @@ FloatingLabel.propTypes = {
 	label: PropTypes.string,
 	labelColor: PropTypes.string,
 	highlightColor: PropTypes.string,
-	dense: PropTypes.bool
+	dense: PropTypes.bool,
+  labelFontFamily: PropTypes.string,
+  keepHightlightColor: PropTypes.bool
 };
 
 const styles = StyleSheet.create({

lib/TextField.js

@@ -1,13 +1,6 @@
 'use strict';
-/* @flow */
-
-import React, {
-	Component,
-	View,
-	TextInput,
-	StyleSheet,
-	PropTypes
-} from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, TextInput, StyleSheet} from "react-native";
 
 import Underline from './Underline';
 import FloatingLabel from './FloatingLabel';
@@ -17,12 +10,27 @@ export default class TextField extends Component {
     super(props, context);
     this.state = {
       isFocused: false,
-      text: props.value
+      text: props.value,
+			height: props.height
     };
   }
+	componentWillReceiveProps(nextProps: Object){
+		if(this.props.text != nextProps.value){
+			nextProps.value.length !== 0 ? this.refs.floatingLabel.floatLabel() : this.refs.floatingLabel.sinkLabel()
+			this.setState({text: nextProps.value})
+		}
+		if(this.props.height !== nextProps.height){
+			this.setState({height: nextProps.height});
+		}
+	}
   focus() {
-		this.refs.input.focus();
+	this.refs.input.focus();
   }
+
+  measureLayout(...args){
+  	this.refs.wrapper.measureLayout(...args)
+  }
+
   render() {
 		let {
 			label,
@@ -32,15 +40,21 @@ export default class TextField extends Component {
 			borderColor,
 			onFocus,
 			onBlur,
-			onChangeText,
+			onChange,
 			value,
 			dense,
+			multiline,
+			autoGrow,
+      textInputFontFamily,
+      labelFontFamily,
+      keepHightlightColor,
 			...props
 		} = this.props;
     return (
       <View style={dense ? styles.denseWrapper : styles.wrapper} ref="wrapper">
         <TextInput
-          style={dense ? styles.denseTextInput : styles.textInput}
+          style={[textInputFontFamily ? {fontFamily: textInputFontFamily} : {}, dense ? styles.denseTextInput : styles.textInput, this.state.height ? {height: this.state.height} : {}]}
+					multiline={this.props.multiline}
           onFocus={() => {
             this.setState({isFocused: true});
             this.refs.floatingLabel.floatLabel();
@@ -53,9 +67,13 @@ export default class TextField extends Component {
 						this.refs.underline.shrinkLine();
 						onBlur && onBlur();
           }}
-          onChangeText={(text) => {
-            this.setState({text});
-						onChangeText && onChangeText(text);
+          onChange={(event) => {
+						if(autoGrow){
+							this.setState({text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height});
+						}else{
+							this.setState({text: event.nativeEvent.text});
+						}
+						onChange && onChange(event);
           }}
           ref="input"
 					value={this.state.text}
@@ -76,6 +94,8 @@ export default class TextField extends Component {
 					highlightColor={highlightColor}
 					duration={duration}
 					dense={dense}
+          keepHightlightColor={keepHightlightColor}
+          labelFontFamily={labelFontFamily}
 					hasValue={(this.state.text.length) ? true : false}
         />
       </View>
@@ -89,9 +109,14 @@ TextField.propTypes = {
 	highlightColor: PropTypes.string,
 	onFocus: PropTypes.func,
 	onBlur: PropTypes.func,
-	onChangeText: PropTypes.func,
+	onChange: PropTypes.func,
 	value: PropTypes.string,
-	dense: PropTypes.bool
+	dense: PropTypes.bool,
+	multiline: PropTypes.bool,
+	autoGrow: PropTypes.bool,
+  textInputFontFamily: PropTypes.string,
+  labelFontFamily: PropTypes.string,
+  keepHightlightColor: PropTypes.bool
 };
 
 TextField.defaultProps = {
@@ -100,26 +125,28 @@ TextField.defaultProps = {
 	borderColor: '#E0E0E0',
 	value: '',
 	dense: false,
-	underlineColorAndroid: 'rgba(0,0,0,0)'
+	underlineColorAndroid: 'rgba(0,0,0,0)',
+	multiline: false,
+	autoGrow: false,
+	height: false,
+  keepHightlightColor: false
 };
 
 const styles = StyleSheet.create({
   wrapper: {
-    height: 72,
     paddingTop: 30,
     paddingBottom: 7,
     position: 'relative'
   },
 	denseWrapper: {
-		height: 60,
 		paddingTop: 28,
 		paddingBottom: 4,
 		position: 'relative'
 	},
   textInput: {
     fontSize: 16,
 		height: 34,
-		lineHeight: 34
+		lineHeight: 34,
   },
 	denseTextInput: {
 		fontSize: 13,

lib/Underline.js

@@ -1,13 +1,6 @@
 'use strict';
-/* @flow */
-
-import React, {
-	Component,
-	View,
-  StyleSheet,
-  Animated,
-	PropTypes
-} from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, StyleSheet, Animated} from "react-native";
 
 export default class Underline extends Component {
 	constructor(props: Object) {