@amazon-devices/react-navigation__stack 8.0.9000000001 → 8.0.9000000002

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,286 +0,0 @@
-import { Animated, Platform } from 'react-native';
-
-import type {
-  StackHeaderInterpolatedStyle,
-  StackHeaderInterpolationProps,
-} from '../types';
-
-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.
- */
-export function forUIKit({
-  current,
-  next,
-  direction,
-  layouts,
-}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const defaultOffset = 100;
-  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
-  // When screen is closing, the previous title will animate to back title's position
-  // And back title will animate to title's position
-  // We achieve this by calculating the offsets needed to translate title to back title's position and vice-versa
-  const leftLabelOffset = layouts.leftLabel
-    ? (layouts.screen.width - layouts.leftLabel.width) / 2 - leftSpacing
-    : defaultOffset;
-  const titleLeftOffset = layouts.title
-    ? (layouts.screen.width - layouts.title.width) / 2 - leftSpacing
-    : defaultOffset;
-
-  // When the current title is animating to right, it is centered in the right half of screen in middle of transition
-  // 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],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  return {
-    leftButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0],
-      }),
-    },
-    leftLabelStyle: {
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0, 1, 2],
-              outputRange: [leftLabelOffset, 0, -rightOffset],
-            })
-          ),
-        },
-      ],
-    },
-    rightButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0],
-      }),
-    },
-    titleStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 0.5, 0.75, 1, 1.5],
-        outputRange: [0, 0, 0.1, 1, 0],
-      }),
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0.5, 1, 2],
-              outputRange: [rightOffset, 0, -titleLeftOffset],
-            })
-          ),
-        },
-      ],
-    },
-    backgroundStyle: {
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0, 1, 2],
-              outputRange: [layouts.screen.width, 0, -layouts.screen.width],
-            })
-          ),
-        },
-      ],
-    },
-  };
-}
-
-/**
- * Simple fade animation for the header elements.
- */
-export function forFade({
-  current,
-  next,
-}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  const opacity = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [0, 1, 0],
-  });
-
-  return {
-    leftButtonStyle: { opacity },
-    rightButtonStyle: { opacity },
-    titleStyle: { opacity },
-    backgroundStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 1, 1.9, 2],
-        outputRange: [0, 1, 1, 0],
-      }),
-    },
-  };
-}
-
-/**
- * Simple translate animation to translate the header to left.
- */
-export function forSlideLeft({
-  current,
-  next,
-  direction,
-  layouts: { screen },
-}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const isRTL = direction === 'rtl';
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL
-      ? [-screen.width, 0, screen.width]
-      : [screen.width, 0, -screen.width],
-  });
-
-  const transform = [{ translateX }];
-
-  return {
-    leftButtonStyle: { transform },
-    rightButtonStyle: { transform },
-    titleStyle: { transform },
-    backgroundStyle: { transform },
-  };
-}
-
-/**
- * Simple translate animation to translate the header to right.
- */
-export function forSlideRight({
-  current,
-  next,
-  direction,
-  layouts: { screen },
-}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const isRTL = direction === 'rtl';
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL
-      ? [screen.width, 0, -screen.width]
-      : [-screen.width, 0, screen.width],
-  });
-
-  const transform = [{ translateX }];
-
-  return {
-    leftButtonStyle: { transform },
-    rightButtonStyle: { transform },
-    titleStyle: { transform },
-    backgroundStyle: { transform },
-  };
-}
-
-/**
- * Simple translate animation to translate the header to slide up.
- */
-export function forSlideUp({
-  current,
-  next,
-  layouts: { header },
-}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  const translateY = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [-header.height, 0, -header.height],
-  });
-
-  const transform = [{ translateY }];
-
-  return {
-    leftButtonStyle: { transform },
-    rightButtonStyle: { transform },
-    titleStyle: { transform },
-    backgroundStyle: { transform },
-  };
-}
-
-export function forNoAnimation(): StackHeaderInterpolatedStyle {
-  return {};
-}

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -1,182 +0,0 @@
-import { Platform } from 'react-native';
-
-import type { TransitionPreset } from '../types';
-import {
-  forBottomSheetAndroid,
-  forFadeFromBottomAndroid,
-  forFadeFromCenter as forFadeCard,
-  forFadeFromRightAndroid,
-  forHorizontalIOS,
-  forHorizontalIOSInverted,
-  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;
-const ANDROID_VERSION_14 = 34;
-
-/**
- * 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 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.
- */
-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({
-  // @ts-ignore - add default value for kepler (leaving for easy override)
-  kepler: ScaleFromCenterAndroid,
-  ios: SlideFromRightIOS,
-  android:
-    Number(Platform.Version) >= ANDROID_VERSION_14
-      ? FadeFromRightAndroid
-      : Number(Platform.Version) >= ANDROID_VERSION_10
-        ? ScaleFromCenterAndroid
-        : Number(Platform.Version) >= ANDROID_VERSION_PIE
-          ? RevealFromBottomAndroid
-          : FadeFromBottomAndroid,
-  default: ScaleFromCenterAndroid,
-});
-
-/**
- * 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

@@ -1,124 +0,0 @@
-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.20833, 0.82, 0.25, 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.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),
-  },
-};
-
-/**
- * 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/navigators/createStackNavigator.tsx

@@ -1,120 +0,0 @@
-import {
-  createNavigatorFactory,
-  type EventArg,
-  type NavigatorTypeBagBase,
-  type ParamListBase,
-  type StackActionHelpers,
-  StackActions,
-  type StackNavigationState,
-  StackRouter,
-  type StackRouterOptions,
-  type StaticConfig,
-  type TypedNavigator,
-  useLocale,
-  useNavigationBuilder,
-} from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-
-import type {
-  StackNavigationEventMap,
-  StackNavigationOptions,
-  StackNavigationProp,
-  StackNavigatorProps,
-} from '../types';
-import { StackView } from '../views/Stack/StackView';
-
-function StackNavigator({
-  id,
-  initialRouteName,
-  UNSTABLE_routeNamesChangeBehavior,
-  children,
-  layout,
-  screenListeners,
-  screenOptions,
-  screenLayout,
-  UNSTABLE_router,
-  ...rest
-}: StackNavigatorProps) {
-  const { direction } = useLocale();
-
-  const { state, describe, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      StackNavigationState<ParamListBase>,
-      StackRouterOptions,
-      StackActionHelpers<ParamListBase>,
-      StackNavigationOptions,
-      StackNavigationEventMap
-    >(StackRouter, {
-      id,
-      initialRouteName,
-      UNSTABLE_routeNamesChangeBehavior,
-      children,
-      layout,
-      screenListeners,
-      screenOptions,
-      screenLayout,
-      UNSTABLE_router,
-    });
-
-  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}
-        direction={direction}
-        state={state}
-        describe={describe}
-        descriptors={descriptors}
-        navigation={navigation}
-      />
-    </NavigationContent>
-  );
-}
-
-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);
-}