diff --git a/packages/stack/example/src/StackAnimationConsumerStack.tsx b/packages/stack/example/src/StackAnimationConsumerStack.tsx
index 19d975ae..6aba3ce5 100644
--- a/packages/stack/example/src/StackAnimationConsumerStack.tsx
+++ b/packages/stack/example/src/StackAnimationConsumerStack.tsx
@@ -4,9 +4,7 @@ import Animated from 'react-native-reanimated';
import {
createStackNavigator,
NavigationStackScreenProps,
- StackAnimationProgressContext,
- StackAnimationIsSwipingContext,
- StackAnimationIsClosingContext,
+ StackCardAnimationContext,
} from 'react-navigation-stack';
const ListScreen = (props: NavigationStackScreenProps) => (
@@ -27,12 +25,14 @@ const ListScreen = (props: NavigationStackScreenProps) => (
);
const AnotherScreen = () => (
-
- {progress => {
- const fontSize = Animated.interpolate(progress, {
- inputRange: [0, 1],
- outputRange: [8, 32],
- });
+
+ {value => {
+ const fontSize = value
+ ? Animated.interpolate(value.current.progress, {
+ inputRange: [0, 1],
+ outputRange: [8, 32],
+ })
+ : 32;
return (
(
backgroundColor: 'honeydew',
}}
>
-
+
Animates on progress
);
}}
-
+
);
const YetAnotherScreen = () => (
@@ -61,36 +63,40 @@ const YetAnotherScreen = () => (
backgroundColor: 'papayawhip',
}}
>
-
- {isSwiping => (
+
+ {value => (
Disappears when swiping
)}
-
-
- {isClosing => (
+
+
+ {value => (
Disappears only when closing
)}
-
+
);
diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx
index 4c4e2d95..d1581666 100644
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -37,14 +37,8 @@ export {
*/
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';
+ default as StackCardAnimationContext,
+} from './utils/StackCardAnimationContext';
/**
* Types
diff --git a/packages/stack/src/utils/StackAnimationIsClosingContext.tsx b/packages/stack/src/utils/StackAnimationIsClosingContext.tsx
deleted file mode 100644
index 2465afd7..00000000
--- a/packages/stack/src/utils/StackAnimationIsClosingContext.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 2465afd7..00000000
--- a/packages/stack/src/utils/StackAnimationIsSwipingContext.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 94186f14..00000000
--- a/packages/stack/src/utils/StackAnimationProgressContext.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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/StackCardAnimationContext.tsx b/packages/stack/src/utils/StackCardAnimationContext.tsx
new file mode 100644
index 00000000..2c225263
--- /dev/null
+++ b/packages/stack/src/utils/StackCardAnimationContext.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Animated from 'react-native-reanimated';
+import { Layout } from '../types';
+
+type StackCardAnimationContextType = {
+ current: { progress: Animated.Node };
+ next?: { progress: Animated.Node };
+ index: number;
+ closing: Animated.Node<0 | 1>;
+ swiping: Animated.Node<0 | 1>;
+ layouts: {
+ screen: Layout;
+ };
+ insets: {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ };
+};
+
+export default React.createContext(
+ undefined
+);
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
index b9ac54e8..ce7aac83 100755
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -25,9 +25,7 @@ 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';
+import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
type Props = ViewProps & {
index: number;
@@ -775,6 +773,29 @@ export default class Card extends React.Component {
this.props.insets.left
);
+ // Keep track of the animation context when deps changes.
+ private getCardAnimationContext = memoize(
+ (
+ index: number,
+ current: Animated.Node,
+ next: Animated.Node | undefined,
+ isSwiping: Animated.Node<0 | 1>,
+ isClosing: Animated.Node<0 | 1>,
+ layout: Layout,
+ insets: EdgeInsets
+ ) => ({
+ index,
+ current: { progress: current },
+ next: next && { progress: next },
+ closing: isClosing,
+ swiping: isSwiping,
+ layouts: {
+ screen: layout,
+ },
+ insets,
+ })
+ );
+
private gestureActivationCriteria() {
const { layout, gestureDirection, gestureResponseDistance } = this.props;
@@ -926,17 +947,19 @@ export default class Card extends React.Component {
contentStyle,
]}
>
-
-
-
- {children}
-
-
-
+
+ {children}
+