Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Commit f0244dd

Browse files
satya164satya164
committed
fix: support specifying header background color in headerStyle
1 parent 5cf9e7e commit f0244dd

File tree

5 files changed

+87
-38
lines changed

5 files changed

+87
-38
lines changed

‎src/TransitionConfigs/HeaderStyleInterpolators.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,10 @@ export function forFade({
9898
leftButtonStyle: { opacity },
9999
rightButtonStyle: { opacity },
100100
titleStyle: { opacity },
101-
backgroundStyle: { opacity },
101+
// For both bakgrounds to cross-fade properly, we don't want to animate the one below from 0
102+
// Because 2 semitransparent backgrounds on top of each other will always have some transparency
103+
// And this will make the stuff under them visible (usually white) which isn't expected
104+
backgroundStyle: { opacity: current },
102105
};
103106
}
104107

‎src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ Array [
362362
"top": 0,
363363
},
364364
Object {
365-
"opacity": undefined,
365+
"opacity": NOOP {},
366366
},
367367
]
368368
}
@@ -376,7 +376,7 @@ Array [
376376
"borderBottomWidth": 0.5,
377377
"flex": 1,
378378
},
379-
undefined,
379+
Object {},
380380
]
381381
}
382382
/>
@@ -388,7 +388,6 @@ Array [
388388
Object {
389389
"height": 64,
390390
},
391-
undefined,
392391
]
393392
}
394393
>
@@ -498,7 +497,7 @@ Array [
498497
"top": 0,
499498
},
500499
Object {
501-
"opacity": undefined,
500+
"opacity": NOOP {},
502501
},
503502
]
504503
}
@@ -512,7 +511,7 @@ Array [
512511
"borderBottomWidth": 0.5,
513512
"flex": 1,
514513
},
515-
undefined,
514+
Object {},
516515
]
517516
}
518517
/>
@@ -524,7 +523,6 @@ Array [
524523
Object {
525524
"height": 64,
526525
},
527-
undefined,
528526
]
529527
}
530528
>

‎src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ Array [
206206
"top": 0,
207207
},
208208
Object {
209-
"opacity": undefined,
209+
"opacity": NOOP {},
210210
},
211211
]
212212
}
@@ -220,7 +220,10 @@ Array [
220220
"borderBottomWidth": 0.5,
221221
"flex": 1,
222222
},
223-
undefined,
223+
Object {
224+
"backgroundColor": "red",
225+
"opacity": 0.5,
226+
},
224227
]
225228
}
226229
/>
@@ -232,14 +235,6 @@ Array [
232235
Object {
233236
"height": 64,
234237
},
235-
Array [
236-
Object {
237-
"backgroundColor": "red",
238-
},
239-
Object {
240-
"opacity": 0.5,
241-
},
242-
],
243238
]
244239
}
245240
>
@@ -529,7 +524,7 @@ Array [
529524
"top": 0,
530525
},
531526
Object {
532-
"opacity": undefined,
527+
"opacity": NOOP {},
533528
},
534529
]
535530
}
@@ -543,7 +538,10 @@ Array [
543538
"borderBottomWidth": 0.5,
544539
"flex": 1,
545540
},
546-
undefined,
541+
Object {
542+
"backgroundColor": "red",
543+
"opacity": 0.5,
544+
},
547545
]
548546
}
549547
/>
@@ -555,14 +553,6 @@ Array [
555553
Object {
556554
"height": 64,
557555
},
558-
Array [
559-
Object {
560-
"backgroundColor": "red",
561-
},
562-
Object {
563-
"opacity": 0.5,
564-
},
565-
],
566556
]
567557
}
568558
>

