Change the android app styles

src/Button.js

@@ -13,6 +13,9 @@ import defaultTheme from './theme'
 
 const ButtonWrapper = styled.View`
   flex:1;
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: center;
 `
 
 const ButtonStyle = styled.View`
@@ -26,17 +29,15 @@ ButtonStyle.defaultProps = {
 
 const ButtonTextWrapper = styled.View`
   flex:1;
-  flex-direction:row;
-  align-items:center;
-  justify-content:center;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 `
 
 const ButtonText = styled.Text`
   color: ${props => props.theme.Button.color};
   font-size: ${props => props.theme.Button.fontSize};
   font-weight: ${props => props.theme.Button.fontWeight};
-  height: ${props => props.theme.Button.height};
-  line-height: ${props => props.theme.Button.height};
 `
 
 ButtonText.defaultProps = {
@@ -81,17 +82,9 @@ const Button = props => {
       <Touchable {...rest}>
         <ButtonStyle>
           <ButtonTextWrapper>
-            {
-              iconPlacement === 'left' &&
-                IconWrapped
-            }
-            <ButtonText>
-              { children }
-            </ButtonText>
-            {
-              iconPlacement === 'right' &&
-                IconWrapped
-            }
+            {iconPlacement === 'left' && IconWrapped}
+            <ButtonText>{ children }</ButtonText>
+            {iconPlacement === 'right' && IconWrapped}
           </ButtonTextWrapper>
         </ButtonStyle>
       </Touchable>

src/Input.js

@@ -6,7 +6,7 @@ import defaultTheme from './theme'
 /**
  * Calculate the height based on the given field properties.
  * The inline label and multiline properties affect the height.
- * 
+ *
  * @param {Object} props
  * @returns {int}
  */
@@ -24,9 +24,48 @@ const calculateHeight = (props) => {
   return (height)
 }
 
+/**
+ * Calculates the flex value based on the inlineLabel and numberOfLines
+ * properties.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+const calculateFlexValue = (props) => {
+  let flex = 1
+
+  if (props.multiline && props.numberOfLines > 0) {
+    flex = props.numberOfLines + 1
+  }
+
+  if (props.inlineLabel) {
+    flex = 0.5
+  }
+
+  return (flex)
+}
+
+/**
+ * Decide how the text should be aligned for the input. This decision is based upon
+ * the field properties. A multiline input should start top and not centered.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+const determineTextOrientation = (props) => {
+  let orientation = 'center'
+
+  if (props.multiline && props.numberOfLines > 1) {
+    orientation = 'top'
+  }
+
+  return (orientation)
+}
+
 // When doing stacked labels we want the input to be greedy
-const InputWrapper = styled.View `
-  flex: ${props => props.inlineLabel ? .5: 1};
+const InputWrapper = styled.View`
+  flex: ${props => calculateFlexValue(props)};
+  justify-content: center;
   height: ${props => calculateHeight(props)};
 `
 
@@ -35,11 +74,13 @@ InputWrapper.defaultProps = {
 }
 
 // Subtract the border of the form group to have a full height input
-const StyledInput = styled.TextInput `
+const StyledInput = styled.TextInput`
+  flex: ${props => props.inlineLabel ? .5 : 1};
   color: ${props => props.theme.Input.color};
   font-size: ${props => props.theme.BaseInput.fontSize};
   height: ${props => calculateHeight(props)};
-  line-height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.FormGroup.height};
+  line-height: ${props => props.theme.BaseInput.lineHeight};
+  text-align-vertical: ${props => determineTextOrientation(props)};
 `
 
 StyledInput.defaultProps = {
@@ -49,7 +90,10 @@ StyledInput.defaultProps = {
 class Input extends React.Component {
   render() {
     return (
-      <InputWrapper inlineLabel={this.props.inlineLabel}>
+      <InputWrapper
+        inlineLabel={this.props.inlineLabel}
+        multiline={this.props.multiline}
+        numberOfLines={this.props.numberOfLines}>
         <StyledInput
           inlineLabel={this.props.inlineLabel}
           placeholderTextColor={this.props.theme.BaseInput.placeholderColor}

src/Label.js

@@ -1,17 +1,20 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Text, View, Platform } from 'react-native'
 import styled from 'styled-components/native'
 import defaultTheme from './theme'
 
 const LabelWrapper = styled.View`
+  flex: ${props => props.inlineLabel ? 0.5 : 1};
+  flex-direction: ${props => props.inlineLabel ? 'row' : 'column'};
+  flex-direction: column;
+  justify-content: center;
+  padding-left: ${Platform.OS === 'android' ? 5 : 0};
   marginTop: ${props => props.inlineLabel ? 0 : 5};
 `
 
 const LabelText = styled.Text`
   color: ${props => props.theme.Label.color};
   font-size: ${props => props.theme.Label.fontSize};
-  height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.Label.stackedHeight};
-  line-height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.Label.stackedHeight};
 `
 
 LabelText.defaultProps = {

src/Select.js

@@ -15,8 +15,6 @@ const HaveNoIdeaWhyThisIsNeeded=3
 
 const SelectLabel = styled.Text`
   font-size: ${props => props.theme.BaseInput.fontSize};
-  height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.FormGroup.height-HaveNoIdeaWhyThisIsNeeded};
-  line-height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.FormGroup.height-HaveNoIdeaWhyThisIsNeeded};
   flex:1;
 `
 
@@ -25,7 +23,8 @@ SelectLabel.defaultProps = {
 }
 
 const LabelIconWrapper = styled.View`
-  align-items:center;
+  justify-content: center;
+  align-items: center;
   flex-direction:row;
   height: ${props => props.inlineLabel ? props.theme.FormGroup.height - props.theme.FormGroup.borderWidth*2 : props.theme.FormGroup.height-HaveNoIdeaWhyThisIsNeeded};
 `

src/theme.js

@@ -29,15 +29,16 @@ const theme = {
   },
   BaseInput: {
     placeholderColor: '#c9c9c9',
-    fontSize: 12
+    fontSize: 12,
+    lineHeight: 18
   },
   Input: {
     color: '#313131',
   },
   Label: {
     color: '#bfc2c9',
     fontSize: 12,
-    stackedHeight: 20
+    stackedHeight: 40
   },
   Select: {