@react-navigation/stack 7.0.0-alpha.0 → 7.0.0-alpha.10

package/lib/typescript/src/views/Stack/StackView.d.ts

@@ -1,10 +1,12 @@
-import { ParamListBase, Route, StackNavigationState } from '@react-navigation/native';
+import { type LocaleDirection, type ParamListBase, type Route, type RouteProp, type StackNavigationState } from '@react-navigation/native';
 import * as React from 'react';
-import type { StackDescriptorMap, StackNavigationConfig, StackNavigationHelpers } from '../../types';
+import type { StackDescriptor, StackDescriptorMap, StackNavigationConfig, StackNavigationHelpers } from '../../types';
 type Props = StackNavigationConfig & {
+    direction: LocaleDirection;
     state: StackNavigationState<ParamListBase>;
     navigation: StackNavigationHelpers;
     descriptors: StackDescriptorMap;
+    describe: (route: RouteProp<ParamListBase>, placeholder: boolean) => StackDescriptor;
 };
 type State = {
     routes: Route<string>[];
@@ -15,90 +17,18 @@ type State = {
     replacingRouteKeys: string[];
     descriptors: StackDescriptorMap;
 };
-export default class StackView extends React.Component<Props, State> {
+export declare class StackView extends React.Component<Props, State> {
     static getDerivedStateFromProps(props: Readonly<Props>, state: Readonly<State>): {
-        routes: Route<string, object | undefined>[];
-        previousRoutes: Route<string, object | undefined>[];
+        routes: Route<string>[];
+        previousRoutes: Route<string>[];
         descriptors: StackDescriptorMap;
         previousDescriptors: StackDescriptorMap;
         openingRouteKeys?: undefined;
         closingRouteKeys?: undefined;
         replacingRouteKeys?: undefined;
     } | {
-        routes: (Readonly<{
-            key: string;
-            name: string;
-            path?: string | undefined;
-        }> & Readonly<{
-            params?: Readonly<object | undefined>;
-        }> & {
-            state?: Readonly<{
-                key: string;
-                index: number;
-                routeNames: string[];
-                history?: unknown[] | undefined;
-                routes: (Readonly<{
-                    key: string;
-                    name: string;
-                    path?: string | undefined;
-                }> & Readonly<{
-                    params?: Readonly<object | undefined>;
-                }> & any)[];
-                type: string;
-                stale: false;
-            }> | import("@react-navigation/native").PartialState<Readonly<{
-                key: string;
-                index: number;
-                routeNames: string[];
-                history?: unknown[] | undefined;
-                routes: (Readonly<{
-                    key: string;
-                    name: string;
-                    path?: string | undefined;
-                }> & Readonly<{
-                    params?: Readonly<object | undefined>;
-                }> & any)[];
-                type: string;
-                stale: false;
-            }>> | undefined;
-        })[];
-        previousRoutes: (Readonly<{
-            key: string;
-            name: string;
-            path?: string | undefined;
-        }> & Readonly<{
-            params?: Readonly<object | undefined>;
-        }> & {
-            state?: Readonly<{
-                key: string;
-                index: number;
-                routeNames: string[];
-                history?: unknown[] | undefined;
-                routes: (Readonly<{
-                    key: string;
-                    name: string;
-                    path?: string | undefined;
-                }> & Readonly<{
-                    params?: Readonly<object | undefined>;
-                }> & any)[];
-                type: string;
-                stale: false;
-            }> | import("@react-navigation/native").PartialState<Readonly<{
-                key: string;
-                index: number;
-                routeNames: string[];
-                history?: unknown[] | undefined;
-                routes: (Readonly<{
-                    key: string;
-                    name: string;
-                    path?: string | undefined;
-                }> & Readonly<{
-                    params?: Readonly<object | undefined>;
-                }> & any)[];
-                type: string;
-                stale: false;
-            }>> | undefined;
-        })[];
+        routes: import("@react-navigation/native").NavigationRoute<ParamListBase, string>[];
+        previousRoutes: import("@react-navigation/native").NavigationRoute<ParamListBase, string>[];
         previousDescriptors: StackDescriptorMap;
         openingRouteKeys: string[];
         closingRouteKeys: string[];
@@ -107,7 +37,6 @@ export default class StackView extends React.Component<Props, State> {
     };
     state: State;
     private getPreviousRoute;
-    private renderScene;
     private renderHeader;
     private handleOpenRoute;
     private handleCloseRoute;
@@ -116,7 +45,7 @@ export default class StackView extends React.Component<Props, State> {
     private handleGestureStart;
     private handleGestureEnd;
     private handleGestureCancel;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=StackView.d.ts.map

package/lib/typescript/src/views/Stack/StackView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,aAAa,EACb,KAAK,EAEL,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AAQrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAEhC,mBAAmB,EAAE,kBAAkB,CAAC;IAExC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAClE,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsNxB,KAAK,EAAE,KAAK,CAQV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAwCrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CAmDP"}
+{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACV,KAAK,SAAS,EAEd,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AASrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CACR,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAC/B,WAAW,EAAE,OAAO,KACjB,eAAe,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAEhC,mBAAmB,EAAE,kBAAkB,CAAC;IAExC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1D,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;IAmNxB,KAAK,EAAE,KAAK,CAQV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAwCrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CAyDP"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,31 +40,30 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.3.9-alpha.0",
+    "@react-navigation/elements": "^2.0.0-alpha.7",
     "color": "^4.2.3"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.0",
-    "@testing-library/react-native": "^11.5.0",
-    "@types/color": "^3.0.3",
-    "@types/react": "~18.0.26",
-    "@types/react-native": "~0.70.8",
-    "del-cli": "^5.0.0",
-    "react": "18.1.0",
-    "react-native": "0.70.5",
-    "react-native-builder-bob": "^0.20.3",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
-    "typescript": "^4.9.4"
+    "@react-navigation/native": "^7.0.0-alpha.9",
+    "@testing-library/react-native": "^12.4.3",
+    "@types/color": "^3.0.6",
+    "@types/react": "~18.2.45",
+    "del-cli": "^5.1.0",
+    "react": "18.2.0",
+    "react-native": "0.73.2",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^6.0.0",
+    "@react-navigation/native": "^7.0.0-alpha.9",
     "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": ">= 1.0.0",
-    "react-native-safe-area-context": ">= 3.0.0",
-    "react-native-screens": ">= 3.0.0"
+    "react-native": "0.73.2",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -80,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "ad722b882e0c40b1d1bc025d70112ddb126f265e"
+  "gitHead": "c7b047dec7c75bda359a618d39a2aac4c2aea9c1"
 }

package/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -4,7 +4,7 @@ import type {
   StackCardInterpolatedStyle,
   StackCardInterpolationProps,
 } from '../types';
-import conditional from '../utils/conditional';
+import { conditional } from '../utils/conditional';
 
 const { add, multiply } = Animated;
 
@@ -156,11 +156,11 @@ export function forModalPresentationIOS({
   const borderRadius = isLandscape
     ? 0
     : isFirst
-    ? progress.interpolate({
-        inputRange: [0, 1, 1.0001, 2],
-        outputRange: [0, 0, hasNotchIos ? 38 : 0, 10],
-      })
-    : 10;
+      ? progress.interpolate({
+          inputRange: [0, 1, 1.0001, 2],
+          outputRange: [0, 0, hasNotchIos ? 38 : 0, 10],
+        })
+      : 10;
 
   return {
     cardStyle: {

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,11 +1,11 @@
-import { Animated, I18nManager } from 'react-native';
+import { Animated } from 'react-native';
 
 import type {
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
 } from '../types';
 
-const { add } = Animated;
+const { add, multiply } = Animated;
 
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
@@ -13,6 +13,7 @@ const { add } = Animated;
 export function forUIKit({
   current,
   next,
+  direction,
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const defaultOffset = 100;
@@ -34,6 +35,8 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
+  const multiplier = direction === 'rtl' ? -1 : 1;
+
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -59,12 +62,13 @@ export function forUIKit({
     leftLabelStyle: {
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-rightOffset, 0, leftLabelOffset]
-              : [leftLabelOffset, 0, -rightOffset],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0, 1, 2],
+              outputRange: [leftLabelOffset, 0, -rightOffset],
+            })
+          ),
         },
       ],
     },
@@ -81,24 +85,26 @@ export function forUIKit({
       }),
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0.5, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-titleLeftOffset, 0, rightOffset]
-              : [rightOffset, 0, -titleLeftOffset],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0.5, 1, 2],
+              outputRange: [rightOffset, 0, -titleLeftOffset],
+            })
+          ),
         },
       ],
     },
     backgroundStyle: {
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-layouts.screen.width, 0, layouts.screen.width]
-              : [layouts.screen.width, 0, -layouts.screen.width],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0, 1, 2],
+              outputRange: [layouts.screen.width, 0, -layouts.screen.width],
+            })
+          ),
         },
       ],
     },