‎src/types.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ export type HeaderOptions = {
7979
headerBackImage?: HeaderBackButtonProps['backImage'];
8080
headerPressColorAndroid?: string;
8181
headerBackground?: () => React.ReactNode;
82-
headerBackgroundStyle?: StyleProp<ViewStyle>;
8382
headerStyle?: StyleProp<ViewStyle>;
8483
headerStatusBarHeight?: number;
8584
headerTransparent?: boolean;

‎src/views/Header/HeaderSegment.tsx‎

Lines changed: 69 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import * as React from 'react';
2-
import { View, StyleSheet, LayoutChangeEvent, Platform } from 'react-native';
2+
import {
3+
View,
4+
StyleSheet,
5+
LayoutChangeEvent,
6+
Platform,
7+
ViewStyle,
8+
} from 'react-native';
39
import Animated from 'react-native-reanimated';
410
import { getStatusBarHeight } from 'react-native-safe-area-view';
511
import HeaderTitle from './HeaderTitle';
@@ -34,6 +40,18 @@ type State = {
3440
leftLabelLayout?: Layout;
3541
};
3642

43+
const warnIfHeaderStyleDefined = (value: any, styleProp: string) => {
44+
if (styleProp === 'position' && value === 'absolute') {
45+
console.warn(
46+
"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the headerTransparent navigationOption."
47+
);
48+
} else if (value !== undefined) {
49+
console.warn(
50+
`${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
51+
);
52+
}
53+
};
54+
3755
export const getDefaultHeaderHeight = (layout: Layout) => {
3856
const isLandscape = layout.width > layout.height;
3957

@@ -125,7 +143,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
125143
headerTransparent,
126144
headerTintColor,
127145
headerBackground,
128-
headerBackgroundStyle,
129146
headerRight: right,
130147
headerBackImage: backImage,
131148
headerBackTitle: leftLabel,
@@ -160,6 +177,54 @@ export default class HeaderSegment extends React.Component<Props, State> {
160177
previousTitle ? leftLabelLayout : undefined
161178
);
162179

180+
const {
181+
height = getDefaultHeaderHeight(layout),
182+
alignItems,
183+
justifyContent,
184+
flex,
185+
flexDirection,
186+
flexGrow,
187+
flexShrink,
188+
flexBasis,
189+
flexWrap,
190+
position,
191+
padding,
192+
paddingHorizontal,
193+
paddingRight,
194+
paddingLeft,
195+
paddingVertical,
196+
paddingTop,
197+
paddingBottom,
198+
top,
199+
right: _right,
200+
bottom: _bottom,
201+
left: _left,
202+
...safeHeaderStyle
203+
} = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
204+
205+
if (process.env.NODE_ENV !== 'production') {
206+
warnIfHeaderStyleDefined(alignItems, 'alignItems');
207+
warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
208+
warnIfHeaderStyleDefined(flex, 'flex');
209+
warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
210+
warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
211+
warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
212+
warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
213+
warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
214+
warnIfHeaderStyleDefined(padding, 'padding');
215+
warnIfHeaderStyleDefined(position, 'position');
216+
warnIfHeaderStyleDefined(paddingHorizontal, 'paddingHorizontal');
217+
warnIfHeaderStyleDefined(paddingRight, 'paddingRight');
218+
warnIfHeaderStyleDefined(paddingLeft, 'paddingLeft');
219+
warnIfHeaderStyleDefined(paddingVertical, 'paddingVertical');
220+
warnIfHeaderStyleDefined(paddingTop, 'paddingTop');
221+
warnIfHeaderStyleDefined(paddingBottom, 'paddingBottom');
222+
warnIfHeaderStyleDefined(top, 'top');
223+
warnIfHeaderStyleDefined(_right, 'right');
224+
warnIfHeaderStyleDefined(_bottom, 'bottom');
225+
warnIfHeaderStyleDefined(_left, 'left');
226+
}
227+
163228
return (
164229
<React.Fragment>
165230
<Animated.View
@@ -169,16 +234,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
169234
{headerBackground ? (
170235
headerBackground()
171236
) : headerTransparent ? null : (
172-
<HeaderBackground style={headerBackgroundStyle} />
237+
<HeaderBackground style={safeHeaderStyle} />
173238
)}
174239
</Animated.View>
175-
<Animated.View
176-
pointerEvents="box-none"
177-
style={[
178-
{ height: getDefaultHeaderHeight(layout) },
179-
customHeaderStyle,
180-
]}
181-
>
240+
<Animated.View pointerEvents="box-none" style={[{ height }]}>
182241
<View
183242
pointerEvents="none"
184243
style={{ height: headerStatusBarHeight }}

0 commit comments

Comments
 (0)