Fixed LineHeight to center labels vertically

package.json

@@ -70,5 +70,5 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "0.9.10"
+  "version": "1.0.0"
 }

src/Form.js

@@ -49,8 +49,8 @@ export class Form extends React.Component{
           key: child.ref || child.type+i,
           fieldRef : child.ref,
           ref: child.ref,
-          onFocus:this.handleFieldFocused.bind(this),
-          onChange:this.handleFieldChange.bind(this, child.ref)
+          onFocus: this.handleFieldFocused.bind(this),
+          onChange: this.handleFieldChange.bind(this, child.ref)
         }
       ));
     }, this);

src/fields/CountDownField.ios.js

@@ -92,7 +92,7 @@ export class CountDownField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/DatePickerField.android.js

@@ -90,7 +90,7 @@ export class DatePickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/DatePickerField.ios.js

@@ -88,7 +88,7 @@ export class DatePickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/InputField.ios.js

@@ -32,9 +32,9 @@ export class InputField extends React.Component{
           this.props.style
         ]}
       containerStyle={[formStyles.fieldContainer,
-            formStyles.horizontalContainer,
-            this.props.containerStyle,
-          ]}
+          formStyles.horizontalContainer,
+          this.props.containerStyle,
+        ]}
       />
     )
   }
@@ -65,7 +65,7 @@ let formStyles = StyleSheet.create({
     textAlign: 'right'
   },
   multiline:{
-    lineHeight: 32,
+    lineHeight: 45,
     fontSize: 34/2,
     paddingBottom:10
   },
@@ -98,8 +98,7 @@ let formStyles = StyleSheet.create({
     paddingLeft: 10,
     paddingRight: 10,
     justifyContent: 'center',
-    lineHeight: 32,
-
+    lineHeight: 45,
   },
   input:{
     paddingLeft: 10,

src/fields/LinkField.android.js

@@ -38,6 +38,6 @@ let formStyles = StyleSheet.create({
     paddingLeft: 10,
     paddingRight: 10,
     justifyContent: 'center',
-    lineHeight: 32
+    lineHeight: 45
   },
 });

src/fields/LinkField.ios.js

@@ -39,7 +39,7 @@ let formStyles = StyleSheet.create({
     paddingLeft: 10,
     paddingRight: 10,
     justifyContent: 'center',
-    lineHeight: 32,
+    lineHeight: 45,
     flex:2
   },
 });

src/fields/PickerField.android.js

@@ -91,7 +91,7 @@ export class PickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/PickerField.ios.js

@@ -89,7 +89,7 @@ export class PickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/SwitchField.ios.js

@@ -55,7 +55,7 @@ export class SwitchField extends React.Component{
       paddingLeft: 10,
       paddingRight: 10,
       justifyContent: 'center',
-      lineHeight: 32
+      lineHeight: 45
     },
 
   });

src/fields/TimePickerField.android.js

@@ -92,7 +92,7 @@ export class TimePickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/fields/TimePickerField.ios.js

