Merge branch 'fix/ios-header-styling' into 'master'

Fix text in standardHeader to be centered on iOS

See merge request !227

__tests__/ui/components/standardHeader/StandardHeader.spec.js

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import StandardHeader from '../../../../app/ui/components/standardHeader/StandardHeader';
 import reducer from '../../../../app/reducers';
+import { Platform } from 'react-native';
 
 jest.mock('react-navigation', () => ({
   withNavigation: component => component,
@@ -29,7 +30,16 @@ describe('StandardHeader component', () => {
   };
   const store = mockStore(initialState);
 
-  it('renders correctly', () => {
+  it('renders correctly on iOS', () => {
+    Platform.OS = 'ios';
+    const tree = renderer
+      .create(<StandardHeader store={store} navigation={mockNavigation} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly on Android', () => {
+    Platform.OS = 'android';
     const tree = renderer
       .create(<StandardHeader store={store} navigation={mockNavigation} />)
       .toJSON();

__tests__/ui/components/standardHeader/__snapshots__/StandardHeader.spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StandardHeader component renders correctly 1`] = `
+exports[`StandardHeader component renders correctly on Android 1`] = `
 <View>
   <View
     style={
@@ -19,8 +19,9 @@ exports[`StandardHeader component renders correctly 1`] = `
         "borderBottomWidth": 1,
         "borderStyle": "solid",
         "flexDirection": "row",
+        "flexWrap": "wrap",
         "height": 44,
-        "justifyContent": "space-between",
+        "justifyContent": "flex-start",
       }
     }
   >
@@ -36,6 +37,7 @@ exports[`StandardHeader component renders correctly 1`] = `
       style={
         Object {
           "opacity": 1,
+          "zIndex": 2,
         }
       }
     >
@@ -70,7 +72,105 @@ exports[`StandardHeader component renders correctly 1`] = `
           "fontFamily": "System",
           "fontSize": 18,
           "fontWeight": "600",
+          "left": 40,
+          "position": "absolute",
+          "right": 40,
+          "textAlign": "center",
+          "zIndex": 0,
+        }
+      }
+    >
+      ThaliApp
+    </Text>
+    <View
+      style={
+        Object {
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`StandardHeader component renders correctly on iOS 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#E62272",
+        "height": 20,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#E62272",
+        "borderBottomColor": "#C2185B",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "height": 44,
+        "justifyContent": "flex-start",
+      }
+    }
+  >
+    <View
+      accessible={true}
+      isTVSelectable={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+          "zIndex": 2,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": undefined,
+              "fontSize": 24,
+            },
+            Object {
+              "color": "#FFFFFF",
+              "paddingLeft": 10,
+              "paddingRight": 16,
+            },
+            Object {
+              "fontFamily": "Material Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+    <Text
+      style={
+        Object {
+          "color": "#FFFFFF",
+          "fontFamily": "System",
+          "fontSize": 18,
+          "fontWeight": "600",
+          "left": 40,
+          "position": "absolute",
+          "right": 40,
           "textAlign": "center",
+          "zIndex": 0,
         }
       }
     >

app/ui/components/standardHeader/StandardHeader.js

@@ -45,6 +45,7 @@ const StandardHeader = props => (
     </View>
     <View style={styles.appBar}>
       <TouchableOpacity
+        style={styles.iconButton}
         onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
       >
         <Icon

app/ui/components/standardHeader/style/StandardHeader.js

@@ -23,19 +23,17 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.magenta,
     height: APPBAR_HEIGHT,
     flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexWrap: 'wrap',
     android: {
       height: APPBAR_HEIGHT,
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-      flexWrap: 'wrap',
       elevation: 4,
     },
     ios: {
       borderStyle: 'solid',
       borderBottomColor: Colors.darkMagenta,
       borderBottomWidth: 1,
-      justifyContent: 'space-between',
-      alignItems: 'center',
     },
   },
   title: {
@@ -45,12 +43,19 @@ const styles = StyleSheet.create({
       fontFamily: 'sans-serif-medium',
     },
     ios: {
+      position: 'absolute',
+      left: 40,
+      right: 40,
+      zIndex: 0,
+      textAlign: 'center',
       fontSize: 18,
       fontFamily: 'System',
       fontWeight: '600',
-      textAlign: 'center',
     },
   },
+  iconButton: {
+    zIndex: 2,
+  },
   icon: {
     android: {
       paddingLeft: 20,

ios/ThaliApp/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.6.0</string>
+	<string>2.6.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>15</string>
+	<string>16</string>
 	<key>LSApplicationQueriesSchemes</key>
 	<array>
 		<string>whatsapp</string>