Re-calculate underline width if layout changed

README.md

@@ -6,7 +6,7 @@ React Native TextInput styled with Material Design.
 
 ## Installation
 ```
-npm install react-native-md-textinput
+npm install https://github.com/ajaxangular/react-native-md-textinput --save
 ```
 
 ## Usage

lib/FloatingLabel.js

@@ -2,10 +2,9 @@
 /* @flow */
 
 import React, {
-	Component,
+	Component, PropTypes } from 'react'; import {
   StyleSheet,
-  Animated,
-	PropTypes
+  Animated
 } from 'react-native';
 
 export default class FloatingLabel extends Component {

lib/TextField.js

@@ -2,11 +2,10 @@
 /* @flow */
 
 import React, {
-	Component,
+	Component, PropTypes } from 'react'; import {
 	View,
 	TextInput,
-	StyleSheet,
-	PropTypes
+	StyleSheet
 } from 'react-native';
 
 import Underline from './Underline';
@@ -20,6 +19,19 @@ export default class TextField extends Component {
       text: props.value
     };
   }
+
+	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();
   }
@@ -111,19 +123,19 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
 	denseWrapper: {
-		height: 60,
-		paddingTop: 28,
+		height: 40,
+		paddingTop: 30,
 		paddingBottom: 4,
 		position: 'relative'
 	},
   textInput: {
     fontSize: 16,
-		height: 34,
+		height: 40,
 		lineHeight: 34
   },
 	denseTextInput: {
 		fontSize: 13,
-		height: 27,
+		height: 37,
 		lineHeight: 24,
 		paddingBottom: 3
 	}

lib/Underline.js

@@ -2,11 +2,10 @@
 /* @flow */
 
 import React, {
-	Component,
+	Component, PropTypes } from 'react'; import {
 	View,
   StyleSheet,
-  Animated,
-	PropTypes
+  Animated
 } from 'react-native';
 
 export default class Underline extends Component {
@@ -47,6 +46,13 @@ export default class Underline extends Component {
 		} = this.props;
 		return (
 			<View
+				onLayout={(event) => {
+					const measuredWidth = event.nativeEvent.layout.width;
+					if (!measuredWidth) {
+						return;
+					}
+					this.wrapperWidth = measuredWidth;
+				}}
 				style={[styles.underlineWrapper, {
 					backgroundColor: borderColor
 				}]}