@@ -92,7 +92,7 @@ export class TimePickerField extends React.Component{
           paddingLeft: 10,
           paddingRight: 10,
           justifyContent: 'center',
-          lineHeight: 32
+          lineHeight: 45
         },
         input:{
           paddingLeft: 10,

src/lib/DatePickerComponent.android.js

@@ -10,6 +10,10 @@ import {Field} from './Field';
   export class DatePickerComponent extends React.Component{
     constructor(props){
       super(props);
+      if (props.date) {
+        // Ensure initial value is retrieved in Form.getData()
+        if(this.props.onChange) this.props.onChange(props.date);
+      }
       this.state = {
         date: props.date? new Date(props.date) :'',
         isPickerVisible: false
@@ -176,7 +180,7 @@ import {Field} from './Field';
         paddingLeft: 10,
         paddingRight: 10,
         justifyContent: 'center',
-        lineHeight: 32
+        lineHeight: 45
       },
       input:{
         paddingLeft: 10,

src/lib/DatePickerComponent.ios.js

@@ -10,6 +10,10 @@ import {Field} from './Field';
 export class DatePickerComponent extends React.Component{
   constructor(props){
     super(props);
+    if (props.date) {
+      // Ensure initial value is retrieved in Form.getData()
+      if(this.props.onChange) this.props.onChange(props.date);
+    }
     this.state = {
       date: props.date? new Date(props.date) : '',
       isPickerVisible: false
@@ -41,6 +45,9 @@ export class DatePickerComponent extends React.Component{
 
   //      this.refs.picker.measure(this.getPickerLayout.bind(this));
 
+  _isPickerVisible() {
+    return this.state.isPickerVisible
+  }
 
   _togglePicker(event){
     this.setState({isPickerVisible:!this.state.isPickerVisible});
@@ -107,7 +114,7 @@ export class DatePickerComponent extends React.Component{
 
         </View>
       </Field>
-      {(this.state.isPickerVisible)?
+      {(this.props.showing)?
         pickerWrapper : null
       }
 
@@ -204,7 +211,7 @@ let formStyles = StyleSheet.create({
     paddingLeft: 10,
     paddingRight: 10,
     justifyContent: 'center',
-    lineHeight: 32
+    lineHeight: 45
   },
   input:{
     paddingLeft: 10,

src/lib/Field.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {HelpText} from './HelpText';
-let { View, StyleSheet, Text, TouchableHighlight} = require('react-native');
+let { View, StyleSheet, Text, TouchableHighlight, TouchableOpacity} = require('react-native');
 
 export class Field extends React.Component{
   render(){
@@ -14,14 +14,15 @@ export class Field extends React.Component{
           : null);
 
     if(this.props.onPress){
-      return <TouchableHighlight onPress={this.props.onPress}>
+      return <TouchableOpacity style={{
+      }} onPress={this.props.onPress}>
         <View>
           {this.props.children}
           {fieldHelpText}
         </View>
-      </TouchableHighlight>
+      </TouchableOpacity>
     }
-    return   <View>
+    return <View>
       {this.props.children}
       {fieldHelpText}
     </View>;

src/lib/InputComponent.js

@@ -17,6 +17,11 @@ export class InputComponent extends React.Component{
   constructor(props){
     super(props);
 
+    if (props.value) {
+      // Ensure initial value is retrieved in Form.getData()
+      if(this.props.onChange) this.props.onChange(props.value, this.valid);
+    }
+
     this.triggerValidation = this.triggerValidation.bind(this);
     // this.validate = this.validate.bind(this)
     this.validate(props.value);

src/lib/LinkComponent.js

@@ -8,6 +8,10 @@ import {Field} from './Field';
 export class LinkComponent extends React.Component{
   constructor(props){
     super(props);
+    if (props.value) {
+      // Ensure initial value is retrieved in Form.getData()
+      if(this.props.onChange) this.props.onChange(props.value, this.valid);
+    }
     this.state = {
     }
   }

src/lib/PickerComponent.android.js

@@ -10,6 +10,10 @@ var PickerItem = Picker.Item;
   export class PickerComponent extends React.Component{
     constructor(props){
       super(props);
+      if (props.value) {
+        // Ensure initial value is retrieved in Form.getData()
+        if(this.props.onChange) this.props.onChange(props.value, this.valid);
+      }
       this.state = {
         value: props.value || props.label,
       }
@@ -151,7 +155,7 @@ var PickerItem = Picker.Item;
         paddingLeft: 10,
         paddingRight: 10,
         justifyContent: 'center',
-        lineHeight: 32
+        lineHeight: 45
       },
       input:{
         paddingLeft: 10,

src/lib/PickerComponent.ios.js

@@ -11,6 +11,10 @@ var PickerItem = Picker.Item;
 export class PickerComponent extends React.Component{
     constructor(props){
       super(props);
+      if (props.value) {
+        // Ensure initial value is retrieved in Form.getData()
+        if(this.props.onChange) this.props.onChange(props.value, this.valid);
+      }
       this.state = {
         value: props.value,
         isPickerVisible: false
@@ -144,7 +148,7 @@ export class PickerComponent extends React.Component{
 
         </View>
         </Field>
-        {(this.state.isPickerVisible)?
+        {(this.props.showing)?
           pickerWrapper : null
         }
 
@@ -220,7 +224,7 @@ export class PickerComponent extends React.Component{
         paddingLeft: 10,
         paddingRight: 10,
         justifyContent: 'center',
-        lineHeight: 32
+        lineHeight: 45
       },
       input:{
         paddingLeft: 10,

src/lib/SwitchComponent.js

@@ -8,6 +8,10 @@ import {Field} from './Field';
 export class SwitchComponent extends React.Component{
   constructor(props){
     super(props);
+    if (props.value) {
+      // Ensure initial value is retrieved in Form.getData()
+      if(this.props.onChange) this.props.onChange(props.value, this.valid);
+    }
     this.state = {
       value: props.value,
     }
@@ -40,6 +44,7 @@ export class SwitchComponent extends React.Component{
 
         <Text style={this.props.labelStyle}>{this.props.label}</Text>
           <Switch
+          onTintColor={this.props.onTintColor}
           onValueChange={this.handleValueChange.bind(this)}
           style={this.props.switchStyle}
           value={this.state.value} />
@@ -106,7 +111,7 @@ SwitchComponent.propTypes = {
       paddingLeft: 10,
       paddingRight: 10,
       justifyContent: 'center',
-      lineHeight: 32
+      lineHeight: 45
     },
     input:{
       paddingLeft: 10,

src/lib/TimePickerComponent.android.js

@@ -10,6 +10,10 @@ import {Field} from './Field';
   export class TimePickerComponent extends React.Component{
     constructor(props){
       super(props);
+      if (props.value) {
+        // Ensure initial value is retrieved in Form.getData()
+        if(this.props.onChange) this.props.onChange(props.value, this.valid);
+      }
       this.state = {
         date: props.date? new Date(props.date) :'',
         isPickerVisible: false
@@ -167,7 +171,7 @@ import {Field} from './Field';
         paddingLeft: 10,
         paddingRight: 10,
         justifyContent: 'center',
-        lineHeight: 32
+        lineHeight: 45
       },
       input:{
         paddingLeft: 10,