Commit 4de28870 authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

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

Fix text in standardHeader to be centered on iOS

See merge request !227
parents 00d5c273 93e335b2
......@@ -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();
......
// 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,
}
}
>
......
......@@ -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
......
......@@ -23,19 +23,17 @@ const styles = StyleSheet.create({
backgroundColor: Colors.magenta,
height: APPBAR_HEIGHT,
flexDirection: 'row',
android: {
height: APPBAR_HEIGHT,
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
android: {
height: APPBAR_HEIGHT,
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,
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment