status-im/react-navigation
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation.git synced 2025-02-24 17:18:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix impossible to renderTitle in full width on ios (#2641)

Browse Source 
* Fix impossible to renderTitle in full width on ios

* Fix test and add a test
This commit is contained in:
Freddy Harris 2017-10-26 15:59:34 +02:00 committed by Spencer Carli
parent 283518b54a
commit c5ffe41b91
3 changed files with 245 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/navigators/__tests__/StackNavigator-test.js
View File

@ -30,4 +30,18 @@ describe('StackNavigator', () => {
expect(rendered).toMatchSnapshot();
});
it('applies correct values when headerRight is present', () => {
const MyStackNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerRight: <View />,
},
},
});
const rendered = renderer.create(<MyStackNavigator />).toJSON();
expect(rendered).toMatchSnapshot();
});
});

226
src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
View File

@ -1,5 +1,227 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackNavigator applies correct values when headerRight is present 1`] = `
<View
onLayout={[Function]}
style={
Array [
Object {
"flex": 1,
},
undefined,
]
}
>
<View
onMoveShouldSetResponder={[Function]}
onMoveShouldSetResponderCapture={[Function]}
onResponderEnd={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderReject={[Function]}
onResponderRelease={[Function]}
onResponderStart={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onStartShouldSetResponderCapture={[Function]}
style={
Array [
Object {
"flex": 1,
"flexDirection": "column-reverse",
},
Object {
"backgroundColor": "#000",
},
]
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
collapsable={undefined}
pointerEvents="auto"
style={
Object {
"backgroundColor": "#E9E9EF",
"bottom": 0,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"shadowColor": "black",
"shadowOffset": Object {
"height": 0,
"width": 0,
},
"shadowOpacity": 0.2,
"shadowRadius": 5,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateY": 0,
},
],
}
}
/>
</View>
<View
cardStyle={undefined}
collapsable={undefined}
getScreenDetails={[Function]}
headerMode={undefined}
index={0}
layout={
Object {
"height": 0,
"initHeight": 0,
"initWidth": 0,
"isMeasured": false,
"width": 0,
}
}
mode="float"
navigation={
Object {
"dispatch": [Function],
"goBack": [Function],
"navigate": [Function],
"setParams": [Function],
"state": Object {
"index": 0,
"routes": Array [
Object {
"key": "Init-id-0-1",
"routeName": "Home",
},
],
},
}
}
router={
Object {
"getActionForPathAndParams": [Function],
"getComponentForRouteName": [Function],
"getComponentForState": [Function],
"getPathAndParamsForState": [Function],
"getScreenConfig": [Function],
"getScreenOptions": [Function],
"getStateForAction": [Function],
}
}
style={
Object {
"backgroundColor": "#F7F7F7",
"borderBottomColor": "rgba(0, 0, 0, .3)",
"borderBottomWidth": 0.5,
"height": 64,
"paddingTop": 20,
}
}
transitionConfig={undefined}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"flexDirection": "row",
},
]
}
>
<View
collapsable={undefined}
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"justifyContent": "center",
"left": 70,
"opacity": 1,
"position": "absolute",
"right": 70,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
],
}
}
>
<Text
accessibilityTraits="header"
accessible={true}
allowFontScaling={true}
collapsable={undefined}
disabled={false}
ellipsizeMode="tail"
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"marginHorizontal": 16,
"textAlign": "center",
}
}
>
Welcome anonymous
</Text>
</View>
<View
collapsable={undefined}
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"justifyContent": "center",
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View />
</View>
</View>
</View>
</View>
</View>
</View>
`;
exports[`StackNavigator renders successfully 1`] = `
<View
onLayout={[Function]}
@ -162,10 +384,10 @@ exports[`StackNavigator renders successfully 1`] = `
"backgroundColor": "transparent",
"bottom": 0,
"justifyContent": "center",
"left": 70,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 70,
"right": 0,
"top": 0,
"transform": Array [
Object {

7
src/views/Header/Header.js
View File

@ -172,6 +172,13 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
if (!options.hasRightComponent) {
style.right = 0;
}
} else if (
Platform.OS === 'ios' &&
!options.hasLeftComponent &&
!options.hasRightComponent
) {
style.left = 0;
style.right = 0;
}
return this._renderSubView(