@amazon-devices/react-navigation__stack 7.0.9000000000 → 8.0.9000000000-rn-83

package/package.json

@@ -1 +1,105 @@
-{"name": "@amazon-devices/react-navigation__stack", "description": "Stack navigator component for iOS and Android with animated transitions and gestures", "version": "7.0.9000000000", "keywords": ["react-native-component", "react-component", "react-native", "react-navigation", "ios", "android", "stack"], "license": "See license in LICENSE", "repository": {"type": "git", "url": "https://github.com/react-navigation/react-navigation.git", "directory": "packages/stack"}, "bugs": {"url": "https://github.com/react-navigation/react-navigation/issues"}, "homepage": "https://reactnavigation.org/docs/stack-navigator/", "main": "lib/commonjs/index.js", "react-native": "src/index.tsx", "source": "src/index.tsx", "module": "lib/module/index.js", "types": "lib/typescript/src/index.d.ts", "files": ["src", "lib", "!**/__tests__", "kepler-compatibility.json", "SystemModules", "SystemBundles", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "sideEffects": false, "kepler": {"temporary-alias-for-package": {"name": "@react-navigation/stack", "version": "6.3.19"}}, "publishConfig": {"access": "public"}, "scripts": {"clean": "del lib"}, "dependencies": {"@amazon-devices/react-navigation__elements": "^7.0.0", "color": "4.2.3", "warn-once": "0.1.0"}, "devDependencies": {"@amazon-devices/react-native-kepler": "^2.0.0+rn0.72.0", "@amazon-devices/react-navigation__native": "^7.0.0", "@testing-library/react-native": "11.5.0", "@types/color": "3.0.2", "@types/jest": "26.0.15", "@types/react": "17.0.2", "@types/react-native": "0.72.5", "del-cli": "5.0.0", "react-native-builder-bob": "0.20.4", "react-native-gesture-handler": "~2.13.0", "@amazon-devices/react-native-safe-area-context": "^2.0.0+3.2.0", "@amazon-devices/react-native-screens": "^2.0.0+3.25.0", "typescript": "4.9.4"}, "peerDependencies": {"@amazon-devices/react-native-kepler": "^2.0.0+rn0.72.0", "@amazon-devices/react-navigation__native": "^7.0.0", "react": "*", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "@amazon-devices/react-native-safe-area-context": "^2.0.0+3.2.0", "@amazon-devices/react-native-screens": "^2.0.0+3.25.0"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}}
+{
+  "name": "@amazon-devices/react-navigation__stack",
+  "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
+  "version": "8.0.9000000000-rn-83",
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android",
+    "stack"
+  ],
+  "license": "See license in LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/stack"
+  },
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org/docs/stack-navigator/",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "kepler-compatibility.json",
+    "SystemModules",
+    "SystemBundles",
+    "oss-attribution",
+    "kepler-transformed-package-info.json"
+  ],
+  "sideEffects": false,
+  "kepler": {
+    "temporary-alias-for-package": {
+      "name": "@react-navigation/stack",
+      "version": "7.1.1"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@amazon-devices/react-navigation__elements": "^8.0.1",
+    "color": "^4.2.3",
+    "use-latest-callback": "^0.2.4"
+  },
+  "devDependencies": {
+    "@jest/globals": "^30.0.0",
+    "@amazon-devices/react-navigation__native": "^8.0.1",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/color": "^4.2.0",
+    "@types/react": "~19.0.10",
+    "del-cli": "^6.0.0",
+    "react": "19.0.0",
+    "react-native": "0.79.3",
+    "react-native-builder-bob": "^0.40.12",
+    "@amazon-devices/react-native-gesture-handler": "^4.0.0",
+    "@amazon-devices/react-native-safe-area-context": "^8.0.1",
+    "@amazon-devices/react-native-screens": "^3.0.0",
+    "react-test-renderer": "19.0.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@amazon-devices/react-native-kepler": "*",
+    "@amazon-devices/react-navigation__native": "^8.0.1",
+    "react": ">= 18.2.0",
+    "react-native": "*",
+    "@amazon-devices/react-native-gesture-handler": "^4.0.0",
+    "@amazon-devices/react-native-safe-area-context": "^8.0.1",
+    "@amazon-devices/react-native-screens": "^3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

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;
 
@@ -63,6 +63,19 @@ export function forHorizontalIOS({
   };
 }
 
+/**
+ * iOS-style slide in from the left.
+ */
+export function forHorizontalIOSInverted({
+  inverted,
+  ...rest
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  return forHorizontalIOS({
+    ...rest,
+    inverted: Animated.multiply(inverted, -1),
+  });
+}
+
 /**
  * Standard iOS-style slide in from the bottom (used for modals).
  */
@@ -156,15 +169,16 @@ 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: {
       overflow: 'hidden',
+      borderCurve: 'continuous',
       borderTopLeftRadius: borderRadius,
       borderTopRightRadius: borderRadius,
       // We don't need these for the animation
@@ -323,6 +337,58 @@ export function forScaleFromCenterAndroid({
   };
 }
 
+/**
+ * Standard Android-style fade from right for Android 14.
+ */
+export function forFadeFromRightAndroid({
+  current,
+  next,
+  inverted,
+  closing,
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const translateFocused = multiply(
+    current.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [96, 0],
+      extrapolate: 'clamp',
+    }),
+    inverted
+  );
+
+  const translateUnfocused = next
+    ? multiply(
+        next.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, -96],
+          extrapolate: 'clamp',
+        }),
+        inverted
+      )
+    : 0;
+
+  const opacity = conditional(
+    closing,
+    current.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }),
+    current.progress
+  );
+
+  return {
+    cardStyle: {
+      opacity,
+      transform: [
+        // Translation for the animation of the current card
+        { translateX: translateFocused },
+        // Translation for the animation of the card on top of this
+        { translateX: translateUnfocused },
+      ],
+    },
+  };
+}
+
 /**
  * Standard bottom sheet slide in from the bottom for Android.
  */

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';