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'; ...@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
import StandardHeader from '../../../../app/ui/components/standardHeader/StandardHeader'; import StandardHeader from '../../../../app/ui/components/standardHeader/StandardHeader';
import reducer from '../../../../app/reducers'; import reducer from '../../../../app/reducers';
import { Platform } from 'react-native';
jest.mock('react-navigation', () => ({ jest.mock('react-navigation', () => ({
withNavigation: component => component, withNavigation: component => component,
...@@ -29,7 +30,16 @@ describe('StandardHeader component', () => { ...@@ -29,7 +30,16 @@ describe('StandardHeader component', () => {
}; };
const store = mockStore(initialState); 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 const tree = renderer
.create(<StandardHeader store={store} navigation={mockNavigation} />) .create(<StandardHeader store={store} navigation={mockNavigation} />)
.toJSON(); .toJSON();
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StandardHeader component renders correctly 1`] = ` exports[`StandardHeader component renders correctly on Android 1`] = `
<View> <View>
<View <View
style={ style={
...@@ -19,8 +19,9 @@ exports[`StandardHeader component renders correctly 1`] = ` ...@@ -19,8 +19,9 @@ exports[`StandardHeader component renders correctly 1`] = `
"borderBottomWidth": 1, "borderBottomWidth": 1,
"borderStyle": "solid", "borderStyle": "solid",
"flexDirection": "row", "flexDirection": "row",
"flexWrap": "wrap",
"height": 44, "height": 44,
"justifyContent": "space-between", "justifyContent": "flex-start",
} }
} }
> >
...@@ -36,6 +37,7 @@ exports[`StandardHeader component renders correctly 1`] = ` ...@@ -36,6 +37,7 @@ exports[`StandardHeader component renders correctly 1`] = `
style={ style={
Object { Object {
"opacity": 1, "opacity": 1,
"zIndex": 2,
} }
} }
> >
...@@ -70,7 +72,105 @@ exports[`StandardHeader component renders correctly 1`] = ` ...@@ -70,7 +72,105 @@ exports[`StandardHeader component renders correctly 1`] = `
"fontFamily": "System", "fontFamily": "System",
"fontSize": 18, "fontSize": 18,
"fontWeight": "600", "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", "textAlign": "center",
"zIndex": 0,
} }
} }
> >
......
...@@ -45,6 +45,7 @@ const StandardHeader = props => ( ...@@ -45,6 +45,7 @@ const StandardHeader = props => (
</View> </View>
<View style={styles.appBar}> <View style={styles.appBar}>
<TouchableOpacity <TouchableOpacity
style={styles.iconButton}
onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())} onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
> >
<Icon <Icon
......
...@@ -23,19 +23,17 @@ const styles = StyleSheet.create({ ...@@ -23,19 +23,17 @@ const styles = StyleSheet.create({
backgroundColor: Colors.magenta, backgroundColor: Colors.magenta,
height: APPBAR_HEIGHT, height: APPBAR_HEIGHT,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
android: { android: {
height: APPBAR_HEIGHT, height: APPBAR_HEIGHT,
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
elevation: 4, elevation: 4,
}, },
ios: { ios: {
borderStyle: 'solid', borderStyle: 'solid',
borderBottomColor: Colors.darkMagenta, borderBottomColor: Colors.darkMagenta,
borderBottomWidth: 1, borderBottomWidth: 1,
justifyContent: 'space-between',
alignItems: 'center',
}, },
}, },
title: { title: {
...@@ -45,12 +43,19 @@ const styles = StyleSheet.create({ ...@@ -45,12 +43,19 @@ const styles = StyleSheet.create({
fontFamily: 'sans-serif-medium', fontFamily: 'sans-serif-medium',
}, },
ios: { ios: {
position: 'absolute',
left: 40,
right: 40,
zIndex: 0,
textAlign: 'center',
fontSize: 18, fontSize: 18,
fontFamily: 'System', fontFamily: 'System',
fontWeight: '600', fontWeight: '600',
textAlign: 'center',
}, },
}, },
iconButton: {
zIndex: 2,
},
icon: { icon: {
android: { android: {
paddingLeft: 20, paddingLeft: 20,
......
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
<key>CFBundlePackageType</key> <key>CFBundlePackageType</key>
<string>APPL</string> <string>APPL</string>
<key>CFBundleShortVersionString</key> <key>CFBundleShortVersionString</key>
<string>2.6.0</string> <string>2.6.1</string>
<key>CFBundleSignature</key> <key>CFBundleSignature</key>
<string>????</string> <string>????</string>
<key>CFBundleVersion</key> <key>CFBundleVersion</key>
<string>15</string> <string>16</string>
<key>LSApplicationQueriesSchemes</key> <key>LSApplicationQueriesSchemes</key>
<array> <array>
<string>whatsapp</string> <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