feat: expose animation related properties in context (#278)

Author: chrfalch

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 = () => (
-  <StackAnimationProgressContext.Consumer>
-    {progress => {
-      const fontSize = Animated.interpolate(progress, {
-        inputRange: [0, 1],
-        outputRange: [8, 32],
-      });
+  <StackCardAnimationContext.Consumer>
+    {value => {
+      const fontSize = value
+        ? Animated.interpolate(value.current.progress, {
+            inputRange: [0, 1],
+            outputRange: [8, 32],
+          })
+        : 32;
 
       return (
         <View
@@ -43,13 +43,15 @@ const AnotherScreen = () => (
             backgroundColor: 'honeydew',
           }}
         >
-          <Animated.Text style={{ fontSize, opacity: progress }}>
+          <Animated.Text
+            style={{ fontSize, opacity: value ? value.current.progress : 1 }}
+          >
             Animates on progress
           </Animated.Text>
         </View>
       );
     }}
-  </StackAnimationProgressContext.Consumer>
+  </StackCardAnimationContext.Consumer>
 );
 
 const YetAnotherScreen = () => (
@@ -61,36 +63,40 @@ const YetAnotherScreen = () => (
       backgroundColor: 'papayawhip',
     }}
   >
-    <StackAnimationIsSwipingContext.Consumer>
-      {isSwiping => (
+    <StackCardAnimationContext.Consumer>
+      {value => (
         <Animated.Text
           style={{
             fontSize: 24,
-            opacity: Animated.interpolate(isSwiping, {
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            }),
+            opacity: value
+              ? Animated.interpolate(value.swiping, {
+                  inputRange: [0, 1],
+                  outputRange: [1, 0],
+                })
+              : 1,
           }}
         >
           Disappears when swiping
         </Animated.Text>
       )}
-    </StackAnimationIsSwipingContext.Consumer>
-    <StackAnimationIsClosingContext.Consumer>
-      {isClosing => (
+    </StackCardAnimationContext.Consumer>
+    <StackCardAnimationContext.Consumer>
+      {value => (
         <Animated.Text
           style={{
             fontSize: 24,
-            opacity: Animated.interpolate(isClosing, {
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            }),
+            opacity: value
+              ? Animated.interpolate(value.closing, {
+                  inputRange: [0, 1],
+                  outputRange: [1, 0],
+                })
+              : 1,
           }}
         >
           Disappears only when closing
         </Animated.Text>
       )}
-    </StackAnimationIsClosingContext.Consumer>
+    </StackCardAnimationContext.Consumer>
   </View>
 );
 

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

src/utils/StackAnimationIsClosingContext.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<number> };
+  next?: { progress: Animated.Node<number> };
+  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<StackCardAnimationContextType | undefined>(
+  undefined
+);

src/utils/StackAnimationIsSwipingContext.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<Props> {
     this.props.insets.left
   );
 
+  // Keep track of the animation context when deps changes.
+  private getCardAnimationContext = memoize(
+    (
+      index: number,
+      current: Animated.Node<number>,
+      next: Animated.Node<number> | 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<Props> {
                     contentStyle,
                   ]}
                 >
-                  <StackAnimationProgressContext.Provider value={current}>
-                    <StackAnimationIsSwipingContext.Provider
-                      value={this.isSwiping}
-                    >
-                      <StackAnimationIsClosingContext.Provider
-                        value={this.isClosing}
-                      >
-                        {children}
-                      </StackAnimationIsClosingContext.Provider>
-                    </StackAnimationIsSwipingContext.Provider>
-                  </StackAnimationProgressContext.Provider>
+                  <StackCardAnimationContext.Provider
+                    value={this.getCardAnimationContext(
+                      index,
+                      current,
+                      next,
+                      this.isClosing,
+                      this.isSwiping,
+                      this.props.layout,
+                      this.props.insets
+                    )}
+                  >
+                    {children}
+                  </StackCardAnimationContext.Provider>
                 </PointerEventsView>
               </Animated.View>
             </PanGestureHandler>