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

Commit 6be0881

Browse files
satya164satya164
committed
feat: add an option to override safe area insets
1 parent 421ee66 commit 6be0881

File tree

9 files changed

+97
-35
lines changed

9 files changed

+97
-35
lines changed

‎example/yarn.lock‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9483,7 +9483,14 @@ react-native-safe-area-context@^0.3.6:
94839483
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.3.6.tgz#666bf581b59aa49a9685aea4e76dfd6e1c8a8a52"
94849484
integrity sha512-5wlaJplOlWxBNnjmCtY/FAlsgRDuoKzmLQzbWUw4NDuOa3H2uq1kTdqTWOw78Nzm5FRqGWe1ZSLWU9+nSaN+vA==
94859485

9486-
react-native-safe-area-view@0.14.6, react-native-safe-area-view@^0.12.0, react-native-safe-area-view@^0.14.1, react-native-safe-area-view@^0.14.6:
9486+
react-native-safe-area-view@^0.12.0:
9487+
version "0.12.0"
9488+
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.12.0.tgz#5c312f087300ecf82e8541c3eac25d560e147f22"
9489+
integrity sha512-UrAXmBC4KNR5K2eczIDZgqceWyKsgG9gmWFerHCvoyApfei8ceBB9u/c//PWCpS5Gt8MRLTmX5jPtzdXo2yNqg==
9490+
dependencies:
9491+
hoist-non-react-statics "^2.3.1"
9492+
9493+
react-native-safe-area-view@^0.14.1, react-native-safe-area-view@^0.14.6:
94879494
version "0.14.6"
94889495
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.6.tgz#9a9d37d9f8f3887d60c4076eae7b5d2319539446"
94899496
integrity sha512-dbzuvaeHFV1VBpyMaC0gtJ2BqFt6ls/405A0t78YN1sXiTrVr3ki86Ysct8mzifWqLdvWzcWagE5wfMtdxnqoA==

