From 03f9f8cd8ec3b5fe9dc2ed1ed2024e79dd06f854 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sat, 6 Jun 2020 02:28:20 +0200 Subject: [PATCH] feat: sync latest stack --- packages/stack/package.json | 2 +- packages/stack/scripts/stack.patch | 70 ++- .../NestedNavigator.test.tsx.snap | 416 +++++++++--------- .../StackNavigator.test.tsx.snap | 366 ++++++++------- packages/stack/src/vendor/types.tsx | 10 +- .../vendor/views/Header/HeaderBackground.tsx | 10 +- .../src/vendor/views/Header/HeaderSegment.tsx | 4 +- .../stack/src/vendor/views/Stack/Card.tsx | 10 +- .../src/vendor/views/Stack/CardContainer.tsx | 14 +- .../src/vendor/views/Stack/CardStack.tsx | 85 ++-- yarn.lock | 8 +- 11 files changed, 498 insertions(+), 497 deletions(-) diff --git a/packages/stack/package.json b/packages/stack/package.json index 553034a3..421039ea 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@react-native-community/bob": "^0.10.0", "@react-native-community/masked-view": "^0.1.7", - "@react-navigation/stack": "^5.3.6", + "@react-navigation/stack": "^5.4.2", "@types/color": "^3.0.1", "@types/react": "^16.9.23", "@types/react-native": "^0.61.22", diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index dcb9a293..797a0472 100644 --- a/packages/stack/scripts/stack.patch +++ b/packages/stack/scripts/stack.patch @@ -1,6 +1,6 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx ---- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/index.tsx 2020-05-11 18:29:57.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/index.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -3,11 +3,6 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; @@ -28,7 +28,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i StackHeaderLeftButtonProps, StackHeaderTitleProps, diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx ---- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-05-11 17:55:45.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-06-06 02:18:25.000000000 +0200 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,96 +0,0 @@ -import * as React from 'react'; @@ -128,8 +128,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack - typeof StackNavigator ->(StackNavigator); diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx ---- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/types.tsx 2020-05-11 18:29:52.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/types.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -8,15 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -262,8 +262,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t export type StackNavigationConfig = { diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/Header.tsx 2020-05-11 18:16:24.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/Header.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; @@ -344,8 +344,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts + +export default Header; diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-05-11 18:05:10.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -358,19 +358,20 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac type Props = StackHeaderLeftButtonProps; diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-05-11 18:05:10.000000000 +0200 -@@ -1,6 +1,6 @@ - import * as React from 'react'; - import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-06-06 02:23:41.000000000 +0200 +@@ -7,7 +7,7 @@ + StyleProp, + ViewStyle, + } from 'react-native'; -import { useTheme } from '@react-navigation/native'; +import useTheme from '../../../utils/useTheme'; type Props = ViewProps & { - children?: React.ReactNode; + style?: Animated.WithAnimatedValue>; diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-05-11 18:05:10.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -422,8 +423,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon ); })} diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-05-11 18:17:37.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -443,8 +444,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg }; diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-05-11 18:17:37.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform } from 'react-native'; @@ -454,9 +455,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit type Props = Omit, 'key'> & { tintColor?: string; diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Stack/Card.tsx 2020-05-11 18:05:10.000000000 +0200 -@@ -140,7 +140,7 @@ +--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Stack/Card.tsx 2020-06-06 02:22:30.000000000 +0200 +@@ -146,7 +146,7 @@ private interactionHandle: number | undefined; @@ -466,8 +467,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s private animate = ({ closing, diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-05-11 18:33:41.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -1,10 +1,11 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -481,18 +482,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai Scene, Layout, StackHeaderMode, -@@ -192,7 +193,7 @@ - ? { marginTop: headerHeight } - : null - } -- contentStyle={[{ backgroundColor: colors.background }, cardStyle]} -+ contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any} - style={StyleSheet.absoluteFill} - > - diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Stack/CardStack.tsx 2020-05-11 18:05:10.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Stack/CardStack.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -7,7 +7,7 @@ Platform, } from 'react-native'; @@ -511,8 +503,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack. StackHeaderMode, StackCardMode, diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx ---- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-05-11 17:55:45.000000000 +0200 -+++ src/vendor/views/Stack/StackView.tsx 2020-05-11 18:30:19.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-06-06 02:18:25.000000000 +0200 ++++ src/vendor/views/Stack/StackView.tsx 2020-06-06 02:22:30.000000000 +0200 @@ -2,11 +2,11 @@ import { View, Platform, StyleSheet } from 'react-native'; import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context'; diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap index 0e8755d6..91d288f1 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap @@ -8,6 +8,106 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` } } > + + + + + + + + + + + Sub + + + + + + @@ -168,6 +267,106 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` } } > + + + + + + + + + + + Home + + + + + + @@ -329,113 +527,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` - - - - - - - - - - - Home - - - - - - @@ -446,113 +537,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` - - - - - - - - - - - Sub - - - - - - `; diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap index d56e4505..3848fde8 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap @@ -8,177 +8,8 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] = } } > - - - - - - - - - - - - - - - - - - @@ -293,17 +125,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] = - -`; - -exports[`StackNavigator renders successfully 1`] = ` - @@ -465,16 +285,19 @@ exports[`StackNavigator renders successfully 1`] = ` + +`; + +exports[`StackNavigator renders successfully 1`] = ` + @@ -573,5 +397,165 @@ exports[`StackNavigator renders successfully 1`] = ` + + + + + + + + + + + + + + + + + + `; diff --git a/packages/stack/src/vendor/types.tsx b/packages/stack/src/vendor/types.tsx index 6b69722f..0d187d27 100644 --- a/packages/stack/src/vendor/types.tsx +++ b/packages/stack/src/vendor/types.tsx @@ -131,7 +131,7 @@ export type StackHeaderOptions = { * This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used. * It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`. */ - headerTitleContainerStyle?: StyleProp; + headerTitleContainerStyle?: Animated.WithAnimatedValue>; /** * Tint color for the header. */ @@ -169,7 +169,7 @@ export type StackHeaderOptions = { /** * Style object for the container of the `headerLeft` component, for example to add padding. */ - headerLeftContainerStyle?: StyleProp; + headerLeftContainerStyle?: Animated.WithAnimatedValue>; /** * Function which returns a React Element to display on the right side of the header. */ @@ -177,7 +177,7 @@ export type StackHeaderOptions = { /** * Style object for the container of the `headerRight` component, for example to add padding. */ - headerRightContainerStyle?: StyleProp; + headerRightContainerStyle?: Animated.WithAnimatedValue>; /** * Function which returns a React Element to display custom image in header's back button. * It receives the `tintColor` in in the options object as an argument. object. @@ -199,7 +199,7 @@ export type StackHeaderOptions = { /** * Style object for the header. You can specify a custom background color here, for example. */ - headerStyle?: StyleProp; + headerStyle?: Animated.WithAnimatedValue>; /** * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`. * The header will also float over the screen so that it overlaps the content underneath. @@ -397,7 +397,7 @@ export type StackHeaderLeftButtonProps = { /** * Style object for the label. */ - labelStyle?: React.ComponentProps['style']; + labelStyle?: Animated.WithAnimatedValue>; /** * Whether label font should scale to respect Text Size accessibility settings. */ diff --git a/packages/stack/src/vendor/views/Header/HeaderBackground.tsx b/packages/stack/src/vendor/views/Header/HeaderBackground.tsx index ed589ef0..089f7a18 100644 --- a/packages/stack/src/vendor/views/Header/HeaderBackground.tsx +++ b/packages/stack/src/vendor/views/Header/HeaderBackground.tsx @@ -1,8 +1,16 @@ import * as React from 'react'; -import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; +import { + Animated, + StyleSheet, + Platform, + ViewProps, + StyleProp, + ViewStyle, +} from 'react-native'; import useTheme from '../../../utils/useTheme'; type Props = ViewProps & { + style?: Animated.WithAnimatedValue>; children?: React.ReactNode; }; diff --git a/packages/stack/src/vendor/views/Header/HeaderSegment.tsx b/packages/stack/src/vendor/views/Header/HeaderSegment.tsx index 6019695e..32cf2f00 100644 --- a/packages/stack/src/vendor/views/Header/HeaderSegment.tsx +++ b/packages/stack/src/vendor/views/Header/HeaderSegment.tsx @@ -312,8 +312,8 @@ export default class HeaderSegment extends React.Component { return ( {headerBackground ? ( headerBackground({ style: safeStyles }) diff --git a/packages/stack/src/vendor/views/Stack/Card.tsx b/packages/stack/src/vendor/views/Stack/Card.tsx index 1e1ab31b..2ae6f151 100755 --- a/packages/stack/src/vendor/views/Stack/Card.tsx +++ b/packages/stack/src/vendor/views/Stack/Card.tsx @@ -46,7 +46,9 @@ type Props = ViewProps & { onGestureCanceled?: () => void; onGestureEnd?: () => void; children: React.ReactNode; - overlay: (props: { style: StyleProp }) => React.ReactNode; + overlay: (props: { + style: Animated.WithAnimatedValue>; + }) => React.ReactNode; overlayEnabled: boolean; shadowEnabled: boolean; gestureEnabled: boolean; @@ -83,7 +85,11 @@ export default class Card extends React.Component { shadowEnabled: true, gestureEnabled: true, gestureVelocityImpact: GESTURE_VELOCITY_IMPACT, - overlay: ({ style }: { style: StyleProp }) => + overlay: ({ + style, + }: { + style: Animated.WithAnimatedValue>; + }) => style ? ( ) : null, diff --git a/packages/stack/src/vendor/views/Stack/CardContainer.tsx b/packages/stack/src/vendor/views/Stack/CardContainer.tsx index 1537f7e6..8a4e046a 100644 --- a/packages/stack/src/vendor/views/Stack/CardContainer.tsx +++ b/packages/stack/src/vendor/views/Stack/CardContainer.tsx @@ -54,8 +54,7 @@ type Props = TransitionPreset & { gestureVelocityImpact?: number; mode: StackCardMode; headerMode: StackHeaderMode; - headerShown?: boolean; - headerTransparent?: boolean; + hasAbsoluteHeader: boolean; headerHeight: number; onHeaderHeightChange: (props: { route: Route; @@ -83,9 +82,8 @@ function CardContainer({ getFocusedRoute, mode, headerMode, - headerShown, headerStyleInterpolator, - headerTransparent, + hasAbsoluteHeader, headerHeight, onHeaderHeightChange, index, @@ -188,12 +186,8 @@ function CardContainer({ importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'} pointerEvents={active ? 'box-none' : pointerEvents} pageOverflowEnabled={headerMode === 'screen' && mode === 'card'} - containerStyle={ - headerMode === 'float' && !headerTransparent && headerShown !== false - ? { marginTop: headerHeight } - : null - } - contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any} + containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null} + contentStyle={[{ backgroundColor: colors.background }, cardStyle]} style={StyleSheet.absoluteFill} > diff --git a/packages/stack/src/vendor/views/Stack/CardStack.tsx b/packages/stack/src/vendor/views/Stack/CardStack.tsx index 34ef273e..79004a44 100755 --- a/packages/stack/src/vendor/views/Stack/CardStack.tsx +++ b/packages/stack/src/vendor/views/Stack/CardStack.tsx @@ -84,9 +84,10 @@ const getHeaderHeights = ( ) => { return routes.reduce>((acc, curr) => { const { options = {} } = descriptors[curr.key] || {}; - const { height = previous[curr.key] } = StyleSheet.flatten( - options.headerStyle || {} - ); + const style: any = StyleSheet.flatten(options.headerStyle || {}); + + const height = + typeof style.height === 'number' ? style.height : previous[curr.key]; const safeAreaInsets = { ...insets, @@ -300,7 +301,7 @@ export default class CardStack extends React.Component { props.insets, state.descriptors, layout, - {} + state.headerHeights ), }; }); @@ -335,6 +336,24 @@ export default class CardStack extends React.Component { return state.routes[state.index]; }; + private doesFloatHeaderNeedAbsolutePositioning = () => { + if (this.props.headerMode !== 'float') { + return false; + } + + return this.state.scenes.slice(-2).some((scene) => { + const { descriptor } = scene; + const options = descriptor ? descriptor.options : {}; + const { headerTransparent, headerShown } = options; + + if (headerTransparent || headerShown === false) { + return true; + } + + return false; + }); + }; + render() { const { mode, @@ -363,6 +382,8 @@ export default class CardStack extends React.Component { const focusedDescriptor = descriptors[focusedRoute.key]; const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {}; + const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning(); + let defaultTransitionPreset = mode === 'modal' ? ModalTransition : DefaultTransition; @@ -384,8 +405,36 @@ export default class CardStack extends React.Component { // For modals, usually we want the screen underneath to be visible, so also disable it there const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal'; + let floatingHeader; + + if (headerMode === 'float') { + floatingHeader = ( + + {renderHeader({ + mode: 'float', + layout, + insets: { top, right, bottom, left }, + scenes, + getPreviousRoute, + getFocusedRoute: this.getFocusedRoute, + onContentHeightChange: this.handleHeaderLayout, + gestureDirection: + focusedOptions.gestureDirection !== undefined + ? focusedOptions.gestureDirection + : defaultTransitionPreset.gestureDirection, + styleInterpolator: + focusedOptions.headerStyleInterpolator !== undefined + ? focusedOptions.headerStyleInterpolator + : defaultTransitionPreset.headerStyleInterpolator, + style: isFloatHeaderAbsolute ? styles.floating : undefined, + })} + + ); + } + return ( + {isFloatHeaderAbsolute ? null : floatingHeader} { getFocusedRoute={this.getFocusedRoute} mode={mode} headerMode={headerMode} - headerShown={headerShown} - headerTransparent={headerTransparent} + hasAbsoluteHeader={ + isFloatHeaderAbsolute && + headerShown !== false && + !headerTransparent + } renderHeader={renderHeader} renderScene={renderScene} onOpenRoute={onOpenRoute} @@ -538,26 +590,7 @@ export default class CardStack extends React.Component { ); })} - {headerMode === 'float' - ? renderHeader({ - mode: 'float', - layout, - insets: { top, right, bottom, left }, - scenes, - getPreviousRoute, - getFocusedRoute: this.getFocusedRoute, - onContentHeightChange: this.handleHeaderLayout, - gestureDirection: - focusedOptions.gestureDirection !== undefined - ? focusedOptions.gestureDirection - : defaultTransitionPreset.gestureDirection, - styleInterpolator: - focusedOptions.headerStyleInterpolator !== undefined - ? focusedOptions.headerStyleInterpolator - : defaultTransitionPreset.headerStyleInterpolator, - style: styles.floating, - }) - : null} + {isFloatHeaderAbsolute ? floatingHeader : null} ); } diff --git a/yarn.lock b/yarn.lock index d3ba4339..c4e37b24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3202,10 +3202,10 @@ resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903" integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw== -"@react-navigation/stack@^5.3.6": - version "5.3.6" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.3.6.tgz#7a1bf2f6b77dd92a0aa7befb4f3263215bed58f5" - integrity sha512-6uE9pWMa9tdvDSbMV9o6/1cFrT60c2S3CTKIR5mZWJbyanIGFdu/ScbjIvplnG5kLG24rIpc3rtC0FgqTsBVXQ== +"@react-navigation/stack@^5.4.2": + version "5.4.2" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.4.2.tgz#ca4e77e8ab55b446e44f656068702825ec3b29d3" + integrity sha512-EG8DqHsfg257XeNaO6MIeAnPClekmr8po3PYikezyXon02rJUmHU4px25/PWOvh1hTFiH40W4WYBKzrzMBFaOQ== dependencies: color "^3.1.2" react-native-iphone-x-helper "^1.2.1"