@amazon-devices/react-navigation__stack 7.0.1758683737 → 8.0.9000000000

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,11 +1,15 @@
-import { Animated, I18nManager } from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import type {
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
 } from '../types';
 
-const { add } = Animated;
+const { add, multiply } = Animated;
+
+// Width of the screen in split layout on portrait mode on iPad Mini
+// Keep in sync with HeaderBackButton.tsx
+const IPAD_MINI_MEDIUM_WIDTH = 414;
 
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
@@ -13,10 +17,15 @@ const { add } = Animated;
 export function forUIKit({
   current,
   next,
+  direction,
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const defaultOffset = 100;
-  const leftSpacing = 27;
+  const leftSpacing =
+    27 +
+    (Platform.OS === 'ios' && layouts.screen.width >= IPAD_MINI_MEDIUM_WIDTH
+      ? 5 // Additional padding on iPad specified in Header.tsx
+      : 0);
 
   // The title and back button title should cross-fade to each other
   // When screen is fully open, the title should be in center, and back title should be on left
@@ -34,6 +43,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 +70,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],
+            })
+          ),
         },
       ],
     },
@@ -76,29 +88,31 @@ export function forUIKit({
     },
     titleStyle: {
       opacity: progress.interpolate({
-        inputRange: [0, 0.4, 1, 1.5],
-        outputRange: [0, 0.1, 1, 0],
+        inputRange: [0, 0.5, 0.75, 1, 1.5],
+        outputRange: [0, 0, 0.1, 1, 0],
       }),
       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 +165,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 +186,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 +207,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 +228,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

@@ -5,7 +5,9 @@ import {
   forBottomSheetAndroid,
   forFadeFromBottomAndroid,
   forFadeFromCenter as forFadeCard,
+  forFadeFromRightAndroid,
   forHorizontalIOS,
+  forHorizontalIOSInverted,
   forModalPresentationIOS,
   forRevealFromBottomAndroid,
   forScaleFromCenterAndroid,
@@ -24,6 +26,7 @@ import {
 
 const ANDROID_VERSION_PIE = 28;
 const ANDROID_VERSION_10 = 29;
+const ANDROID_VERSION_14 = 34;
 
 /**
  * Standard iOS navigation transition.
@@ -103,6 +106,19 @@ export const ScaleFromCenterAndroid: TransitionPreset = {
   headerStyleInterpolator: forFade,
 };
 
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 14.
+ */
+export const FadeFromRightAndroid: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: FadeInFromBottomAndroidSpec,
+    close: FadeOutToBottomAndroidSpec,
+  },
+  cardStyleInterpolator: forFadeFromRightAndroid,
+  headerStyleInterpolator: forFade,
+};
+
 /**
  * Standard bottom sheet slide transition for Android 10.
  */
@@ -133,13 +149,17 @@ export const ModalFadeTransition: TransitionPreset = {
  * Default navigation transition for the current platform.
  */
 export const DefaultTransition = Platform.select({
+  // @ts-ignore - add default value for kepler (leaving for easy override)
+  kepler: ScaleFromCenterAndroid,
   ios: SlideFromRightIOS,
   android:
-    Platform.Version >= ANDROID_VERSION_10
-      ? ScaleFromCenterAndroid
-      : Platform.Version >= ANDROID_VERSION_PIE
-      ? RevealFromBottomAndroid
-      : FadeFromBottomAndroid,
+    Number(Platform.Version) >= ANDROID_VERSION_14
+      ? FadeFromRightAndroid
+      : Number(Platform.Version) >= ANDROID_VERSION_10
+        ? ScaleFromCenterAndroid
+        : Number(Platform.Version) >= ANDROID_VERSION_PIE
+          ? RevealFromBottomAndroid
+          : FadeFromBottomAndroid,
   default: ScaleFromCenterAndroid,
 });
 
@@ -147,6 +167,16 @@ export const DefaultTransition = Platform.select({
  * Default modal transition for the current platform.
  */
 export const ModalTransition = Platform.select({
+  // @ts-ignore - add default value for kepler (leaving for easy override)
+  kepler: BottomSheetAndroid,
   ios: ModalPresentationIOS,
   default: BottomSheetAndroid,
 });
+
+/**
+ * Slide from left transition.
+ */
+export const SlideFromLeftIOS: TransitionPreset = {
+  ...SlideFromRightIOS,
+  cardStyleInterpolator: forHorizontalIOSInverted,
+};

package/src/TransitionConfigs/TransitionSpecs.tsx

@@ -51,7 +51,7 @@ export const RevealFromBottomAndroidSpec: TransitionSpec = {
     duration: 425,
     // This is super rough approximation of the path used for the curve by android
     // See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
-    easing: Easing.bezier(0.35, 0.45, 0, 1),
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
   },
 };
 
@@ -65,7 +65,35 @@ export const ScaleFromCenterAndroidSpec: TransitionSpec = {
     duration: 400,
     // This is super rough approximation of the path used for the curve by android
     // See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
-    easing: Easing.bezier(0.35, 0.45, 0, 1),
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
+  },
+};
+
+/**
+ * Approximate configuration for activity open animation from Android 14.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_open_enter.xml
+ */
+export const FadeInFromRightAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 450,
+    // This is super rough approximation of the path used for the curve by android
+    // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/interpolator/fast_out_extra_slow_in.xml
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
+  },
+};
+
+/**
+ * Approximate configuration for activity close animation from Android 14.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_close_exit.xml
+ */
+export const FadeOutToLeftAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 450,
+    // This is super rough approximation of the path used for the curve by android
+    // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/interpolator/fast_out_extra_slow_in.xml
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
   },
 };
 

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,25 +27,30 @@ 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
  */
 export type {
+  StackAnimationName,
   StackCardInterpolatedStyle,
   StackCardInterpolationProps,
   StackCardStyleInterpolator,
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
+  StackHeaderLeftProps,
   StackHeaderProps,
+  StackHeaderRightProps,
   StackHeaderStyleInterpolator,
   StackNavigationEventMap,
   StackNavigationOptions,
   StackNavigationProp,
+  StackNavigatorProps,
+  StackOptionsArgs,
   StackScreenProps,
   TransitionPreset,
 } from './types';