‎src/types.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export type HeaderOptions = {
101101
export type HeaderProps = {
102102
mode: 'float' | 'screen';
103103
layout: Layout;
104+
insets: EdgeInsets;
104105
scene: HeaderScene;
105106
previous?: HeaderScene;
106107
navigation: NavigationStackProp;
@@ -129,6 +130,12 @@ export type NavigationStackOptions = HeaderOptions &
129130
onTransitionStart?: (props: TransitionCallbackProps) => void;
130131
onTransitionEnd?: (props: TransitionCallbackProps) => void;
131132
gestureVelocityImpact?: number;
133+
safeAreaInsets?: {
134+
top?: number;
135+
right?: number;
136+
bottom?: number;
137+
left?: number;
138+
};
132139
};
133140

134141
export type NavigationStackConfig = {

‎src/views/Header/Header.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default class Header extends React.PureComponent<HeaderProps> {
99
scene,
1010
previous,
1111
layout,
12+
insets,
1213
navigation,
1314
styleInterpolator,
1415
} = this.props;
@@ -42,6 +43,7 @@ export default class Header extends React.PureComponent<HeaderProps> {
4243
<HeaderSegment
4344
{...options}
4445
layout={layout}
46+
insets={insets}
4547
scene={scene}
4648
title={title}
4749
leftLabel={leftLabel}

‎src/views/Header/HeaderContainer.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
33
import { NavigationContext, NavigationRoute } from 'react-navigation';
4+
import { EdgeInsets } from 'react-native-safe-area-context';
45
import {
56
Layout,
67
HeaderScene,
@@ -13,6 +14,7 @@ import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
1314
export type Props = {
1415
mode: 'float' | 'screen';
1516
layout: Layout;
17+
insets: EdgeInsets;
1618
scenes: Array<HeaderScene | undefined>;
1719
navigation: NavigationStackProp;
1820
getPreviousRoute: (props: {
@@ -30,6 +32,7 @@ export default function HeaderContainer({
3032
mode,
3133
scenes,
3234
layout,
35+
insets,
3336
navigation,
3437
getPreviousRoute,
3538
onContentHeightChange,
@@ -84,6 +87,7 @@ export default function HeaderContainer({
8487
const props = {
8588
mode,
8689
layout,
90+
insets,
8791
scene,
8892
previous,
8993
navigation: scene.descriptor.navigation as NavigationStackProp,

‎src/views/Header/HeaderSegment.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ViewStyle,
88
} from 'react-native';
99
import Animated from 'react-native-reanimated';
10-
import { SafeAreaContext, EdgeInsets } from 'react-native-safe-area-context';
10+
import { EdgeInsets } from 'react-native-safe-area-context';
1111
import HeaderTitle from './HeaderTitle';
1212
import HeaderBackButton from './HeaderBackButton';
1313
import HeaderBackground from './HeaderBackground';
@@ -27,6 +27,7 @@ export type Scene<T> = {
2727

2828
type Props = HeaderOptions & {
2929
layout: Layout;
30+
insets: EdgeInsets;
3031
onGoBack?: () => void;
3132
title?: React.ReactNode;
3233
leftLabel?: string;
@@ -39,13 +40,6 @@ type State = {
3940
leftLabelLayout?: Layout;
4041
};
4142

42-
const DEFAULT_INSETS = {
43-
top: 0,
44-
left: 0,
45-
right: 0,
46-
bottom: 0,
47-
};
48-
4943
const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
5044
Object.keys(styles).forEach(styleProp => {
5145
const value = styles[styleProp];
@@ -87,10 +81,6 @@ export const getDefaultHeaderHeight = (
8781
};
8882

8983
export default class HeaderSegment extends React.Component<Props, State> {
90-
static contextType = SafeAreaContext;
91-
92-
context!: EdgeInsets | null;
93-
9484
state: State = {};
9585

9686
private handleTitleLayout = (e: LayoutChangeEvent) => {
@@ -147,6 +137,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
147137
const {
148138
scene,
149139
layout,
140+
insets,
150141
title: currentTitle,
151142
leftLabel: previousTitle,
152143
onGoBack,
@@ -197,12 +188,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
197188
previousTitle ? leftLabelLayout : undefined
198189
);
199190

200-
const insets = this.context || DEFAULT_INSETS;
201-
202191
const statusBarHeight = insets.top;
203192

204193
const {
205-
height = getDefaultHeaderHeight(layout, this.context),
194+
height = getDefaultHeaderHeight(layout, insets),
206195
minHeight,
207196
maxHeight,
208197
backgroundColor,

‎src/views/Stack/Card.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
PanGestureHandler,
1515
State as GestureState,
1616
} from 'react-native-gesture-handler';
17-
import { SafeAreaContext, EdgeInsets } from 'react-native-safe-area-context';
17+
import { EdgeInsets } from 'react-native-safe-area-context';
1818
import {
1919
TransitionSpec,
2020
CardStyleInterpolator,
@@ -34,6 +34,7 @@ type Props = ViewProps & {
3434
next?: Animated.Node<number>;
3535
current: Animated.Value<number>;
3636
layout: Layout;
37+
insets: EdgeInsets;
3738
gestureDirection: 'horizontal' | 'vertical' | 'vertical-inverted';
3839
onOpen: (isFinished: boolean) => void;
3940
onClose: (isFinished: boolean) => void;
@@ -229,13 +230,6 @@ function transformTimingConfigToAnimatedValues(
229230
};
230231
}
231232

232-
const DEFAULT_INSETS: EdgeInsets = {
233-
top: 0,
234-
left: 0,
235-
right: 0,
236-
bottom: 0,
237-
};
238-
239233
export default class Card extends React.Component<Props> {
240234
static defaultProps = {
241235
overlayEnabled: Platform.OS !== 'ios',
@@ -244,10 +238,6 @@ export default class Card extends React.Component<Props> {
244238
gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
245239
};
246240

247-
static contextType = SafeAreaContext;
248-
249-
context!: EdgeInsets | null;
250-
251241
componentDidUpdate(prevProps: Props) {
252242
const {
253243
layout,
@@ -407,7 +397,10 @@ export default class Card extends React.Component<Props> {
407397
this.props.current,
408398
this.props.next,
409399
this.props.layout,
410-
this.context || DEFAULT_INSETS
400+
this.props.insets.top,
401+
this.props.insets.right,
402+
this.props.insets.bottom,
403+
this.props.insets.left
411404
);
412405
};
413406

@@ -716,7 +709,10 @@ export default class Card extends React.Component<Props> {
716709
current: Animated.Node<number>,
717710
next: Animated.Node<number> | undefined,
718711
layout: Layout,
719-
insets: EdgeInsets
712+
insetTop: number,
713+
insetRight: number,
714+
insetBottom: number,
715+
insetLeft: number
720716
) =>
721717
styleInterpolator({
722718
index,
@@ -726,7 +722,12 @@ export default class Card extends React.Component<Props> {
726722
layouts: {
727723
screen: layout,
728724
},
729-
insets,
725+
insets: {
726+
top: insetTop,
727+
right: insetRight,
728+
bottom: insetBottom,
729+
left: insetLeft,
730+
},
730731
})
731732
);
732733

@@ -740,7 +741,10 @@ export default class Card extends React.Component<Props> {
740741
this.props.current,
741742
this.props.next,
742743
this.props.layout,
743-
this.context || DEFAULT_INSETS
744+
this.props.insets.top,
745+
this.props.insets.right,
746+
this.props.insets.bottom,
747+
this.props.insets.left
744748
);
745749

746750
private gestureActivationCriteria() {
@@ -797,6 +801,7 @@ export default class Card extends React.Component<Props> {
797801
current,
798802
next,
799803
layout,
804+
insets,
800805
overlayEnabled,
801806
shadowEnabled,
802807
gestureEnabled,
@@ -814,7 +819,10 @@ export default class Card extends React.Component<Props> {
814819
current,
815820
next,
816821
layout,
817-
this.context || DEFAULT_INSETS
822+
insets.top,
823+
insets.right,
824+
insets.bottom,
825+
insets.left
818826
);
819827
}
820828

‎src/views/Stack/Stack.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ type ProgressValues = {
3535

3636
type Props = {
3737
mode: 'card' | 'modal';
38-
insets: EdgeInsets | null;
38+
insets: EdgeInsets;
3939
navigation: NavigationStackProp;
4040
descriptors: SceneDescriptorMap;
4141
routes: NavigationRoute[];
@@ -300,6 +300,7 @@ export default class Stack extends React.Component<Props, State> {
300300
render() {
301301
const {
302302
mode,
303+
insets,
303304
descriptors,
304305
navigation,
305306
routes,
@@ -333,6 +334,13 @@ export default class Stack extends React.Component<Props, State> {
333334
};
334335
}
335336

337+
const {
338+
top = insets.top,
339+
right = insets.right,
340+
bottom = insets.bottom,
341+
left = insets.left,
342+
} = focusedOptions.safeAreaInsets || {};
343+
336344
return (
337345
<React.Fragment>
338346
<MaybeScreenContainer
@@ -367,6 +375,7 @@ export default class Stack extends React.Component<Props, State> {
367375
}
368376

369377
const {
378+
safeAreaInsets,
370379
header,
371380
headerShown,
372381
headerTransparent,
@@ -416,6 +425,13 @@ export default class Stack extends React.Component<Props, State> {
416425
}
417426
}
418427

428+
const {
429+
top: safeAreaInsetTop = insets.top,
430+
right: safeAreaInsetRight = insets.right,
431+
bottom: safeAreaInsetBottom = insets.bottom,
432+
left: safeAreaInsetLeft = insets.left,
433+
} = safeAreaInsets || {};
434+
419435
return (
420436
<MaybeScreen
421437
key={route.key}
@@ -434,6 +450,10 @@ export default class Stack extends React.Component<Props, State> {
434450
scene={scene}
435451
previousScene={scenes[index - 1]}
436452
navigation={navigation}
453+
safeAreaInsetTop={safeAreaInsetTop}
454+
safeAreaInsetRight={safeAreaInsetRight}
455+
safeAreaInsetBottom={safeAreaInsetBottom}
456+
safeAreaInsetLeft={safeAreaInsetLeft}
437457
cardTransparent={cardTransparent}
438458
cardOverlayEnabled={cardOverlayEnabled}
439459
cardShadowEnabled={cardShadowEnabled}
@@ -470,6 +490,7 @@ export default class Stack extends React.Component<Props, State> {
470490
? renderHeader({
471491
mode: 'float',
472492
layout,
493+
insets: { top, right, bottom, left },
473494
scenes,
474495
navigation,
475496
getPreviousRoute,

‎src/views/Stack/StackItem.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ type Props = TransitionPreset & {
2222
previousScene?: HeaderScene;
2323
scene: HeaderScene;
2424
navigation: NavigationStackProp;
25+
safeAreaInsetTop: number;
26+
safeAreaInsetRight: number;
27+
safeAreaInsetBottom: number;
28+
safeAreaInsetLeft: number;
2529
cardTransparent?: boolean;
2630
cardOverlayEnabled?: boolean;
2731
cardShadowEnabled?: boolean;
@@ -102,6 +106,10 @@ export default class StackItem extends React.PureComponent<Props> {
102106
navigation,
103107
scene,
104108
previousScene,
109+
safeAreaInsetTop,
110+
safeAreaInsetRight,
111+
safeAreaInsetBottom,
112+
safeAreaInsetLeft,
105113
cardTransparent,
106114
cardOverlayEnabled,
107115
cardShadowEnabled,
@@ -124,13 +132,21 @@ export default class StackItem extends React.PureComponent<Props> {
124132
gestureVelocityImpact,
125133
} = this.props;
126134

135+
const insets = {
136+
top: safeAreaInsetTop,
137+
right: safeAreaInsetRight,
138+
bottom: safeAreaInsetBottom,
139+
left: safeAreaInsetLeft,
140+
};
141+
127142
return (
128143
<Card
129144
index={index}
130145
active={active}
131146
transparent={cardTransparent}
132147
gestureDirection={gestureDirection}
133148
layout={layout}
149+
insets={insets}
134150
current={current}
135151
next={scene.progress.next}
136152
closing={closing}
@@ -165,6 +181,7 @@ export default class StackItem extends React.PureComponent<Props> {
165181
? renderHeader({
166182
mode: 'screen',
167183
layout,
184+
insets,
168185
scenes: [previousScene, scene],
169186
navigation,
170187
getPreviousRoute,

0 commit comments

Comments
 (0)