@amazon-devices/react-navigation__stack 2.0.1758683737

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -0,0 +1,152 @@
+import { Platform } from 'react-native';
+
+import type { TransitionPreset } from '../types';
+import {
+  forBottomSheetAndroid,
+  forFadeFromBottomAndroid,
+  forFadeFromCenter as forFadeCard,
+  forHorizontalIOS,
+  forModalPresentationIOS,
+  forRevealFromBottomAndroid,
+  forScaleFromCenterAndroid,
+  forVerticalIOS,
+} from './CardStyleInterpolators';
+import { forFade } from './HeaderStyleInterpolators';
+import {
+  BottomSheetSlideInSpec,
+  BottomSheetSlideOutSpec,
+  FadeInFromBottomAndroidSpec,
+  FadeOutToBottomAndroidSpec,
+  RevealFromBottomAndroidSpec,
+  ScaleFromCenterAndroidSpec,
+  TransitionIOSSpec,
+} from './TransitionSpecs';
+
+const ANDROID_VERSION_PIE = 28;
+const ANDROID_VERSION_10 = 29;
+
+/**
+ * Standard iOS navigation transition.
+ */
+export const SlideFromRightIOS: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
+  },
+  cardStyleInterpolator: forHorizontalIOS,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard iOS navigation transition for modals.
+ */
+export const ModalSlideFromBottomIOS: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
+  },
+  cardStyleInterpolator: forVerticalIOS,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard iOS modal presentation style (introduced in iOS 13).
+ */
+export const ModalPresentationIOS: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
+  },
+  cardStyleInterpolator: forModalPresentationIOS,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android < 9 (Oreo).
+ */
+export const FadeFromBottomAndroid: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: FadeInFromBottomAndroidSpec,
+    close: FadeOutToBottomAndroidSpec,
+  },
+  cardStyleInterpolator: forFadeFromBottomAndroid,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 9 (Pie).
+ */
+export const RevealFromBottomAndroid: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: RevealFromBottomAndroidSpec,
+    close: RevealFromBottomAndroidSpec,
+  },
+  cardStyleInterpolator: forRevealFromBottomAndroid,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 10 (Q).
+ */
+export const ScaleFromCenterAndroid: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: ScaleFromCenterAndroidSpec,
+    close: ScaleFromCenterAndroidSpec,
+  },
+  cardStyleInterpolator: forScaleFromCenterAndroid,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard bottom sheet slide transition for Android 10.
+ */
+export const BottomSheetAndroid: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: BottomSheetSlideInSpec,
+    close: BottomSheetSlideOutSpec,
+  },
+  cardStyleInterpolator: forBottomSheetAndroid,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Fade transition for transparent modals.
+ */
+export const ModalFadeTransition: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: BottomSheetSlideInSpec,
+    close: BottomSheetSlideOutSpec,
+  },
+  cardStyleInterpolator: forFadeCard,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Default navigation transition for the current platform.
+ */
+export const DefaultTransition = Platform.select({
+  ios: SlideFromRightIOS,
+  android:
+    Platform.Version >= ANDROID_VERSION_10
+      ? ScaleFromCenterAndroid
+      : Platform.Version >= ANDROID_VERSION_PIE
+      ? RevealFromBottomAndroid
+      : FadeFromBottomAndroid,
+  default: ScaleFromCenterAndroid,
+});
+
+/**
+ * Default modal transition for the current platform.
+ */
+export const ModalTransition = Platform.select({
+  ios: ModalPresentationIOS,
+  default: BottomSheetAndroid,
+});

package/src/TransitionConfigs/TransitionSpecs.tsx

