@react-navigation/stack 6.3.16 → 7.0.0-alpha.1

package/src/views/Screens.tsx

@@ -29,7 +29,7 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: 0 | 1 | Animated.AnimatedInterpolation;
+  active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
   children: React.ReactNode;
   freezeOnBlur?: boolean;
 }) => {

package/src/views/Stack/Card.tsx

@@ -20,23 +20,23 @@ import type {
   StackCardStyleInterpolator,
   TransitionSpec,
 } from '../../types';
-import CardAnimationContext from '../../utils/CardAnimationContext';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
-import memoize from '../../utils/memoize';
+import { CardAnimationContext } from '../../utils/CardAnimationContext';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
+import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
+import { memoize } from '../../utils/memoize';
 import {
   GestureState,
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import ModalStatusBarManager from '../ModalStatusBarManager';
-import CardSheet, { CardSheetRef } from './CardSheet';
+import { ModalStatusBarManager } from '../ModalStatusBarManager';
+import { CardSheet, CardSheetRef } from './CardSheet';
 
 type Props = ViewProps & {
   interpolationIndex: number;
   closing: boolean;
-  next?: Animated.AnimatedInterpolation;
-  current: Animated.AnimatedInterpolation;
+  next?: Animated.AnimatedInterpolation<number>;
+  current: Animated.AnimatedInterpolation<number>;
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
@@ -89,7 +89,7 @@ const hasOpacityStyle = (style: any) => {
   return false;
 };
 
-export default class Card extends React.Component<Props> {
+export class Card extends React.Component<Props> {
   static defaultProps = {
     shadowEnabled: false,
     gestureEnabled: true,
@@ -351,8 +351,8 @@ export default class Card extends React.Component<Props> {
   private getCardAnimation = memoize(
     (
       interpolationIndex: number,
-      current: Animated.AnimatedInterpolation,
-      next: Animated.AnimatedInterpolation | undefined,
+      current: Animated.AnimatedInterpolation<number>,
+      next: Animated.AnimatedInterpolation<number> | undefined,
       layout: Layout,
       insetTop: number,
       insetRight: number,

package/src/views/Stack/CardContainer.tsx

@@ -9,10 +9,10 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import type { Layout, Scene } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
-import useKeyboardManager from '../../utils/useKeyboardManager';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { useKeyboardManager } from '../../utils/useKeyboardManager';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import Card from './Card';
+import { Card } from './Card';
 
 type Props = {
   interpolationIndex: number;
@@ -56,7 +56,7 @@ type Props = {
 
 const EPSILON = 0.1;
 
-function CardContainer({
+function CardContainerInner({
   interpolationIndex,
   index,
   active,
@@ -307,7 +307,7 @@ function CardContainer({
   );
 }
 
-export default React.memo(CardContainer);
+export const CardContainer = React.memo(CardContainerInner);
 
 const styles = StyleSheet.create({
   container: {

package/src/views/Stack/CardSheet.tsx

@@ -15,40 +15,39 @@ export type CardSheetRef = {
 // if the container fills the body by comparing the size
 // This lets the document.body handle scrolling of the content
 // It's necessary for mobile browsers to be able to hide address bar on scroll
-export default React.forwardRef<CardSheetRef, Props>(function CardSheet(
-  { enabled, layout, style, ...rest },
-  ref
-) {
-  const [fill, setFill] = React.useState(false);
-  // To avoid triggering a rerender in Card during animation we had to move
-  // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
-  const [pointerEvents, setPointerEvents] =
-    React.useState<ViewProps['pointerEvents']>('auto');
-
-  React.useImperativeHandle(ref, () => {
-    return { setPointerEvents };
-  });
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined' || !document.body) {
-      // Only run when DOM is available
-      return;
-    }
-
-    const width = document.body.clientWidth;
-    const height = document.body.clientHeight;
-
-    setFill(width === layout.width && height === layout.height);
-  }, [layout.height, layout.width]);
-
-  return (
-    <View
-      {...rest}
-      pointerEvents={pointerEvents}
-      style={[enabled && fill ? styles.page : styles.card, style]}
-    />
-  );
-});
+export const CardSheet = React.forwardRef<CardSheetRef, Props>(
+  function CardSheet({ enabled, layout, style, ...rest }, ref) {
+    const [fill, setFill] = React.useState(false);
+    // To avoid triggering a rerender in Card during animation we had to move
+    // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
+    const [pointerEvents, setPointerEvents] =
+      React.useState<ViewProps['pointerEvents']>('auto');
+
+    React.useImperativeHandle(ref, () => {
+      return { setPointerEvents };
+    });
+
+    React.useEffect(() => {
+      if (typeof document === 'undefined' || !document.body) {
+        // Only run when DOM is available
+        return;
+      }
+
+      const width = document.body.clientWidth;
+      const height = document.body.clientHeight;
+
+      setFill(width === layout.width && height === layout.height);
+    }, [layout.height, layout.width]);
+
+    return (
+      <View
+        {...rest}
+        pointerEvents={pointerEvents}
+        style={[enabled && fill ? styles.page : styles.card, style]}
+      />
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   page: {

package/src/views/Stack/CardStack.tsx

@@ -35,12 +35,12 @@ import type {
   StackHeaderMode,
   StackNavigationOptions,
 } from '../../types';
-import findLastIndex from '../../utils/findLastIndex';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
+import { findLastIndex } from '../../utils/findLastIndex';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
 import { getIsModalPresentation } from './Card';
-import CardContainer from './CardContainer';
+import { CardContainer } from './CardContainer';
 
 type GestureValues = {
   [key: string]: Animated.Value;
@@ -51,6 +51,7 @@ type Props = {
   state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
   routes: Route<string>[];
+  // eslint-disable-next-line react/no-unused-prop-types
   openingRouteKeys: string[];
   closingRouteKeys: string[];
   onOpenRoute: (props: { route: Route<string> }) => void;
@@ -201,7 +202,7 @@ const getProgressFromGesture = (
   });
 };
 
-export default class CardStack extends React.Component<Props, State> {
+export class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
     state: State
@@ -583,7 +584,11 @@ export default class CardStack extends React.Component<Props, State> {
             // For those that should be active, but are not the top screen, the value is 1
             // For those on top of the stack and with interaction enabled, the value is 2
             // For the old implementation, it stays the same it was
-            let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1;
+            let isScreenActive:
+              | Animated.AnimatedInterpolation<0 | 1 | 2>
+              | 0
+              | 1
+              | 2 = 1;
 
             if (index < self.length - activeScreensLimit - 1) {
               // screen should be inactive because it is too deep in the stack

package/src/views/Stack/StackView.tsx

@@ -3,6 +3,7 @@ import {
   SafeAreaProviderCompat,
 } from '@react-navigation/elements';
 import {
+  CommonActions,
   ParamListBase,
   Route,
   StackActions,
@@ -20,12 +21,13 @@ import type {
   StackNavigationConfig,
   StackNavigationHelpers,
 } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
-import HeaderContainer, {
+import {
+  HeaderContainer,
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import CardStack from './CardStack';
+import { CardStack } from './CardStack';
 
 type Props = StackNavigationConfig & {
   state: StackNavigationState<ParamListBase>;
@@ -60,7 +62,7 @@ const GestureHandlerWrapper = GestureHandlerRootView ?? View;
 const isArrayEqual = (a: any[], b: any[]) =>
   a.length === b.length && a.every((it, index) => it === b[index]);
 
-export default class StackView extends React.Component<Props, State> {
+export class StackView extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Readonly<Props>,
     state: Readonly<State>
@@ -328,7 +330,18 @@ export default class StackView extends React.Component<Props, State> {
     ) {
       // If route isn't present in current state, but was closing, assume that a close animation was cancelled
       // So we need to add this route back to the state
-      navigation.navigate(route);
+      navigation.dispatch((state) => {
+        const routes = [
+          ...state.routes.filter((r) => r.key !== route.key),
+          route,
+        ];
+
+        return CommonActions.reset({
+          ...state,
+          routes,
+          index: routes.length - 1,
+        });
+      });
     } else {
       this.setState((state) => ({
         routes: state.replacingRouteKeys.length