Merge of all!

README.md

@@ -6,7 +6,7 @@ React Native TextInput styled with Material Design.
 
 ## Installation
 ```
-npm install react-native-md-textinput
+npm i -S react-native-md-textinput
 ```
 
 ## Usage
@@ -66,7 +66,10 @@ Below are the props you can pass to the React Component to customize the TextInp
 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.
+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.
 textColor | string | `#000` | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput. Note: If you set textFocusColor or textBlurColor, those colors will override this one during the corresponding state of the TextInput.
@@ -93,6 +96,5 @@ labelStyle | Object | | Object to override the styles of the Label that animates
 
 ## TODO
 
-- [ ] Support multi-line TextInput fields
 - [ ] Support character limit
 - [ ] Add option for dark theme

lib/FloatingLabel.js

@@ -1,4 +1,3 @@
-'use strict';
 import React, {Component, PropTypes} from "react";
 import {StyleSheet, Animated} from "react-native";
 
@@ -55,14 +54,16 @@ export default class FloatingLabel extends Component {
       label,
       labelColor,
       highlightColor,
-      style
+      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
         }, style]}
@@ -82,7 +83,8 @@ FloatingLabel.propTypes = {
   labelColor: PropTypes.string,
   highlightColor: PropTypes.string,
   dense: PropTypes.bool,
-  style: PropTypes.object
+  labelFontFamily: PropTypes.string,
+  keepHightlightColor: PropTypes.bool
 };
 
 const styles = StyleSheet.create({

lib/TextField.js

@@ -1,4 +1,3 @@
-'use strict';
 import React, {Component, PropTypes} from "react";
 import {View, TextInput, StyleSheet} from "react-native";
 
@@ -14,64 +13,47 @@ export default class TextField extends Component {
       height: props.height
     };
   }
-  focus() {
-    this.refs.input.focus();
-  }
-  blur() {
-    this.refs.input.blur();
-  }
-  isFocused() {
-    return this.state.isFocused;
-  }
-  measureLayout(...args){
-    this.refs.wrapper.measureLayout(...args)
-  }
   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.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();
+  }
+
+  measureLayout(...args){
+    this.refs.wrapper.measureLayout(...args)
+  }
+
   render() {
     let {
       label,
       highlightColor,
       duration,
       labelColor,
       borderColor,
-      textColor,
-      textFocusColor,
-      textBlurColor,
       onFocus,
       onBlur,
-      onChangeText,
       onChange,
       value,
       dense,
-      inputStyle,
-      wrapperStyle,
-      labelStyle,
-      height,
-      autoGrow,
       multiline,
+      autoGrow,
+      textInputFontFamily,
+      labelFontFamily,
+      keepHightlightColor,
       ...props
     } = this.props;
     return (
       <View style={[dense ? styles.denseWrapper : styles.wrapper, this.state.height ? {height: undefined}: {}, wrapperStyle]} ref="wrapper">
         <TextInput
-          style={[dense ? styles.denseTextInput : styles.textInput, {
-            color: textColor
-          }, (this.state.isFocused && textFocusColor) ? {
-            color: textFocusColor
-          } : {}, (!this.state.isFocused && textBlurColor) ? {
-            color: textBlurColor
-          } : {}, inputStyle,  this.state.height ? {height: this.state.height} : {}]}
-          multiline={multiline}
+          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();
@@ -84,13 +66,11 @@ 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({height: event.nativeEvent.contentSize.height});
+              this.setState({text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height});
+            }else{
+              this.setState({text: event.nativeEvent.text});
             }
             onChange && onChange(event);
           }}
@@ -113,8 +93,9 @@ export default class TextField extends Component {
           highlightColor={highlightColor}
           duration={duration}
           dense={dense}
+          keepHightlightColor={keepHightlightColor}
+          labelFontFamily={labelFontFamily}
           hasValue={(this.state.text.length) ? true : false}
-          style={labelStyle}
         />
       </View>
     );
@@ -125,47 +106,38 @@ TextField.propTypes = {
   duration: PropTypes.number,
   label: PropTypes.string,
   highlightColor: PropTypes.string,
-  labelColor: PropTypes.string,
-  borderColor: PropTypes.string,
-  textColor: PropTypes.string,
-  textFocusColor: PropTypes.string,
-  textBlurColor: PropTypes.string,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  onChangeText: PropTypes.func,
   onChange: PropTypes.func,
   value: PropTypes.string,
   dense: PropTypes.bool,
-  inputStyle: PropTypes.object,
-  wrapperStyle: PropTypes.object,
-  labelStyle: PropTypes.object,
   multiline: PropTypes.bool,
   autoGrow: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number])
+  textInputFontFamily: PropTypes.string,
+  labelFontFamily: PropTypes.string,
+  keepHightlightColor: PropTypes.bool
 };
 
 TextField.defaultProps = {
   duration: 200,
   labelColor: '#9E9E9E',
   borderColor: '#E0E0E0',
-  textColor: '#000',
   value: '',
   dense: false,
   underlineColorAndroid: 'rgba(0,0,0,0)',
   multiline: false,
   autoGrow: false,
-  height: undefined
+  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'
@@ -174,7 +146,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     height: 34,
     lineHeight: 34,
-    textAlignVertical: 'top'
   },
   denseTextInput: {
     fontSize: 13,

lib/Underline.js

@@ -1,4 +1,3 @@
-'use strict';
 import React, {Component, PropTypes} from "react";
 import {View, StyleSheet, Animated} from "react-native";