fix: fix passing insets to interpolator

react-navigation · Oct 3, 2019 · 6f5f4b7 · 6f5f4b7
1 parent d75915d
commit 6f5f4b7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
@@ -14,16 +14,17 @@ import {
   PanGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
+import { EdgeInsets } from 'react-native-safe-area-context';
+import PointerEventsView from './PointerEventsView';
+import memoize from '../../utils/memoize';
+import StackGestureContext from '../../utils/StackGestureContext';
 import {
   TransitionSpec,
   StackCardStyleInterpolator,
   Layout,
   SpringConfig,
   TimingConfig,
 } from '../../types';
-import memoize from '../../utils/memoize';
-import StackGestureContext from '../../utils/StackGestureContext';
-import PointerEventsView from './PointerEventsView';
 
 type Props = ViewProps & {
   index: number;
@@ -33,6 +34,7 @@ type Props = ViewProps & {
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: Layout;
+  insets: EdgeInsets;
   gestureDirection: 'horizontal' | 'vertical';
   onOpen: (isFinished: boolean) => void;
   onClose: (isFinished: boolean) => void;
@@ -368,7 +370,8 @@ export default class Card extends React.Component<Props> {
       this.props.index,
       this.props.current,
       this.props.next,
-      this.props.layout
+      this.props.layout,
+      this.props.insets
     );
   };
 
@@ -661,7 +664,8 @@ export default class Card extends React.Component<Props> {
       index: number,
       current: Animated.Node<number>,
       next: Animated.Node<number> | undefined,
-      layout: Layout
+      layout: Layout,
+      insets: EdgeInsets
     ) =>
       styleInterpolator({
         index,
@@ -671,12 +675,7 @@ export default class Card extends React.Component<Props> {
         layouts: {
           screen: layout,
         },
-        insets: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-        },
+        insets,
       })
   );
 
@@ -689,7 +688,8 @@ export default class Card extends React.Component<Props> {
     this.props.index,
     this.props.current,
     this.props.next,
-    this.props.layout
+    this.props.layout,
+    this.props.insets
   );
 
   private gestureActivationCriteria() {
@@ -739,6 +739,7 @@ export default class Card extends React.Component<Props> {
       current,
       next,
       layout,
+      insets,
       overlayEnabled,
       shadowEnabled,
       gestureEnabled,
@@ -755,7 +756,8 @@ export default class Card extends React.Component<Props> {
         index,
         current,
         next,
-        layout
+        layout,
+        insets
       );
     }
 

diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
@@ -292,6 +292,7 @@ export default class Stack extends React.Component<Props, State> {
   render() {
     const {
       mode,
+      insets,
       descriptors,
       state,
       navigation,
@@ -382,6 +383,7 @@ export default class Stack extends React.Component<Props, State> {
                   focused={focused}
                   closing={closingRoutes.includes(route.key)}
                   layout={layout}
+                  insets={insets}
                   current={current}
                   scene={scene}
                   previousScene={scenes[index - 1]}

diff --git a/packages/stack/src/views/Stack/StackItem.tsx b/packages/stack/src/views/Stack/StackItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -19,6 +20,7 @@ type Props = TransitionPreset & {
   focused: boolean;
   closing: boolean;
   layout: Layout;
+  insets: EdgeInsets;
   current: Animated.Value<number>;
   previousScene?: Scene<Route<string>>;
   scene: Scene<Route<string>>;
@@ -93,6 +95,7 @@ export default class StackItem extends React.PureComponent<Props> {
     const {
       index,
       layout,
+      insets,
       active,
       focused,
       closing,
@@ -128,6 +131,7 @@ export default class StackItem extends React.PureComponent<Props> {
         transparent={cardTransparent}
         gestureDirection={gestureDirection}
         layout={layout}
+        insets={insets}
         current={current}
         next={scene.progress.next}
         closing={closing}