@@ -151,8 +157,10 @@ export function forFade({
 export function forSlideLeft({
   current,
   next,
+  direction,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
+  const isRTL = direction === 'rtl';
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -170,7 +178,7 @@ export function forSlideLeft({
 
   const translateX = progress.interpolate({
     inputRange: [0, 1, 2],
-    outputRange: I18nManager.getConstants().isRTL
+    outputRange: isRTL
       ? [-screen.width, 0, screen.width]
       : [screen.width, 0, -screen.width],
   });
@@ -191,8 +199,10 @@ export function forSlideLeft({
 export function forSlideRight({
   current,
   next,
+  direction,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
+  const isRTL = direction === 'rtl';
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -210,7 +220,7 @@ export function forSlideRight({
 
   const translateX = progress.interpolate({
     inputRange: [0, 1, 2],
-    outputRange: I18nManager.getConstants().isRTL
+    outputRange: isRTL
       ? [screen.width, 0, -screen.width]
       : [-screen.width, 0, screen.width],
   });

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -135,11 +135,11 @@ export const ModalFadeTransition: TransitionPreset = {
 export const DefaultTransition = Platform.select({
   ios: SlideFromRightIOS,
   android:
-    Platform.Version >= ANDROID_VERSION_10
+    Number(Platform.Version) >= ANDROID_VERSION_10
       ? ScaleFromCenterAndroid
-      : Platform.Version >= ANDROID_VERSION_PIE
-      ? RevealFromBottomAndroid
-      : FadeFromBottomAndroid,
+      : Number(Platform.Version) >= ANDROID_VERSION_PIE
+        ? RevealFromBottomAndroid
+        : FadeFromBottomAndroid,
   default: ScaleFromCenterAndroid,
 });
 

package/src/index.tsx

@@ -6,13 +6,13 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 /**
  * Navigators
  */
-export { default as createStackNavigator } from './navigators/createStackNavigator';
+export { createStackNavigator } from './navigators/createStackNavigator';
 
 /**
  * Views
  */
-export { default as Header } from './views/Header/Header';
-export { default as StackView } from './views/Stack/StackView';
+export { Header } from './views/Header/Header';
+export { StackView } from './views/Stack/StackView';
 
 /**
  * Transition presets
@@ -27,10 +27,10 @@ export {
 /**
  * Utilities
  */
-export { default as CardAnimationContext } from './utils/CardAnimationContext';
-export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
-export { default as useCardAnimation } from './utils/useCardAnimation';
-export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { CardAnimationContext } from './utils/CardAnimationContext';
+export { GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
+export { useCardAnimation } from './utils/useCardAnimation';
+export { useGestureHandlerRef } from './utils/useGestureHandlerRef';
 
 /**
  * Types

package/src/navigators/createStackNavigator.tsx

@@ -1,13 +1,14 @@
 import {
   createNavigatorFactory,
-  DefaultNavigatorOptions,
-  EventArg,
-  ParamListBase,
-  StackActionHelpers,
+  type DefaultNavigatorOptions,
+  type EventArg,
+  type ParamListBase,
+  type StackActionHelpers,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
   StackRouter,
-  StackRouterOptions,
+  type StackRouterOptions,
+  useLocale,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -17,7 +18,7 @@ import type {
   StackNavigationEventMap,
   StackNavigationOptions,
 } from '../types';
-import StackView from '../views/Stack/StackView';
+import { StackView } from '../views/Stack/StackView';
 
 type Props = DefaultNavigatorOptions<
   ParamListBase,
@@ -31,12 +32,17 @@ type Props = DefaultNavigatorOptions<
 function StackNavigator({
   id,
   initialRouteName,
+  getStateForRouteNamesChange,
   children,
+  layout,
   screenListeners,
   screenOptions,
+  screenLayout,
   ...rest
 }: Props) {
-  const { state, descriptors, navigation, NavigationContent } =
+  const { direction } = useLocale();
+
+  const { state, describe, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
       StackRouterOptions,
@@ -47,8 +53,11 @@ function StackNavigator({
       id,
       initialRouteName,
       children,
+      layout,
       screenListeners,
       screenOptions,
+      screenLayout,
+      getStateForRouteNamesChange,
     });
 
   React.useEffect(
@@ -81,7 +90,9 @@ function StackNavigator({
     <NavigationContent>
       <StackView
         {...rest}
+        direction={direction}
         state={state}
+        describe={describe}
         descriptors={descriptors}
         navigation={navigation}
       />
@@ -89,7 +100,7 @@ function StackNavigator({
   );
 }
 
-export default createNavigatorFactory<
+export const createStackNavigator = createNavigatorFactory<
   StackNavigationState<ParamListBase>,
   StackNavigationOptions,
   StackNavigationEventMap,

package/src/types.tsx

@@ -1,12 +1,12 @@
 import type {
   HeaderBackButton,
   HeaderBackButtonProps,
-  HeaderButtonProps,
   HeaderOptions,
   HeaderTitleProps,
 } from '@react-navigation/elements';
 import type {
   Descriptor,
+  LocaleDirection,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
@@ -50,7 +50,7 @@ export type StackNavigationHelpers = NavigationHelpers<
 export type StackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -64,7 +64,7 @@ export type StackNavigationProp<
 export type StackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = {
   navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;
@@ -139,11 +139,11 @@ export type StackHeaderOptions = Omit<
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
+  headerLeft?: (props: StackHeaderLeftProps) => React.ReactNode;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: (props: HeaderButtonProps) => React.ReactNode;
+  headerRight?: (props: StackHeaderRightProps) => React.ReactNode;
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */
@@ -196,7 +196,11 @@ export type StackHeaderProps = {
     /**
      * Title of the previous screen.
      */
-    title: string;
+    title: string | undefined;
+    /**
+     * The `href` to use for the anchor tag on web
+     */
+    href: string | undefined;
   };
   /**
    * Animated nodes representing the progress of the animation.
@@ -220,6 +224,32 @@ export type StackHeaderProps = {
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
+export type StackHeaderRightProps = {
+  /**
+   * Tint color for the header button.
+   */
+  tintColor?: string;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  pressColor?: string;
+  /**
+   * Opacity when the button is pressed, used when ripple is not supported.
+   */
+  pressOpacity?: number;
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
+export type StackHeaderLeftProps = HeaderBackButtonProps & {
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
 export type StackDescriptor = Descriptor<
   StackNavigationOptions,
   StackNavigationProp<ParamListBase>,
@@ -341,6 +371,12 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Only supported on iOS and Android.
      */
     freezeOnBlur?: boolean;
+    /**
+     * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
+     *
+     * @platform ios
+     */
+    autoHideHomeIndicator?: boolean;
   };
 
 export type StackNavigationConfig = {
@@ -429,19 +465,19 @@ export type StackCardInterpolatedStyle = {
   /**
    * Interpolated style for the container view wrapping the card.
    */
-  containerStyle?: any;
+  containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the card.
    */
-  cardStyle?: any;
+  cardStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the semi-transparent overlay below the card.
    */
-  overlayStyle?: any;
+  overlayStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style representing the card shadow.
    */
-  shadowStyle?: any;
+  shadowStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export type StackCardStyleInterpolator = (
@@ -468,6 +504,10 @@ export type StackHeaderInterpolationProps = {
      */
     progress: Animated.AnimatedInterpolation<number>;
   };
+  /**
+   * Writing direction of the layout.
+   */
+  direction: LocaleDirection;
   /**
    * Layout measurements for various items we use for animation.
    */

package/src/utils/CardAnimationContext.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 
 import type { StackCardInterpolationProps } from '../types';
 
-export default React.createContext<StackCardInterpolationProps | undefined>(
-  undefined
-);
+export const CardAnimationContext = React.createContext<
+  StackCardInterpolationProps | undefined
+>(undefined);

package/src/utils/GestureHandlerRefContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-export default React.createContext<React.Ref<
+export const GestureHandlerRefContext = React.createContext<React.Ref<
   import('react-native-gesture-handler').PanGestureHandler
 > | null>(null);

package/src/utils/ModalPresentationContext.tsx

@@ -1,5 +1,3 @@
 import * as React from 'react';
 
-const ModalPresentationContext = React.createContext(false);
-
-export default ModalPresentationContext;
+export const ModalPresentationContext = React.createContext(false);

package/src/utils/conditional.tsx

@@ -9,7 +9,7 @@ const { add, multiply } = Animated;
  * @param main Animated Node to use if the condition is `true`
  * @param fallback Animated Node to use if the condition is `false`
  */
-export default function conditional(
+export function conditional(
   condition: Animated.AnimatedInterpolation<0 | 1>,
   main: Animated.AnimatedInterpolation<number>,
   fallback: Animated.AnimatedInterpolation<number>

package/src/utils/debounce.tsx

@@ -1,4 +1,4 @@
-export default function debounce<T extends (...args: any[]) => void>(
+export function debounce<T extends (...args: any[]) => void>(
   func: T,
   duration: number
 ): T {