package/src/navigators/createStackNavigator.tsx

@@ -1,80 +1,43 @@
 import {
   createNavigatorFactory,
-  DefaultNavigatorOptions,
-  EventArg,
-  ParamListBase,
-  StackActionHelpers,
+  type EventArg,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StackActionHelpers,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
   StackRouter,
-  StackRouterOptions,
+  type StackRouterOptions,
+  type StaticConfig,
+  type TypedNavigator,
+  useLocale,
   useNavigationBuilder,
 } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
-import warnOnce from 'warn-once';
 
 import type {
-  StackHeaderMode,
-  StackNavigationConfig,
   StackNavigationEventMap,
   StackNavigationOptions,
+  StackNavigationProp,
+  StackNavigatorProps,
 } from '../types';
-import StackView from '../views/Stack/StackView';
-
-type Props = DefaultNavigatorOptions<
-  ParamListBase,
-  StackNavigationState<ParamListBase>,
-  StackNavigationOptions,
-  StackNavigationEventMap
-> &
-  StackRouterOptions &
-  StackNavigationConfig;
+import { StackView } from '../views/Stack/StackView';
 
 function StackNavigator({
   id,
   initialRouteName,
+  UNSTABLE_routeNamesChangeBehavior,
   children,
+  layout,
   screenListeners,
   screenOptions,
+  screenLayout,
+  UNSTABLE_router,
   ...rest
-}: Props) {
-  // @ts-expect-error: mode is deprecated
-  const mode = rest.mode as 'card' | 'modal' | undefined;
-
-  warnOnce(
-    mode != null,
-    `Stack Navigator: 'mode="${mode}"' is deprecated. Use 'presentation: "${mode}"' in 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/stack-navigator#presentation for more details.`
-  );
-
-  // @ts-expect-error: headerMode='none' is deprecated
-  const headerMode = rest.headerMode as StackHeaderMode | 'none' | undefined;
-
-  warnOnce(
-    headerMode === 'none',
-    `Stack Navigator: 'headerMode="none"' is deprecated. Use 'headerShown: false' in 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/stack-navigator/#headershown for more details.`
-  );
-
-  warnOnce(
-    headerMode != null && headerMode !== 'none',
-    `Stack Navigator: 'headerMode' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.\n\nSee https://reactnavigation.org/docs/stack-navigator/#headermode for more details.`
-  );
-
-  // @ts-expect-error: headerMode='none' is deprecated
-  const keyboardHandlingEnabled = rest.keyboardHandlingEnabled;
-
-  warnOnce(
-    keyboardHandlingEnabled !== undefined,
-    `Stack Navigator: 'keyboardHandlingEnabled' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.\n\nSee https://reactnavigation.org/docs/stack-navigator/#keyboardhandlingenabled for more details.`
-  );
+}: StackNavigatorProps) {
+  const { direction } = useLocale();
 
-  const defaultScreenOptions: StackNavigationOptions = {
-    presentation: mode,
-    headerShown: headerMode ? headerMode !== 'none' : true,
-    headerMode: headerMode && headerMode !== 'none' ? headerMode : undefined,
-    keyboardHandlingEnabled,
-  };
-
-  const { state, descriptors, navigation, NavigationContent } =
+  const { state, describe, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
       StackRouterOptions,
@@ -84,10 +47,13 @@ function StackNavigator({
     >(StackRouter, {
       id,
       initialRouteName,
+      UNSTABLE_routeNamesChangeBehavior,
       children,
+      layout,
       screenListeners,
       screenOptions,
-      defaultScreenOptions,
+      screenLayout,
+      UNSTABLE_router,
     });
 
   React.useEffect(
@@ -120,7 +86,9 @@ function StackNavigator({
     <NavigationContent>
       <StackView
         {...rest}
+        direction={direction}
         state={state}
+        describe={describe}
         descriptors={descriptors}
         navigation={navigation}
       />
@@ -128,9 +96,25 @@ function StackNavigator({
   );
 }
 
-export default createNavigatorFactory<
-  StackNavigationState<ParamListBase>,
-  StackNavigationOptions,
-  StackNavigationEventMap,
-  typeof StackNavigator
->(StackNavigator);
+export function createStackNavigator<
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined = string | undefined,
+  const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: StackNavigationState<ParamList>;
+    ScreenOptions: StackNavigationOptions;
+    EventMap: StackNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: StackNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    Navigator: typeof StackNavigator;
+  },
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(StackNavigator)(config);
+}