refactor: use same type for animation context and interpolation props

react-navigation · Nov 7, 2019 · e24065a · e24065a
1 parent e33892a
commit e24065a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 37 deletions.
diff --git a/src/types.tsx b/src/types.tsx
@@ -227,6 +227,7 @@ export type CardInterpolationProps = {
   };
   index: number;
   closing: Animated.Node<0 | 1>;
+  swiping: Animated.Node<0 | 1>;
   layouts: {
     screen: Layout;
   };

diff --git a/src/utils/StackCardAnimationContext.tsx b/src/utils/StackCardAnimationContext.tsx
@@ -1,24 +1,6 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
-import { Layout } from '../types';
+import { CardInterpolationProps } 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>(
+export default React.createContext<CardInterpolationProps | undefined>(
   undefined
 );
diff --git a/src/views/Stack/Card.tsx b/src/views/Stack/Card.tsx
@@ -745,6 +745,7 @@ export default class Card extends React.Component<Props> {
         current: { progress: current },
         next: next && { progress: next },
         closing: this.isClosing,
+        swiping: this.isSwiping,
         layouts: {
           screen: layout,
         },
@@ -779,20 +780,26 @@ export default class Card extends React.Component<Props> {
       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
+      insetTop: number,
+      insetRight: number,
+      insetBottom: number,
+      insetLeft: number
     ) => ({
       index,
       current: { progress: current },
       next: next && { progress: next },
-      closing: isClosing,
-      swiping: isSwiping,
+      closing: this.isClosing,
+      swiping: this.isSwiping,
       layouts: {
         screen: layout,
       },
-      insets,
+      insets: {
+        top: insetTop,
+        right: insetRight,
+        bottom: insetBottom,
+        left: insetLeft,
+      },
     })
   );
 
@@ -878,6 +885,17 @@ export default class Card extends React.Component<Props> {
       );
     }
 
+    const animationContext = this.getCardAnimationContext(
+      index,
+      current,
+      next,
+      layout,
+      insets.top,
+      insets.right,
+      insets.bottom,
+      insets.left
+    );
+
     const {
       containerStyle,
       cardStyle,
@@ -947,17 +965,7 @@ export default class Card extends React.Component<Props> {
                     contentStyle,
                   ]}
                 >
-                  <StackCardAnimationContext.Provider
-                    value={this.getCardAnimationContext(
-                      index,
-                      current,
-                      next,
-                      this.isClosing,
-                      this.isSwiping,
-                      this.props.layout,
-                      this.props.insets
-                    )}
-                  >
+                  <StackCardAnimationContext.Provider value={animationContext}>
                     {children}
                   </StackCardAnimationContext.Provider>
                 </PointerEventsView>