Add dense styling. Update README.

Author: evblurbs

README.md

@@ -53,6 +53,12 @@ class App extends React.Component {
 }
 ```
 
+### Dense Styling
+
+To use the "dense" styling that matches the [Material Design Style Guide](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels), you can set the prop `dense` to `true`. By default, this prop is set to `false`.
+
+![demo dense](/demo-dense.gif)
+
 ## Props
 
 Below are the props you can pass to the React Component to customize the TextInput.
@@ -64,10 +70,10 @@ highlightColor | string | | This string represents the hex code, rgb, or rgba co
 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).
 
 ## TODO
 
 - [ ] Support multi-line TextInput fields
-- [ ] Support dense style
 - [ ] Support character limit
 - [ ] Add option for dark theme

demo-dense.gif

@@ -36,7 +36,8 @@ class FloatingLabel extends Component {
           onChangeText={(text) => {
             this.inputs.name = text;
           }}
-          value={'Jam Man'}
+          value={'Jane'}
+          dense={true}
         />
         <TextField
           label={'Address'}
@@ -48,6 +49,7 @@ class FloatingLabel extends Component {
           onSubmitEditing={() => {
             this.refs.cityInput.focus();
           }}
+          dense={true}
         />
         <TextField
           label={'City'}
@@ -63,6 +65,7 @@ class FloatingLabel extends Component {
           onChangeText={(text) => {
             this.inputs.state = text;
           }}
+          value={'WA'}
         />
         <TextField
           label={'Zip'}

demo.gif

@@ -7,6 +7,6 @@
   },
   "dependencies": {
     "react-native": "^0.19.0",
-    "react-native-md-textinput": "1.6.0"
+    "react-native-md-textinput": "^1.6.0"
   }
 }

examples/FloatingLabel/index.ios.js

@@ -11,8 +11,19 @@ import React, {
 export default class FloatingLabel extends Component {
   constructor(props: Object) {
     super(props);
-		let posTop = (props.hasValue) ? 16 : 34;
-		let fontSize = (props.hasValue) ? 10 : 16;
+		if(props.dense) {
+			this.posTop = 12;
+			this.posBottom = 32;
+			this.fontLarge = 13;
+			this.fontSmall = 13;
+		} else {
+			this.posTop = 16;
+			this.posBottom = 37;
+			this.fontLarge = 16;
+			this.fontSmall = 12;
+		}
+		let posTop = (props.hasValue) ? this.posTop : this.posBottom;
+		let fontSize = (props.hasValue) ? this.fontSmall : this.fontLarge;
     this.state = {
       top: new Animated.Value(posTop),
       fontSize: new Animated.Value(fontSize)
@@ -24,23 +35,23 @@ export default class FloatingLabel extends Component {
   floatLabel() {
     Animated.parallel([
       Animated.timing(this.state.top, {
-        toValue: 16,
+        toValue: this.posTop,
         duration: this.props.duration
       }),
       Animated.timing(this.state.fontSize, {
-        toValue: 10,
+        toValue: this.fontSmall,
         duration: this.props.duration
       })
     ]).start();
   }
   sinkLabel() {
     Animated.parallel([
       Animated.timing(this.state.top, {
-        toValue: 34,
+        toValue: this.posBottom,
         duration: this.props.duration
       }),
       Animated.timing(this.state.fontSize, {
-        toValue: 16,
+        toValue: this.fontLarge,
         duration: this.props.duration
       })
     ]).start();
@@ -74,13 +85,14 @@ FloatingLabel.propTypes = {
 	duration: PropTypes.number,
 	label: PropTypes.string,
 	labelColor: PropTypes.string,
-	highlightColor: PropTypes.string
+	highlightColor: PropTypes.string,
+	dense: PropTypes.bool
 };
 
 const styles = StyleSheet.create({
   labelText: {
     position: 'absolute',
-    left: 1,
+    left: 0,
     backgroundColor: 'rgba(0,0,0,0)'
   }
 });

examples/FloatingLabel/package.json

@@ -34,40 +34,39 @@ export default class TextField extends Component {
 			onBlur,
 			onChangeText,
 			value,
+			dense,
 			...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();
-							onFocus && onFocus();
-            }}
-            onBlur={() => {
-              this.setState({isFocused: false});
-							!this.state.text.length && this.refs.floatingLabel.sinkLabel();
-							this.refs.underline.shrinkLine();
-							onBlur && onBlur();
-            }}
-            onChangeText={(text) => {
-              this.setState({text});
-							onChangeText && onChangeText(text);
-            }}
-            ref="input"
-						value={this.state.text}
-						{...props}
-          />
-					<Underline
-						ref="underline"
-						highlightColor={highlightColor}
-						duration={duration}
-						borderColor={borderColor}
-					/>
-        </View>
+      <View style={dense ? styles.denseWrapper : styles.wrapper} ref="wrapper">
+        <TextInput
+          style={dense ? styles.denseTextInput : styles.textInput}
+          onFocus={() => {
+            this.setState({isFocused: true});
+            this.refs.floatingLabel.floatLabel();
+						this.refs.underline.expandLine();
+						onFocus && onFocus();
+          }}
+          onBlur={() => {
+            this.setState({isFocused: false});
+						!this.state.text.length && this.refs.floatingLabel.sinkLabel();
+						this.refs.underline.shrinkLine();
+						onBlur && onBlur();
+          }}
+          onChangeText={(text) => {
+            this.setState({text});
+						onChangeText && onChangeText(text);
+          }}
+          ref="input"
+					value={this.state.text}
+					{...props}
+        />
+				<Underline
+					ref="underline"
+					highlightColor={highlightColor}
+					duration={duration}
+					borderColor={borderColor}
+				/>
         <FloatingLabel
           isFocused={this.state.isFocused}
           ref="floatingLabel"
@@ -76,6 +75,7 @@ export default class TextField extends Component {
 					labelColor={labelColor}
 					highlightColor={highlightColor}
 					duration={duration}
+					dense={dense}
 					hasValue={(this.state.text.length) ? true : false}
         />
       </View>
@@ -90,32 +90,40 @@ TextField.propTypes = {
 	onFocus: PropTypes.func,
 	onBlur: PropTypes.func,
 	onChangeText: PropTypes.func,
-	value: PropTypes.string
+	value: PropTypes.string,
+	dense: PropTypes.bool
 };
 
 TextField.defaultProps = {
 	duration: 200,
 	labelColor: '#9E9E9E',
 	borderColor: '#E0E0E0',
-	value: ''
+	value: '',
+	dense: false
 };
 
 const styles = StyleSheet.create({
   wrapper: {
     height: 72,
-    flex: 1,
-    paddingTop: 28,
-    paddingBottom: 8,
+    paddingTop: 30,
+    paddingBottom: 7,
     position: 'relative'
   },
+	denseWrapper: {
+		height: 60,
+		paddingTop: 28,
+		paddingBottom: 4,
+		position: 'relative'
+	},
   textInput: {
-    flex: 1,
     fontSize: 16,
-    lineHeight: 16
+		height: 34,
+		lineHeight: 34
   },
-  inputWrapper: {
-    borderWidth: 0,
-    height: 32,
-    flex: 1
-  }
+	denseTextInput: {
+		fontSize: 13,
+		height: 27,
+		lineHeight: 24,
+		paddingBottom: 3
+	}
 });