diff --git a/packages/stack/example/src/GestureInteraction.tsx b/packages/stack/example/src/GestureInteraction.tsx index 704f942c..01e54ba0 100644 --- a/packages/stack/example/src/GestureInteraction.tsx +++ b/packages/stack/example/src/GestureInteraction.tsx @@ -9,7 +9,7 @@ import { WebView } from 'react-native-webview'; import MapView from 'react-native-maps'; import { createStackNavigator, - StackGestureContext, + GestureHandlerRefContext, NavigationStackScreenComponent, NavigationStackScreenProps, } from 'react-navigation-stack'; @@ -61,19 +61,19 @@ class MapScreen extends React.Component< } return ( - + {ref => ( )} - + ); } } const WebViewScreen = () => ( - + {ref => ( ( /> )} - + ); WebViewScreen.navigationOptions = { diff --git a/packages/stack/example/src/StackAnimationConsumerStack.tsx b/packages/stack/example/src/StackAnimationConsumerStack.tsx index 0f0d85b0..df8e1067 100644 --- a/packages/stack/example/src/StackAnimationConsumerStack.tsx +++ b/packages/stack/example/src/StackAnimationConsumerStack.tsx @@ -3,7 +3,7 @@ import { Animated, Button, View } from 'react-native'; import { createStackNavigator, NavigationStackScreenProps, - StackCardAnimationContext, + CardAnimationContext, } from 'react-navigation-stack'; const ListScreen = (props: NavigationStackScreenProps) => ( @@ -24,7 +24,7 @@ const ListScreen = (props: NavigationStackScreenProps) => ( ); const AnotherScreen = () => ( - + {value => { const scale = value ? value.current.progress.interpolate({ @@ -54,7 +54,7 @@ const AnotherScreen = () => ( ); }} - + ); const YetAnotherScreen = () => ( @@ -66,7 +66,7 @@ const YetAnotherScreen = () => ( backgroundColor: 'papayawhip', }} > - + {value => ( ( Disappears when swiping )} - - + + {value => ( ( Disappears only when closing )} - + ); diff --git a/packages/stack/package.json b/packages/stack/package.json index 144afa0f..d0b2c390 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -21,7 +21,7 @@ "example": "yarn --cwd example", "bootstrap": "yarn example && yarn --ignore-scripts && yarn sync", "sync": "bash scripts/sync-stack.sh", - "patch": "diff -ruN node_modules/@react-navigation/stack/src src/vendor > scripts/stack.patch; printf ''" + "patch": "diff -Naur node_modules/@react-navigation/stack/src src/vendor > scripts/stack.patch; printf ''" }, "publishConfig": { "registry": "https://registry.npmjs.org/" @@ -50,7 +50,7 @@ "@expo/vector-icons": "^10.0.6", "@react-native-community/bob": "^0.7.0", "@react-native-community/masked-view": "^0.1.5", - "@react-navigation/stack": "^5.0.0-alpha.52", + "@react-navigation/stack": "^5.0.0-alpha.53", "@release-it/conventional-changelog": "^1.1.0", "@types/color": "^3.0.1", "@types/jest": "^24.0.25", diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index a4861289..a1e2ee6a 100644 --- a/packages/stack/scripts/stack.patch +++ b/packages/stack/scripts/stack.patch @@ -1,66 +1,34 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx ---- node_modules/@react-navigation/stack/src/index.tsx 2020-01-05 02:33:14.000000000 +0100 -+++ src/vendor/index.tsx 1970-01-01 01:00:00.000000000 +0100 -@@ -1,57 +0,0 @@ --import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators'; --import * as HeaderStyleInterpolators from './TransitionConfigs/HeaderStyleInterpolators'; --import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; --import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; -- +--- node_modules/@react-navigation/stack/src/index.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/index.tsx 2020-01-05 14:37:29.000000000 +0100 +@@ -3,11 +3,6 @@ + import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; + import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; + -/** - * Navigators - */ -export { default as createStackNavigator } from './navigators/createStackNavigator'; - --export const Assets = [ -- // eslint-disable-next-line import/no-commonjs -- require('./views/assets/back-icon.png'), -- // eslint-disable-next-line import/no-commonjs -- require('./views/assets/back-icon-mask.png'), --]; -- --/** -- * Views -- */ --export { default as StackView } from './views/Stack/StackView'; --export { default as Header } from './views/Header/Header'; --export { default as HeaderTitle } from './views/Header/HeaderTitle'; --export { default as HeaderBackButton } from './views/Header/HeaderBackButton'; -- --/** -- * Transition presets -- */ --export { -- CardStyleInterpolators, -- HeaderStyleInterpolators, -- TransitionSpecs, -- TransitionPresets, --}; -- --/** -- * Utilities -- */ --export { default as StackGestureContext } from './utils/StackGestureContext'; --export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext'; -- --/** -- * Types -- */ --export { + export const Assets = [ + // eslint-disable-next-line import/no-commonjs + require('./views/assets/back-icon.png'), +@@ -48,9 +43,10 @@ + * Types + */ + export { - StackNavigationOptions, - StackNavigationProp, - StackHeaderProps, -- StackHeaderLeftButtonProps, -- StackHeaderTitleProps, -- StackCardInterpolatedStyle, -- StackCardInterpolationProps, -- StackCardStyleInterpolator, -- StackHeaderInterpolatedStyle, -- StackHeaderInterpolationProps, -- StackHeaderStyleInterpolator, --} from './types'; ++ NavigationStackState, ++ StackNavigationProp as NavigationStackProp, ++ StackNavigationOptions as NavigationStackOptions, ++ StackNavigationConfig as NavigationStackConfig, + StackHeaderLeftButtonProps, + StackHeaderTitleProps, + StackCardInterpolatedStyle, diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx ---- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-05 02:33:14.000000000 +0100 +--- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-05 14:32:09.000000000 +0100 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,77 +0,0 @@ -import * as React from 'react'; @@ -141,8 +109,8 @@ diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigat - typeof StackNavigator ->(StackNavigator); diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx ---- node_modules/@react-navigation/stack/src/types.tsx 2020-01-05 02:33:14.000000000 +0100 -+++ src/vendor/types.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/types.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/types.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -8,13 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -287,8 +255,8 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts export type StackNavigationConfig = { diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/Header.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/Header.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/routers'; @@ -329,8 +297,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/v } styleInterpolator={styleInterpolator} diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -343,8 +311,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton type Props = StackHeaderLeftButtonProps; diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -354,8 +322,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackground export default function HeaderBackground({ style, ...rest }: ViewProps) { const { colors } = useTheme(); diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -1,16 +1,13 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -388,8 +356,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderContainer. }; diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -409,8 +377,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.ts }; diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, TextProps } from 'react-native'; @@ -420,21 +388,21 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx type Props = TextProps & { tintColor?: string; diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Stack/Card.tsx 2020-01-05 12:57:08.000000000 +0100 -@@ -453,7 +453,7 @@ - pointerEvents="none" - /> - ) : null} -- -+ - +--- node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Stack/Card.tsx 2020-01-05 14:43:46.000000000 +0100 +@@ -452,7 +452,7 @@ + pointerEvents="none" + /> + ) : null} +- ++ + + {children} - diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-01-05 12:57:08.000000000 +0100 -@@ -1,10 +1,16 @@ +--- node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-01-05 14:40:18.000000000 +0100 +@@ -1,11 +1,17 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import { StackNavigationState } from '@react-navigation/routers'; @@ -442,6 +410,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx +import { NavigationState as StackNavigationState } from 'react-navigation'; import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; import Card from './Card'; + import FloatingHeaderHeightContext from '../../utils/FloatingHeaderHeightContext'; -import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types'; +import useTheme from '../../../utils/useTheme'; +import { @@ -454,7 +423,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx type Props = TransitionPreset & { index: number; -@@ -152,7 +158,7 @@ +@@ -153,7 +159,7 @@ ? { marginTop: floatingHeaderHeight } : null } @@ -464,8 +433,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx > diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Stack/CardStack.tsx 2020-01-05 12:59:50.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Stack/CardStack.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -11,8 +11,7 @@ import { EdgeInsets } from 'react-native-safe-area-context'; // eslint-disable-next-line import/no-unresolved @@ -485,8 +454,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src StackHeaderMode, StackCardMode, diff -ruN 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-01-05 02:33:14.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx 2020-01-05 12:57:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-01-05 14:32:09.000000000 +0100 ++++ src/vendor/views/Stack/StackView.tsx 2020-01-05 14:33:03.000000000 +0100 @@ -1,8 +1,11 @@ import * as React from 'react'; import { Platform } from 'react-native'; diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx index ed7fe87c..2e38dd62 100644 --- a/packages/stack/src/index.tsx +++ b/packages/stack/src/index.tsx @@ -1,60 +1,13 @@ -import * as CardStyleInterpolators from './vendor/TransitionConfigs/CardStyleInterpolators'; -import * as HeaderStyleInterpolators from './vendor/TransitionConfigs/HeaderStyleInterpolators'; -import * as TransitionSpecs from './vendor/TransitionConfigs/TransitionSpecs'; -import * as TransitionPresets from './vendor/TransitionConfigs/TransitionPresets'; +export * from './vendor/index'; /** * Navigators */ export { default as createStackNavigator } from './navigators/createStackNavigator'; -export const Assets = [ - // eslint-disable-next-line import/no-commonjs - require('./vendor/views/assets/back-icon.png'), - // eslint-disable-next-line import/no-commonjs - require('./vendor/views/assets/back-icon-mask.png'), -]; - -/** - * Views - */ -export { default as StackView } from './views/StackView'; -export { default as Header } from './vendor/views/Header/Header'; -export { default as HeaderTitle } from './vendor/views/Header/HeaderTitle'; -export { default as HeaderBackButton } from './vendor/views/Header/HeaderBackButton'; - -/** - * Transition presets - */ -export { - CardStyleInterpolators, - HeaderStyleInterpolators, - TransitionSpecs, - TransitionPresets, -}; - -/** - * Utilities - */ -export { default as StackGestureContext } from './vendor/utils/StackGestureContext'; -export { default as StackCardAnimationContext } from './vendor/utils/StackCardAnimationContext'; - /** * Types */ -export { - NavigationStackState, - StackNavigationProp as NavigationStackProp, - StackNavigationOptions as NavigationStackOptions, - StackNavigationConfig as NavigationStackConfig, - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderTitleProps, - TransitionPreset, - StackCardStyleInterpolator, - StackHeaderStyleInterpolator, -} from './vendor/types'; - export { NavigationStackScreenComponent, NavigationStackScreenProps, diff --git a/packages/stack/yarn.lock b/packages/stack/yarn.lock index e964667b..df3ce46d 100644 --- a/packages/stack/yarn.lock +++ b/packages/stack/yarn.lock @@ -1396,10 +1396,10 @@ "@react-navigation/core" "^5.0.0-alpha.30" shortid "^2.2.15" -"@react-navigation/stack@^5.0.0-alpha.52": - version "5.0.0-alpha.52" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0-alpha.52.tgz#fb7b8124e654e6d6216360a22344dfc2f1a7e27f" - integrity sha512-9FT62qy89SFtXVa+HRtMJliUjRv+EuMc1UArk3asZRoorY6Tn/krQ3EbQgaGgPDHlfd/GMVqn+sBfiipR465/Q== +"@react-navigation/stack@^5.0.0-alpha.53": + version "5.0.0-alpha.53" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0-alpha.53.tgz#42de5abcdda44e16ee1265a7458ed54d6a3f1b18" + integrity sha512-Q1LnFta7/lbVnjib/1b11fGk4FuLe7sFf0LzHvNGnlSDceodloZMO8sh40GmWpwtq5bPuCHsVNZSnw1Y3u2jHA== dependencies: "@react-navigation/routers" "^5.0.0-alpha.20" color "^3.1.2"