@amazon-devices/react-native-screens 3.0.9000000000 → 3.0.9000000003

package/src/native-stack/views/NativeStackView.tsx

@@ -1,550 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up react-native-screens package to build for Kepler
- */
-
-/* eslint-disable camelcase */
-import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleSheet,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-// @ts-ignore Getting private component
-
-import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
-import warnOnce from 'warn-once';
-import { StackPresentationTypes, ScreensRefsHolder } from '../../types';
-import ScreenStack from '../../components/ScreenStack';
-import ScreenContentWrapper from '../../components/ScreenContentWrapper';
-import { ScreenContext } from '../../components/Screen';
-import {
-  ParamListBase,
-  StackActions,
-  StackNavigationState,
-  useTheme,
-  Route,
-  NavigationState,
-  PartialState,
-// amznmod_react - change imports to kepler packages
-} from '@amazon-devices/react-navigation__native';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-// amznmod_react - change imports to kepler packages
-} from '@amazon-devices/react-native-safe-area-context';
-import {
-  NativeStackDescriptorMap,
-  NativeStackNavigationHelpers,
-  NativeStackNavigationOptions,
-} from '../types';
-import HeaderConfig from './HeaderConfig';
-import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
-import getDefaultHeaderHeight from '../utils/getDefaultHeaderHeight';
-import getStatusBarHeight from '../utils/getStatusBarHeight';
-import HeaderHeightContext from '../utils/HeaderHeightContext';
-import AnimatedHeaderHeightContext from '../utils/AnimatedHeaderHeightContext';
-import FooterComponent from './FooterComponent';
-
-const isAndroid = Platform.OS === 'android';
-// amznmod_react - add isKepler flag
-// @ts-ignore
-const isKepler = Platform.OS === 'kepler';
-
-let Container = ScreenContentWrapper;
-
-if (__DEV__) {
-  const DebugContainer = (
-    props: ViewProps & { stackPresentation: StackPresentationTypes },
-  ) => {
-    const { stackPresentation, ...rest } = props;
-    if (
-      Platform.OS === 'ios' &&
-      stackPresentation !== 'push' &&
-      stackPresentation !== 'formSheet'
-    ) {
-      return (
-        <AppContainer>
-          <ScreenContentWrapper {...rest} />
-        </AppContainer>
-      );
-    }
-    return <ScreenContentWrapper {...rest} />;
-  };
-  // @ts-ignore Wrong props
-  Container = DebugContainer;
-}
-
-const MaybeNestedStack = ({
-  options,
-  route,
-  stackPresentation,
-  children,
-  internalScreenStyle,
-}: {
-  options: NativeStackNavigationOptions;
-  route: Route<string>;
-  stackPresentation: StackPresentationTypes;
-  children: React.ReactNode;
-  internalScreenStyle?: Pick<ViewStyle, 'backgroundColor'>;
-}) => {
-  const { colors } = useTheme();
-  const { headerShown = true, contentStyle } = options;
-
-  const Screen = React.useContext(ScreenContext);
-
-  // amznmod_react - return false for Modal on kepler because native component is not implemented yet
-  const isHeaderInModal = isAndroid || isKepler
-    ? false
-    : stackPresentation !== 'push' && headerShown === true;
-
-  const headerShownPreviousRef = React.useRef(headerShown);
-
-  React.useEffect(() => {
-    warnOnce(
-      !isAndroid &&
-        stackPresentation !== 'push' &&
-        headerShownPreviousRef.current !== headerShown,
-      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`,
-    );
-
-    headerShownPreviousRef.current = headerShown;
-  }, [headerShown, stackPresentation, route.name]);
-
-  const content = (
-    <Container
-      style={[
-        stackPresentation === 'formSheet'
-          ? Platform.OS === 'ios'
-            ? styles.absoluteFillNoBottom
-            : null
-          : styles.container,
-        stackPresentation !== 'transparentModal' &&
-          stackPresentation !== 'containedTransparentModal' && {
-            backgroundColor: colors.background,
-          },
-        contentStyle,
-      ]}
-      // @ts-ignore Wrong props passed to View
-      stackPresentation={stackPresentation}
-      // This view must *not* be flattened.
-      // See https://github.com/software-mansion/react-native-screens/pull/1825
-      // for detailed explanation.
-      collapsable={false}>
-      {children}
-    </Container>
-  );
-
-  const dimensions = useSafeAreaFrame();
-  const topInset = useSafeAreaInsets().top;
-  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
-  const statusBarHeight = getStatusBarHeight(
-    topInset,
-    dimensions,
-    isStatusBarTranslucent,
-  );
-
-  const hasLargeHeader = options.headerLargeTitle ?? false;
-
-  const headerHeight = getDefaultHeaderHeight(
-    dimensions,
-    statusBarHeight,
-    stackPresentation,
-    hasLargeHeader,
-  );
-
-  if (isHeaderInModal) {
-    return (
-      <ScreenStack style={styles.container}>
-        <Screen
-          enabled
-          isNativeStack
-          hasLargeHeader={hasLargeHeader}
-          style={[StyleSheet.absoluteFill, internalScreenStyle]}>
-          <HeaderHeightContext.Provider value={headerHeight}>
-            <HeaderConfig {...options} route={route} />
-            {content}
-          </HeaderHeightContext.Provider>
-        </Screen>
-      </ScreenStack>
-    );
-  }
-  return content;
-};
-
-type NavigationRoute<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList,
-> = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
-  state?: NavigationState | PartialState<NavigationState>;
-};
-
-const RouteView = ({
-  descriptors,
-  route,
-  index,
-  navigation,
-  stateKey,
-  screensRefs,
-}: {
-  descriptors: NativeStackDescriptorMap;
-  route: NavigationRoute<ParamListBase, string>;
-  index: number;
-  navigation: NativeStackNavigationHelpers;
-  stateKey: string;
-  screensRefs: React.MutableRefObject<ScreensRefsHolder>;
-}) => {
-  const { options, render: renderScene } = descriptors[route.key];
-
-  const {
-    fullScreenSwipeShadowEnabled = true,
-    gestureEnabled,
-    headerShown,
-    hideKeyboardOnSwipe,
-    homeIndicatorHidden,
-    sheetLargestUndimmedDetentIndex = 'none',
-    sheetGrabberVisible = false,
-    sheetCornerRadius = -1.0,
-    sheetElevation = 24,
-    sheetExpandsWhenScrolledToEdge = true,
-    sheetInitialDetentIndex = 0,
-    nativeBackButtonDismissalEnabled = false,
-    navigationBarColor,
-    navigationBarTranslucent,
-    navigationBarHidden,
-    replaceAnimation = 'pop',
-    screenOrientation,
-    statusBarAnimation,
-    statusBarColor,
-    statusBarHidden,
-    statusBarStyle,
-    statusBarTranslucent,
-    swipeDirection = 'horizontal',
-    transitionDuration,
-    freezeOnBlur,
-    unstable_sheetFooter = null,
-    contentStyle,
-  } = options;
-
-  let {
-    sheetAllowedDetents = [1.0],
-    customAnimationOnSwipe,
-    fullScreenSwipeEnabled,
-    gestureResponseDistance,
-    stackAnimation,
-    stackPresentation = 'push',
-  } = options;
-
-  // We take backgroundColor from contentStyle and apply it on Screen.
-  // This allows to workaround one issue with truncated
-  // content with formSheet presentation.
-  let internalScreenStyle;
-
-  if (stackPresentation === 'formSheet' && contentStyle) {
-    const flattenContentStyles = StyleSheet.flatten(contentStyle);
-    internalScreenStyle = {
-      backgroundColor: flattenContentStyles?.backgroundColor,
-    };
-  }
-
-  if (sheetAllowedDetents === 'fitToContents') {
-    sheetAllowedDetents = [-1];
-  }
-
-  if (swipeDirection === 'vertical') {
-    // for `vertical` direction to work, we need to set `fullScreenSwipeEnabled` to `true`
-    // so the screen can be dismissed from any point on screen.
-    // `customAnimationOnSwipe` needs to be set to `true` so the `stackAnimation` set by user can be used,
-    // otherwise `simple_push` will be used.
-    // Also, the default animation for this direction seems to be `slide_from_bottom`.
-    if (fullScreenSwipeEnabled === undefined) {
-      fullScreenSwipeEnabled = true;
-    }
-    if (customAnimationOnSwipe === undefined) {
-      customAnimationOnSwipe = true;
-    }
-    if (stackAnimation === undefined) {
-      stackAnimation = 'slide_from_bottom';
-    }
-  }
-
-  if (index === 0) {
-    // first screen should always be treated as `push`, it resolves problems with no header animation
-    // for navigator with first screen as `modal` and the next as `push`
-    stackPresentation = 'push';
-  }
-
-  const dimensions = useSafeAreaFrame();
-  const topInset = useSafeAreaInsets().top;
-  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
-  const statusBarHeight = getStatusBarHeight(
-    topInset,
-    dimensions,
-    isStatusBarTranslucent,
-  );
-
-  const hasLargeHeader = options.headerLargeTitle ?? false;
-
-  const defaultHeaderHeight = getDefaultHeaderHeight(
-    dimensions,
-    statusBarHeight,
-    stackPresentation,
-    hasLargeHeader,
-  );
-
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
-  const isHeaderInPush = isAndroid
-    ? headerShown
-    : stackPresentation === 'push' && headerShown !== false;
-
-  const staticHeaderHeight =
-    isHeaderInPush !== false ? defaultHeaderHeight : parentHeaderHeight ?? 0;
-
-  // We need to ensure the first retrieved header height will be cached and set in animatedHeaderHeight.
-  // We're caching the header height here, as on iOS native side events are not always coming to the JS on first notify.
-  // TODO: Check why first event is not being received once it is cached on the native side.
-  const cachedAnimatedHeaderHeight = React.useRef(defaultHeaderHeight);
-  const animatedHeaderHeight = React.useRef(
-    // amznmod_react - change imports to kepler packages
-    // @ts-ignore
-    new Animated.Value(staticHeaderHeight, {
-      useNativeDriver: true,
-    }),
-  ).current;
-
-  const Screen = React.useContext(ScreenContext);
-  const { dark } = useTheme();
-
-  const screenRef = React.useRef(null);
-  React.useEffect(() => {
-    screensRefs.current[route.key] = screenRef;
-    return () => {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete screensRefs.current[route.key];
-    };
-  });
-
-  return (
-    <Screen
-      key={route.key}
-      ref={screenRef}
-      enabled
-      isNativeStack
-      hasLargeHeader={hasLargeHeader}
-      style={[StyleSheet.absoluteFill, internalScreenStyle]}
-      sheetAllowedDetents={sheetAllowedDetents}
-      sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
-      sheetGrabberVisible={sheetGrabberVisible}
-      sheetInitialDetentIndex={sheetInitialDetentIndex}
-      sheetCornerRadius={sheetCornerRadius}
-      sheetElevation={sheetElevation}
-      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
-      customAnimationOnSwipe={customAnimationOnSwipe}
-      freezeOnBlur={freezeOnBlur}
-      fullScreenSwipeEnabled={fullScreenSwipeEnabled}
-      fullScreenSwipeShadowEnabled={fullScreenSwipeShadowEnabled}
-      hideKeyboardOnSwipe={hideKeyboardOnSwipe}
-      homeIndicatorHidden={homeIndicatorHidden}
-      gestureEnabled={isAndroid ? false : gestureEnabled}
-      gestureResponseDistance={gestureResponseDistance}
-      nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
-      navigationBarColor={navigationBarColor}
-      navigationBarTranslucent={navigationBarTranslucent}
-      navigationBarHidden={navigationBarHidden}
-      replaceAnimation={replaceAnimation}
-      screenOrientation={screenOrientation}
-      stackAnimation={stackAnimation}
-      stackPresentation={stackPresentation}
-      statusBarAnimation={statusBarAnimation}
-      statusBarColor={statusBarColor}
-      statusBarHidden={statusBarHidden}
-      statusBarStyle={statusBarStyle ?? (dark ? 'light' : 'dark')}
-      statusBarTranslucent={statusBarTranslucent}
-      swipeDirection={swipeDirection}
-      transitionDuration={transitionDuration}
-      onHeaderBackButtonClicked={() => {
-        navigation.dispatch({
-          ...StackActions.pop(),
-          source: route.key,
-          target: stateKey,
-        });
-      }}
-      onWillAppear={() => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: { closing: false },
-          target: route.key,
-        });
-      }}
-      onWillDisappear={() => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: { closing: true },
-          target: route.key,
-        });
-      }}
-      onAppear={() => {
-        navigation.emit({
-          type: 'appear',
-          target: route.key,
-        });
-        navigation.emit({
-          type: 'transitionEnd',
-          data: { closing: false },
-          target: route.key,
-        });
-      }}
-      onDisappear={() => {
-        navigation.emit({
-          type: 'transitionEnd',
-          data: { closing: true },
-          target: route.key,
-        });
-      }}
-      onHeaderHeightChange={e => {
-        const headerHeight = e.nativeEvent.headerHeight;
-
-        if (cachedAnimatedHeaderHeight.current !== headerHeight) {
-          // Currently, we're setting value by Animated#setValue, because we want to cache animated value.
-          // Also, in React Native 0.72 there was a bug on Fabric causing a large delay between the screen transition,
-          // which should not occur.
-          // TODO: Check if it's possible to replace animated#setValue to Animated#event.
-          animatedHeaderHeight.setValue(headerHeight);
-          cachedAnimatedHeaderHeight.current = headerHeight;
-        }
-      }}
-      onDismissed={e => {
-        navigation.emit({
-          type: 'dismiss',
-          target: route.key,
-        });
-
-        const dismissCount =
-          e.nativeEvent.dismissCount > 0 ? e.nativeEvent.dismissCount : 1;
-
-        navigation.dispatch({
-          ...StackActions.pop(dismissCount),
-          source: route.key,
-          target: stateKey,
-        });
-      }}
-      onSheetDetentChanged={e => {
-        navigation.emit({
-          type: 'sheetDetentChange',
-          target: route.key,
-          data: {
-            index: e.nativeEvent.index,
-            isStable: e.nativeEvent.isStable,
-          },
-        });
-      }}
-      onGestureCancel={() => {
-        navigation.emit({
-          type: 'gestureCancel',
-          target: route.key,
-        });
-      }}>
-      <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-        <HeaderHeightContext.Provider value={staticHeaderHeight}>
-          <MaybeNestedStack
-            options={options}
-            route={route}
-            stackPresentation={stackPresentation}
-            internalScreenStyle={internalScreenStyle}>
-            {renderScene()}
-          </MaybeNestedStack>
-          {/* HeaderConfig must not be first child of a Screen.
-           See https://github.com/software-mansion/react-native-screens/pull/1825
-           for detailed explanation */}
-          <HeaderConfig
-            {...options}
-            route={route}
-            headerShown={isHeaderInPush}
-          />
-          {stackPresentation === 'formSheet' && unstable_sheetFooter && (
-            <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
-          )}
-        </HeaderHeightContext.Provider>
-      </AnimatedHeaderHeightContext.Provider>
-    </Screen>
-  );
-};
-
-type Props = {
-  state: StackNavigationState<ParamListBase>;
-  navigation: NativeStackNavigationHelpers;
-  descriptors: NativeStackDescriptorMap;
-};
-
-function NativeStackViewInner({
-  state,
-  navigation,
-  descriptors,
-}: Props): JSX.Element {
-  const { key, routes } = state;
-
-  const currentRouteKey = routes[state.index].key;
-  const { goBackGesture, transitionAnimation, screenEdgeGesture } =
-    descriptors[currentRouteKey].options;
-
-  const screensRefs = React.useRef<ScreensRefsHolder>({});
-
-  return (
-    <ScreenStack
-      style={styles.container}
-      goBackGesture={goBackGesture}
-      transitionAnimation={transitionAnimation}
-      screenEdgeGesture={screenEdgeGesture ?? false}
-      screensRefs={screensRefs}
-      currentScreenId={currentRouteKey}>
-      {routes.map((route, index) => (
-        <RouteView
-          key={route.key}
-          descriptors={descriptors}
-          route={route}
-          index={index}
-          navigation={navigation}
-          stateKey={key}
-          screensRefs={screensRefs}
-        />
-      ))}
-    </ScreenStack>
-  );
-}
-
-export default function NativeStackView(props: Props) {
-  return (
-    <SafeAreaProviderCompat>
-      <NativeStackViewInner {...props} />
-    </SafeAreaProviderCompat>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  absoluteFill: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  absoluteFillNoBottom: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});

package/src/reanimated/ReanimatedHeaderHeightContext.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-// @ts-ignore file to be used only if `react-native-reanimated` available in the project
-import Animated from 'react-native-reanimated';
-
-export default React.createContext<Animated.SharedValue<number> | undefined>(
-  undefined,
-);

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -1,132 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up react-native-screens package to build for Kepler
- */
-
-import React from 'react';
-import { Platform } from 'react-native';
-import { InnerScreen } from '../components/Screen';
-import {
-  HeaderHeightChangeEventType,
-  ScreenProps,
-  TransitionProgressEventType,
-} from '../types';
-
-// @ts-ignore file to be used only if `react-native-reanimated` available in the project
-import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
-import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-// amznmod_react - change imports to kepler packages
-} from '@amazon-devices/react-native-safe-area-context';
-import getDefaultHeaderHeight from '../native-stack/utils/getDefaultHeaderHeight';
-import getStatusBarHeight from '../native-stack/utils/getStatusBarHeight';
-import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
-
-const AnimatedScreen = Animated.createAnimatedComponent(
-  InnerScreen as unknown as React.ComponentClass,
-);
-
-// We use prop added to global by reanimated since it seems safer than the one from RN. See:
-// https://github.com/software-mansion/react-native-reanimated/blob/3fe8b35b05e82b2f2aefda1fb97799cf81e4b7bb/src/reanimated2/UpdateProps.ts#L46
-// @ts-expect-error nativeFabricUIManager is not yet included in the RN types
-const ENABLE_FABRIC = !!global?._IS_FABRIC;
-
-const ReanimatedNativeStackScreen = React.forwardRef<
-  typeof AnimatedScreen,
-  ScreenProps
->((props, ref) => {
-  const { children, ...rest } = props;
-  const { stackPresentation = 'push', hasLargeHeader } = rest;
-
-  const dimensions = useSafeAreaFrame();
-  const topInset = useSafeAreaInsets().top;
-  const isStatusBarTranslucent = rest.statusBarTranslucent ?? false;
-  const statusBarHeight = getStatusBarHeight(
-    topInset,
-    dimensions,
-    isStatusBarTranslucent,
-  );
-
-  // Default header height, normally used in `useHeaderHeight` hook.
-  // Here, it is used for returning a default value for shared value.
-  const defaultHeaderHeight = getDefaultHeaderHeight(
-    dimensions,
-    statusBarHeight,
-    stackPresentation,
-    hasLargeHeader,
-  );
-
-  const cachedHeaderHeight = React.useRef(defaultHeaderHeight);
-  const headerHeight = useSharedValue(defaultHeaderHeight);
-
-  const progress = useSharedValue(0);
-  const closing = useSharedValue(0);
-  const goingForward = useSharedValue(0);
-
-  return (
-    <AnimatedScreen
-      // @ts-ignore some problems with ref and onTransitionProgressReanimated being "fake" prop for parsing of `useEvent` return value
-      ref={ref}
-      onTransitionProgressReanimated={useEvent(
-        (event: TransitionProgressEventType) => {
-          'worklet';
-          progress.value = event.progress;
-          closing.value = event.closing;
-          goingForward.value = event.goingForward;
-        },
-        [
-          // This should not be necessary, but is not properly managed by `react-native-reanimated`
-          // @ts-ignore wrong type
-          Platform.OS === 'android'
-            ? 'onTransitionProgress'
-            : // for some reason there is a difference in required event name between architectures
-            ENABLE_FABRIC
-            ? 'onTransitionProgress'
-            : 'topTransitionProgress',
-        ],
-      )}
-      onHeaderHeightChangeReanimated={useEvent(
-        (event: HeaderHeightChangeEventType) => {
-          'worklet';
-          if (event.headerHeight !== cachedHeaderHeight.current) {
-            headerHeight.value = event.headerHeight;
-            cachedHeaderHeight.current = event.headerHeight;
-          }
-        },
-        [
-          // @ts-ignore wrong type
-          Platform.OS === 'android'
-            ? 'onHeaderHeightChange'
-            : ENABLE_FABRIC
-            ? 'onHeaderHeightChange'
-            : 'topHeaderHeightChange',
-        ],
-      )}
-      {...rest}>
-      <ReanimatedHeaderHeightContext.Provider value={headerHeight}>
-        <ReanimatedTransitionProgressContext.Provider
-          value={{
-            progress,
-            closing,
-            goingForward,
-          }}>
-          {children}
-        </ReanimatedTransitionProgressContext.Provider>
-      </ReanimatedHeaderHeightContext.Provider>
-    </AnimatedScreen>
-  );
-});
-
-ReanimatedNativeStackScreen.displayName = 'ReanimatedNativeStackScreen';
-
-export default ReanimatedNativeStackScreen;