diff --git a/packages/stack/example/App.tsx b/packages/stack/example/App.tsx
index 2207347b..eb28b930 100644
--- a/packages/stack/example/App.tsx
+++ b/packages/stack/example/App.tsx
@@ -29,6 +29,7 @@ import {
HeaderBackgroundFade,
} from './src/HeaderBackgrounds';
import DragLimitedToModal from './src/DragLimitedToModal';
+import StackAnimationConsumerStack from './src/StackAnimationConsumerStack';
// Comment the following two lines to stop using react-native-screens
// eslint-disable-next-line import/no-unresolved
@@ -109,6 +110,11 @@ const data: Item[] = [
title: 'Drag limited to modal',
routeName: 'DragLimitedToModal',
},
+ {
+ component: StackAnimationConsumerStack,
+ title: 'Stack animation consumer stack',
+ routeName: 'StackAnimationConsumerStack',
+ },
];
// Cache images
diff --git a/packages/stack/example/src/StackAnimationConsumerStack.tsx b/packages/stack/example/src/StackAnimationConsumerStack.tsx
new file mode 100644
index 00000000..19d975ae
--- /dev/null
+++ b/packages/stack/example/src/StackAnimationConsumerStack.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Button, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import {
+ createStackNavigator,
+ NavigationStackScreenProps,
+ StackAnimationProgressContext,
+ StackAnimationIsSwipingContext,
+ StackAnimationIsClosingContext,
+} from 'react-navigation-stack';
+
+const ListScreen = (props: NavigationStackScreenProps) => (
+
+
+);
+
+const AnotherScreen = () => (
+
+ {progress => {
+ const fontSize = Animated.interpolate(progress, {
+ inputRange: [0, 1],
+ outputRange: [8, 32],
+ });
+
+ return (
+
+
+ Animates on progress
+
+
+ );
+ }}
+
+);
+
+const YetAnotherScreen = () => (
+
+
+ {isSwiping => (
+
+ Disappears when swiping
+
+ )}
+
+
+ {isClosing => (
+
+ Disappears only when closing
+
+ )}
+
+
+);
+
+export default createStackNavigator(
+ {
+ List: ListScreen,
+ Another: AnotherScreen,
+ YetAnother: YetAnotherScreen,
+ },
+ { initialRouteName: 'List' }
+);
diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx
index 5ac7a3bd..4c4e2d95 100644
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -35,8 +35,16 @@ export {
/**
* Utilities
*/
-
export { default as StackGestureContext } from './utils/StackGestureContext';
+export {
+ default as StackAnimationProgressContext,
+} from './utils/StackAnimationProgressContext';
+export {
+ default as StackAnimationIsSwipingContext,
+} from './utils/StackAnimationIsSwipingContext';
+export {
+ default as StackAnimationIsClosingContext,
+} from './utils/StackAnimationIsClosingContext';
/**
* Types
diff --git a/packages/stack/src/utils/StackAnimationIsClosingContext.tsx b/packages/stack/src/utils/StackAnimationIsClosingContext.tsx
new file mode 100644
index 00000000..2465afd7
--- /dev/null
+++ b/packages/stack/src/utils/StackAnimationIsClosingContext.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import Animated from 'react-native-reanimated';
+
+export default React.createContext>(new Animated.Value(0));
diff --git a/packages/stack/src/utils/StackAnimationIsSwipingContext.tsx b/packages/stack/src/utils/StackAnimationIsSwipingContext.tsx
new file mode 100644
index 00000000..2465afd7
--- /dev/null
+++ b/packages/stack/src/utils/StackAnimationIsSwipingContext.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import Animated from 'react-native-reanimated';
+
+export default React.createContext>(new Animated.Value(0));
diff --git a/packages/stack/src/utils/StackAnimationProgressContext.tsx b/packages/stack/src/utils/StackAnimationProgressContext.tsx
new file mode 100644
index 00000000..94186f14
--- /dev/null
+++ b/packages/stack/src/utils/StackAnimationProgressContext.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Animated from 'react-native-reanimated';
+
+export default React.createContext>(
+ new Animated.Value(0)
+);
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
index 8c86b0c1..3013c211 100755
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -25,6 +25,9 @@ import {
import memoize from '../../utils/memoize';
import StackGestureContext from '../../utils/StackGestureContext';
import PointerEventsView from './PointerEventsView';
+import StackAnimationProgressContext from '../../utils/StackAnimationProgressContext';
+import StackAnimationIsSwipingContext from '../../utils/StackAnimationIsSwipingContext';
+import StackAnimationIsClosingContext from '../../utils/StackAnimationIsClosingContext';
type Props = ViewProps & {
index: number;
@@ -910,7 +913,17 @@ export default class Card extends React.Component {
contentStyle,
]}
>
- {children}
+
+
+
+ {children}
+
+
+