@amazon-devices/react-native-screens 2.0.1758683737

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

@@ -0,0 +1,466 @@
+/*
+ * 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 * as React from 'react';
+import { Animated, Platform, StyleSheet, View, ViewProps } from 'react-native';
+// @ts-ignore Getting private component
+// eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import warnOnce from 'warn-once';
+import {
+  ScreenStack,
+  StackPresentationTypes,
+  ScreenContext,
+} from '@amazon-devices/react-native-screens';
+import {
+  ParamListBase,
+  StackActions,
+  StackNavigationState,
+  useTheme,
+  Route,
+  NavigationState,
+  PartialState,
+// amznmod_react - change imports to kepler packages
+} from '@amazon-devices/react-navigation__native';
+import {
+  Rect,
+  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 HeaderHeightContext from '../utils/HeaderHeightContext';
+import AnimatedHeaderHeightContext from '../utils/AnimatedHeaderHeightContext';
+
+const isAndroid = Platform.OS === 'android';
+
+let Container = View;
+
+if (__DEV__) {
+  const DebugContainer = (
+    props: ViewProps & { stackPresentation: StackPresentationTypes }
+  ) => {
+    const { stackPresentation, ...rest } = props;
+    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+      return (
+        <AppContainer>
+          <View {...rest} />
+        </AppContainer>
+      );
+    }
+    return <View {...rest} />;
+  };
+  // @ts-ignore Wrong props
+  Container = DebugContainer;
+}
+
+const MaybeNestedStack = ({
+  options,
+  route,
+  stackPresentation,
+  children,
+}: {
+  options: NativeStackNavigationOptions;
+  route: Route<string>;
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+}) => {
+  const { colors } = useTheme();
+  const { headerShown = true, contentStyle } = options;
+
+  const Screen = React.useContext(ScreenContext);
+
+  const isHeaderInModal = isAndroid
+    ? 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={[
+        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 isLargeHeader = options.headerLargeTitle ?? false;
+
+  const headerHeight = getDefaultHeaderHeight(
+    dimensions,
+    statusBarHeight,
+    stackPresentation,
+    isLargeHeader
+  );
+
+  if (isHeaderInModal) {
+    return (
+      <ScreenStack style={styles.container}>
+        <Screen enabled isNativeStack style={StyleSheet.absoluteFill}>
+          <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,
+}: {
+  descriptors: NativeStackDescriptorMap;
+  route: NavigationRoute<ParamListBase, string>;
+  index: number;
+  navigation: NativeStackNavigationHelpers;
+  stateKey: string;
+}) => {
+  const { options, render: renderScene } = descriptors[route.key];
+  const {
+    gestureEnabled,
+    headerShown,
+    hideKeyboardOnSwipe,
+    homeIndicatorHidden,
+    sheetAllowedDetents = 'large',
+    sheetLargestUndimmedDetent = 'all',
+    sheetGrabberVisible = false,
+    sheetCornerRadius = -1.0,
+    sheetExpandsWhenScrolledToEdge = true,
+    nativeBackButtonDismissalEnabled = false,
+    navigationBarColor,
+    navigationBarHidden,
+    replaceAnimation = 'pop',
+    screenOrientation,
+    statusBarAnimation,
+    statusBarColor,
+    statusBarHidden,
+    statusBarStyle,
+    statusBarTranslucent,
+    swipeDirection = 'horizontal',
+    transitionDuration,
+    freezeOnBlur,
+  } = options;
+
+  let {
+    customAnimationOnSwipe,
+    fullScreenSwipeEnabled,
+    gestureResponseDistance,
+    stackAnimation,
+    stackPresentation = 'push',
+  } = options;
+
+  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 isLargeHeader = options.headerLargeTitle ?? false;
+
+  const defaultHeaderHeight = getDefaultHeaderHeight(
+    dimensions,
+    statusBarHeight,
+    stackPresentation,
+    isLargeHeader
+  );
+
+  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(statusBarHeight);
+  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();
+
+  return (
+    <Screen
+      key={route.key}
+      enabled
+      isNativeStack
+      style={StyleSheet.absoluteFill}
+      sheetAllowedDetents={sheetAllowedDetents}
+      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+      sheetGrabberVisible={sheetGrabberVisible}
+      sheetCornerRadius={sheetCornerRadius}
+      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+      customAnimationOnSwipe={customAnimationOnSwipe}
+      freezeOnBlur={freezeOnBlur}
+      fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      hideKeyboardOnSwipe={hideKeyboardOnSwipe}
+      homeIndicatorHidden={homeIndicatorHidden}
+      gestureEnabled={isAndroid ? false : gestureEnabled}
+      gestureResponseDistance={gestureResponseDistance}
+      nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
+      navigationBarColor={navigationBarColor}
+      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,
+        });
+      }}
+      onGestureCancel={() => {
+        navigation.emit({
+          type: 'gestureCancel',
+          target: route.key,
+        });
+      }}>
+      <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+        <HeaderHeightContext.Provider value={staticHeaderHeight}>
+          <MaybeNestedStack
+            options={options}
+            route={route}
+            stackPresentation={stackPresentation}>
+            {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}
+          />
+        </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;
+
+  return (
+    <ScreenStack style={styles.container}>
+      {routes.map((route, index) => (
+        <RouteView
+          key={route.key}
+          descriptors={descriptors}
+          route={route}
+          index={index}
+          navigation={navigation}
+          stateKey={key}
+        />
+      ))}
+    </ScreenStack>
+  );
+}
+
+export default function NativeStackView(props: Props) {
+  return (
+    <SafeAreaProviderCompat>
+      <NativeStackViewInner {...props} />
+    </SafeAreaProviderCompat>
+  );
+}
+
+function getStatusBarHeight(
+  topInset: number,
+  dimensions: Rect,
+  isStatusBarTranslucent: boolean
+) {
+  if (Platform.OS === 'ios') {
+    // It looks like some iOS devices don't have strictly set status bar height to 44.
+    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
+    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
+    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
+    const hasDynamicIsland = topInset > 50;
+    return hasDynamicIsland ? topInset - 5 : topInset;
+  } else if (Platform.OS === 'android') {
+    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
+    return isStatusBarTranslucent ? topInset : dimensions.y;
+  }
+
+  return topInset;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/reanimated/ReanimatedHeaderHeightContext.tsx

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,130 @@
+/*
+ * 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 {
+  HeaderHeightChangeEventType,
+  InnerScreen,
+  ScreenProps,
+  TransitionProgressEventType,
+} from '@amazon-devices/react-native-screens';
+
+// @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 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' } = rest;
+
+  const dimensions = useSafeAreaFrame();
+  const topInset = useSafeAreaInsets().top;
+  let statusBarHeight = topInset;
+  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
+  if (hasDynamicIsland) {
+    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+    statusBarHeight = 54;
+  }
+
+  // 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
+  );
+
+  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;

package/src/reanimated/ReanimatedScreen.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { InnerScreen, ScreenProps } from '@amazon-devices/react-native-screens';
+
+// @ts-ignore file to be used only if `react-native-reanimated` available in the project
+import Animated from 'react-native-reanimated';
+
+const AnimatedScreen = Animated.createAnimatedComponent(
+  InnerScreen as unknown as React.ComponentClass
+);
+
+const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
+  (props, ref) => {
+    return (
+      <AnimatedScreen
+        // @ts-ignore some problems with ref and onTransitionProgressReanimated being "fake" prop for parsing of `useEvent` return value
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+ReanimatedScreen.displayName = 'ReanimatedScreen';
+
+export default ReanimatedScreen;

package/src/reanimated/ReanimatedScreenProvider.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from 'react-native';
+import { ScreenProps, ScreenContext } from '@amazon-devices/react-native-screens';
+import ReanimatedNativeStackScreen from './ReanimatedNativeStackScreen';
+import AnimatedScreen from './ReanimatedScreen';
+
+class ReanimatedScreenWrapper extends React.Component<ScreenProps> {
+  private ref: React.ElementRef<typeof View> | null = null;
+
+  setNativeProps(props: ScreenProps): void {
+    this.ref?.setNativeProps(props);
+  }
+
+  setRef = (ref: React.ElementRef<typeof View> | null): void => {
+    this.ref = ref;
+    this.props.onComponentRef?.(ref);
+  };
+
+  render() {
+    const ReanimatedScreen = this.props.isNativeStack
+      ? ReanimatedNativeStackScreen
+      : AnimatedScreen;
+    return (
+      <ReanimatedScreen
+        {...this.props}
+        // @ts-ignore some problems with ref
+        ref={this.setRef}
+      />
+    );
+  }
+}
+
+export default function ReanimatedScreenProvider(
+  props: PropsWithChildren<unknown>
+) {
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <ScreenContext.Provider value={ReanimatedScreenWrapper as any}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}

package/src/reanimated/ReanimatedTransitionProgressContext.tsx

@@ -0,0 +1,13 @@
+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';
+
+type ReanimatedTransitionProgressContextBody = {
+  progress: Animated.SharedValue<number>;
+  closing: Animated.SharedValue<number>;
+  goingForward: Animated.SharedValue<number>;
+};
+
+export default React.createContext<
+  ReanimatedTransitionProgressContextBody | undefined
+>(undefined);

package/src/reanimated/index.tsx

@@ -0,0 +1,3 @@
+export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
+export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';
+export { default as useReanimatedHeaderHeight } from './useReanimatedHeaderHeight';