Skip to content

Commit c5ffe41

Browse files
Freddy03hspencercarli
Freddy03h
authored and
spencercarli
committed
Fix impossible to renderTitle in full width on ios (react-navigation#2641)
* Fix impossible to renderTitle in full width on ios * Fix test and add a test
1 parent 283518b commit c5ffe41

File tree

3 files changed

+245
-2
lines changed

3 files changed

+245
-2
lines changed

‎src/navigators/__tests__/StackNavigator-test.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,18 @@ describe('StackNavigator', () => {
3030

3131
expect(rendered).toMatchSnapshot();
3232
});
33+
34+
it('applies correct values when headerRight is present', () => {
35+
const MyStackNavigator = StackNavigator({
36+
Home: {
37+
screen: HomeScreen,
38+
navigationOptions: {
39+
headerRight: <View />,
40+
},
41+
},
42+
});
43+
const rendered = renderer.create(<MyStackNavigator />).toJSON();
44+
45+
expect(rendered).toMatchSnapshot();
46+
});
3347
});

‎src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

Lines changed: 224 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`StackNavigator renders successfully 1`] = `
3+
exports[`StackNavigator applies correct values when headerRight is present 1`] = `
44
<View
55
onLayout={[Function]}
66
style={
@@ -101,7 +101,7 @@ exports[`StackNavigator renders successfully 1`] = `
101101
"index": 0,
102102
"routes": Array [
103103
Object {
104-
"key": "Init-id-0-0",
104+
"key": "Init-id-0-1",
105105
"routeName": "Home",
106106
},
107107
],
@@ -197,6 +197,228 @@ exports[`StackNavigator renders successfully 1`] = `
197197
Welcome anonymous
198198
</Text>
199199
</View>
200+
<View
201+
collapsable={undefined}
202+
pointerEvents="box-none"
203+
style={
204+
Object {
205+
"alignItems": "center",
206+
"backgroundColor": "transparent",
207+
"bottom": 0,
208+
"justifyContent": "center",
209+
"opacity": 1,
210+
"position": "absolute",
211+
"right": 0,
212+
"top": 0,
213+
}
214+
}
215+
>
216+
<View />
217+
</View>
218+
</View>
219+
</View>
220+
</View>
221+
</View>
222+
</View>
223+
`;
224+
225+
exports[`StackNavigator renders successfully 1`] = `
226+
<View
227+
onLayout={[Function]}
228+
style={
229+
Array [
230+
Object {
231+
"flex": 1,
232+
},
233+
undefined,
234+
]
235+
}
236+
>
237+
<View
238+
onMoveShouldSetResponder={[Function]}
239+
onMoveShouldSetResponderCapture={[Function]}
240+
onResponderEnd={[Function]}
241+
onResponderGrant={[Function]}
242+
onResponderMove={[Function]}
243+
onResponderReject={[Function]}
244+
onResponderRelease={[Function]}
245+
onResponderStart={[Function]}
246+
onResponderTerminate={[Function]}
247+
onResponderTerminationRequest={[Function]}
248+
onStartShouldSetResponder={[Function]}
249+
onStartShouldSetResponderCapture={[Function]}
250+
style={
251+
Array [
252+
Object {
253+
"flex": 1,
254+
"flexDirection": "column-reverse",
255+
},
256+
Object {
257+
"backgroundColor": "#000",
258+
},
259+
]
260+
}
261+
>
262+
<View
263+
style={
264+
Object {
265+
"flex": 1,
266+
}
267+
}
268+
>
269+
<View
270+
collapsable={undefined}
271+
pointerEvents="auto"
272+
style={
273+
Object {
274+
"backgroundColor": "#E9E9EF",
275+
"bottom": 0,
276+
"left": 0,
277+
"opacity": 1,
278+
"position": "absolute",
279+
"right": 0,
280+
"shadowColor": "black",
281+
"shadowOffset": Object {
282+
"height": 0,
283+
"width": 0,
284+
},
285+
"shadowOpacity": 0.2,
286+
"shadowRadius": 5,
287+
"top": 0,
288+
"transform": Array [
289+
Object {
290+
"translateX": 0,
291+
},
292+
Object {
293+
"translateY": 0,
294+
},
295+
],
296+
}
297+
}
298+
/>
299+
</View>
300+
<View
301+
cardStyle={undefined}
302+
collapsable={undefined}
303+
getScreenDetails={[Function]}
304+
headerMode={undefined}
305+
index={0}
306+
layout={
307+
Object {
308+
"height": 0,
309+
"initHeight": 0,
310+
"initWidth": 0,
311+
"isMeasured": false,
312+
"width": 0,
313+
}
314+
}
315+
mode="float"
316+
navigation={
317+
Object {
318+
"dispatch": [Function],
319+
"goBack": [Function],
320+
"navigate": [Function],
321+
"setParams": [Function],
322+
"state": Object {
323+
"index": 0,
324+
"routes": Array [
325+
Object {
326+
"key": "Init-id-0-0",
327+
"routeName": "Home",
328+
},
329+
],
330+
},
331+
}
332+
}
333+
router={
334+
Object {
335+
"getActionForPathAndParams": [Function],
336+
"getComponentForRouteName": [Function],
337+
"getComponentForState": [Function],
338+
"getPathAndParamsForState": [Function],
339+
"getScreenConfig": [Function],
340+
"getScreenOptions": [Function],
341+
"getStateForAction": [Function],
342+
}
343+
}
344+
style={
345+
Object {
346+
"backgroundColor": "#F7F7F7",
347+
"borderBottomColor": "rgba(0, 0, 0, .3)",
348+
"borderBottomWidth": 0.5,
349+
"height": 64,
350+
"paddingTop": 20,
351+
}
352+
}
353+
transitionConfig={undefined}
354+
>
355+
<View
356+
style={
357+
Object {
358+
"flex": 1,
359+
}
360+
}
361+
>
362+
<View
363+
style={
364+
Array [
365+
Object {
366+
"bottom": 0,
367+
"left": 0,
368+
"position": "absolute",
369+
"right": 0,
370+
"top": 0,
371+
},
372+
Object {
373+
"flexDirection": "row",
374+
},
375+
]
376+
}
377+
>
378+
<View
379+
collapsable={undefined}
380+
pointerEvents="box-none"
381+
style={
382+
Object {
383+
"alignItems": "center",
384+
"backgroundColor": "transparent",
385+
"bottom": 0,
386+
"justifyContent": "center",
387+
"left": 0,
388+
"opacity": 1,
389+
"position": "absolute",
390+
"right": 0,
391+
"top": 0,
392+
"transform": Array [
393+
Object {
394+
"translateX": 0,
395+
},
396+
],
397+
}
398+
}
399+
>
400+
<Text
401+
accessibilityTraits="header"
402+
accessible={true}
403+
allowFontScaling={true}
404+
collapsable={undefined}
405+
disabled={false}
406+
ellipsizeMode="tail"
407+
numberOfLines={1}
408+
onLayout={[Function]}
409+
style={
410+
Object {
411+
"color": "rgba(0, 0, 0, .9)",
412+
"fontSize": 17,
413+
"fontWeight": "600",
414+
"marginHorizontal": 16,
415+
"textAlign": "center",
416+
}
417+
}
418+
>
419+
Welcome anonymous
420+
</Text>
421+
</View>
200422
</View>
201423
</View>
202424
</View>

‎src/views/Header/Header.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,13 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
172172
if (!options.hasRightComponent) {
173173
style.right = 0;
174174
}
175+
} else if (
176+
Platform.OS === 'ios' &&
177+
!options.hasLeftComponent &&
178+
!options.hasRightComponent
179+
) {
180+
style.left = 0;
181+
style.right = 0;
175182
}
176183

177184
return this._renderSubView(

0 commit comments

Comments
 (0)