@@ -0,0 +1,96 @@
+import { Easing } from 'react-native';
+
+import type { TransitionSpec } from '../types';
+
+/**
+ * Exact values from UINavigationController's animation configuration.
+ */
+export const TransitionIOSSpec: TransitionSpec = {
+  animation: 'spring',
+  config: {
+    stiffness: 1000,
+    damping: 500,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+  },
+};
+
+/**
+ * Configuration for activity open animation from Android Nougat.
+ * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ */
+export const FadeInFromBottomAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 350,
+    easing: Easing.out(Easing.poly(5)),
+  },
+};
+
+/**
+ * Configuration for activity close animation from Android Nougat.
+ * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
+ */
+export const FadeOutToBottomAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 150,
+    easing: Easing.in(Easing.linear),
+  },
+};
+
+/**
+ * Approximate configuration for activity open animation from Android Pie.
+ * See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ */
+export const RevealFromBottomAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    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),
+  },
+};
+
+/**
+ * Approximate configuration for activity open animation from Android Q.
+ * See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ */
+export const ScaleFromCenterAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    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),
+  },
+};
+
+/**
+ * Configuration for bottom sheet slide in animation from Material Design.
+ * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
+ */
+export const BottomSheetSlideInSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 250,
+    // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateDecelerateInterpolator.java
+    easing: (t) => Math.cos((t + 1) * Math.PI) / 2.0 + 0.5,
+  },
+};
+
+/**
+ * Configuration for bottom sheet slide out animation from Material Design.
+ * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
+ */
+export const BottomSheetSlideOutSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 200,
+    // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateInterpolator.java
+    easing: (t) => (t === 1.0 ? 1 : Math.pow(t, 2)),
+  },
+};

package/src/index.tsx

@@ -0,0 +1,51 @@
+import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators';
+import * as HeaderStyleInterpolators from './TransitionConfigs/HeaderStyleInterpolators';
+import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
+import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
+
+/**
+ * Navigators
+ */
+export { default as createStackNavigator } from './navigators/createStackNavigator';
+
+/**
+ * Views
+ */
+export { default as Header } from './views/Header/Header';
+export { default as StackView } from './views/Stack/StackView';
+
+/**
+ * Transition presets
+ */
+export {
+  CardStyleInterpolators,
+  HeaderStyleInterpolators,
+  TransitionPresets,
+  TransitionSpecs,
+};
+
+/**
+ * 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';
+
+/**
+ * Types
+ */
+export type {
+  StackCardInterpolatedStyle,
+  StackCardInterpolationProps,
+  StackCardStyleInterpolator,
+  StackHeaderInterpolatedStyle,
+  StackHeaderInterpolationProps,
+  StackHeaderProps,
+  StackHeaderStyleInterpolator,
+  StackNavigationEventMap,
+  StackNavigationOptions,
+  StackNavigationProp,
+  StackScreenProps,
+  TransitionPreset,
+} from './types';

package/src/navigators/createStackNavigator.tsx

@@ -0,0 +1,136 @@
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  EventArg,
+  ParamListBase,
+  StackActionHelpers,
+  StackActions,
+  StackNavigationState,
+  StackRouter,
+  StackRouterOptions,
+  useNavigationBuilder,
+} from '@amazon-devices/react-navigation__native';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
+import type {
+  StackHeaderMode,
+  StackNavigationConfig,
+  StackNavigationEventMap,
+  StackNavigationOptions,
+} from '../types';
+import StackView from '../views/Stack/StackView';
+
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  StackNavigationState<ParamListBase>,
+  StackNavigationOptions,
+  StackNavigationEventMap
+> &
+  StackRouterOptions &
+  StackNavigationConfig;
+
+function StackNavigator({
+  id,
+  initialRouteName,
+  children,
+  screenListeners,
+  screenOptions,
+  ...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.`
+  );
+
+  const defaultScreenOptions: StackNavigationOptions = {
+    presentation: mode,
+    headerShown: headerMode ? headerMode !== 'none' : true,
+    headerMode: headerMode && headerMode !== 'none' ? headerMode : undefined,
+    keyboardHandlingEnabled,
+  };
+
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      StackNavigationState<ParamListBase>,
+      StackRouterOptions,
+      StackActionHelpers<ParamListBase>,
+      StackNavigationOptions,
+      StackNavigationEventMap
+    >(StackRouter, {
+      id,
+      initialRouteName,
+      children,
+      screenListeners,
+      screenOptions,
+      defaultScreenOptions,
+    });
+
+  React.useEffect(
+    () =>
+      // @ts-expect-error: there may not be a tab navigator in parent
+      navigation.addListener?.('tabPress', (e) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (
+            state.index > 0 &&
+            isFocused &&
+            !(e as unknown as EventArg<'tabPress', true>).defaultPrevented
+          ) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
+  return (
+    <NavigationContent>
+      <StackView
+        {...rest}
+        state={state}
+        descriptors={descriptors}
+        navigation={navigation}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  StackNavigationState<ParamListBase>,
+  StackNavigationOptions,
+  StackNavigationEventMap,
+  typeof StackNavigator
+>(StackNavigator);