From 7aab6568eb8d1eb025cf5724f238f606db180cb2 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Thu, 7 Nov 2019 08:06:42 +0100 Subject: [PATCH] refactor: use same type for animation context and interpolation props --- packages/stack/src/types.tsx | 1 + .../src/utils/StackCardAnimationContext.tsx | 22 +--------- packages/stack/src/views/Stack/Card.tsx | 42 +++++++++++-------- 3 files changed, 28 insertions(+), 37 deletions(-) diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index 3ff4cf74..91b83869 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/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/packages/stack/src/utils/StackCardAnimationContext.tsx b/packages/stack/src/utils/StackCardAnimationContext.tsx index 2c225263..ac5b1c9f 100644 --- a/packages/stack/src/utils/StackCardAnimationContext.tsx +++ b/packages/stack/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 }; - 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( +export default React.createContext( undefined ); diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx index ce7aac83..5bdad614 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -745,6 +745,7 @@ export default class Card extends React.Component { 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 { index: number, current: Animated.Node, next: Animated.Node | 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 { ); } + 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 { contentStyle, ]} > - + {children}