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

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

@@ -11,17 +11,23 @@
  * Set up react-native-screens package to build for Kepler
  */
 
+/* eslint-disable camelcase */
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View, ViewProps } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} 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 { StackPresentationTypes, ScreensRefsHolder } from '../../types';
+import ScreenStack from '../../components/ScreenStack';
+import ScreenContentWrapper from '../../components/ScreenContentWrapper';
+import { ScreenContext } from '../../components/Screen';
 import {
   ParamListBase,
   StackActions,
@@ -33,7 +39,6 @@ import {
 // amznmod_react - change imports to kepler packages
 } from '@amazon-devices/react-navigation__native';
 import {
-  Rect,
   useSafeAreaFrame,
   useSafeAreaInsets,
 // amznmod_react - change imports to kepler packages
@@ -46,26 +51,35 @@ import {
 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 = View;
+let Container = ScreenContentWrapper;
 
 if (__DEV__) {
   const DebugContainer = (
-    props: ViewProps & { stackPresentation: StackPresentationTypes }
+    props: ViewProps & { stackPresentation: StackPresentationTypes },
   ) => {
     const { stackPresentation, ...rest } = props;
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+    if (
+      Platform.OS === 'ios' &&
+      stackPresentation !== 'push' &&
+      stackPresentation !== 'formSheet'
+    ) {
       return (
         <AppContainer>
-          <View {...rest} />
+          <ScreenContentWrapper {...rest} />
         </AppContainer>
       );
     }
-    return <View {...rest} />;
+    return <ScreenContentWrapper {...rest} />;
   };
   // @ts-ignore Wrong props
   Container = DebugContainer;
@@ -76,18 +90,21 @@ const MaybeNestedStack = ({
   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);
 
-  const isHeaderInModal = isAndroid
+  // amznmod_react - return false for Modal on kepler because native component is not implemented yet
+  const isHeaderInModal = isAndroid || isKepler
     ? false
     : stackPresentation !== 'push' && headerShown === true;
 
@@ -98,7 +115,7 @@ const MaybeNestedStack = ({
       !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}'.`
+      `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;
@@ -107,7 +124,11 @@ const MaybeNestedStack = ({
   const content = (
     <Container
       style={[
-        styles.container,
+        stackPresentation === 'formSheet'
+          ? Platform.OS === 'ios'
+            ? styles.absoluteFillNoBottom
+            : null
+          : styles.container,
         stackPresentation !== 'transparentModal' &&
           stackPresentation !== 'containedTransparentModal' && {
             backgroundColor: colors.background,
@@ -130,22 +151,26 @@ const MaybeNestedStack = ({
   const statusBarHeight = getStatusBarHeight(
     topInset,
     dimensions,
-    isStatusBarTranslucent
+    isStatusBarTranslucent,
   );
 
-  const isLargeHeader = options.headerLargeTitle ?? false;
+  const hasLargeHeader = options.headerLargeTitle ?? false;
 
   const headerHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader,
   );
 
   if (isHeaderInModal) {
     return (
       <ScreenStack style={styles.container}>
-        <Screen enabled isNativeStack style={StyleSheet.absoluteFill}>
+        <Screen
+          enabled
+          isNativeStack
+          hasLargeHeader={hasLargeHeader}
+          style={[StyleSheet.absoluteFill, internalScreenStyle]}>
           <HeaderHeightContext.Provider value={headerHeight}>
             <HeaderConfig {...options} route={route} />
             {content}
@@ -159,7 +184,7 @@ const MaybeNestedStack = ({
 
 type NavigationRoute<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
   state?: NavigationState | PartialState<NavigationState>;
 };
@@ -170,26 +195,32 @@ const RouteView = ({
   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,
-    sheetAllowedDetents = 'large',
-    sheetLargestUndimmedDetent = 'all',
+    sheetLargestUndimmedDetentIndex = 'none',
     sheetGrabberVisible = false,
     sheetCornerRadius = -1.0,
+    sheetElevation = 24,
     sheetExpandsWhenScrolledToEdge = true,
+    sheetInitialDetentIndex = 0,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
+    navigationBarTranslucent,
     navigationBarHidden,
     replaceAnimation = 'pop',
     screenOrientation,
@@ -201,9 +232,12 @@ const RouteView = ({
     swipeDirection = 'horizontal',
     transitionDuration,
     freezeOnBlur,
+    unstable_sheetFooter = null,
+    contentStyle,
   } = options;
 
   let {
+    sheetAllowedDetents = [1.0],
     customAnimationOnSwipe,
     fullScreenSwipeEnabled,
     gestureResponseDistance,
@@ -211,6 +245,22 @@ const RouteView = ({
     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.
@@ -240,16 +290,16 @@ const RouteView = ({
   const statusBarHeight = getStatusBarHeight(
     topInset,
     dimensions,
-    isStatusBarTranslucent
+    isStatusBarTranslucent,
   );
 
-  const isLargeHeader = options.headerLargeTitle ?? false;
+  const hasLargeHeader = options.headerLargeTitle ?? false;
 
   const defaultHeaderHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader,
   );
 
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
@@ -263,39 +313,53 @@ const RouteView = ({
   // 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 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
-      style={StyleSheet.absoluteFill}
+      hasLargeHeader={hasLargeHeader}
+      style={[StyleSheet.absoluteFill, internalScreenStyle]}
       sheetAllowedDetents={sheetAllowedDetents}
-      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+      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}
@@ -374,6 +438,16 @@ const RouteView = ({
           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',
@@ -385,7 +459,8 @@ const RouteView = ({
           <MaybeNestedStack
             options={options}
             route={route}
-            stackPresentation={stackPresentation}>
+            stackPresentation={stackPresentation}
+            internalScreenStyle={internalScreenStyle}>
             {renderScene()}
           </MaybeNestedStack>
           {/* HeaderConfig must not be first child of a Screen.
@@ -396,6 +471,9 @@ const RouteView = ({
             route={route}
             headerShown={isHeaderInPush}
           />
+          {stackPresentation === 'formSheet' && unstable_sheetFooter && (
+            <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
+          )}
         </HeaderHeightContext.Provider>
       </AnimatedHeaderHeightContext.Provider>
     </Screen>
@@ -415,8 +493,20 @@ function NativeStackViewInner({
 }: 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}>
+    <ScreenStack
+      style={styles.container}
+      goBackGesture={goBackGesture}
+      transitionAnimation={transitionAnimation}
+      screenEdgeGesture={screenEdgeGesture ?? false}
+      screensRefs={screensRefs}
+      currentScreenId={currentRouteKey}>
       {routes.map((route, index) => (
         <RouteView
           key={route.key}
@@ -425,6 +515,7 @@ function NativeStackViewInner({
           index={index}
           navigation={navigation}
           stateKey={key}
+          screensRefs={screensRefs}
         />
       ))}
     </ScreenStack>
@@ -439,28 +530,21 @@ export default function NativeStackView(props: Props) {
   );
 }
 
-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,
   },
+  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

@@ -3,5 +3,5 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 export default React.createContext<Animated.SharedValue<number> | undefined>(
-  undefined
+  undefined,
 );

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -13,12 +13,12 @@
 
 import React from 'react';
 import { Platform } from 'react-native';
+import { InnerScreen } from '../components/Screen';
 import {
   HeaderHeightChangeEventType,
-  InnerScreen,
   ScreenProps,
   TransitionProgressEventType,
-} from '@amazon-devices/react-native-screens';
+} 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';
@@ -29,10 +29,11 @@ import {
 // 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
+  InnerScreen as unknown as React.ComponentClass,
 );
 
 // We use prop added to global by reanimated since it seems safer than the one from RN. See:
@@ -45,23 +46,24 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   ScreenProps
 >((props, ref) => {
   const { children, ...rest } = props;
-  const { stackPresentation = 'push' } = rest;
+  const { stackPresentation = 'push', hasLargeHeader } = 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;
-  }
+  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
+    stackPresentation,
+    hasLargeHeader,
   );
 
   const cachedHeaderHeight = React.useRef(defaultHeaderHeight);
@@ -91,7 +93,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             ENABLE_FABRIC
             ? 'onTransitionProgress'
             : 'topTransitionProgress',
-        ]
+        ],
       )}
       onHeaderHeightChangeReanimated={useEvent(
         (event: HeaderHeightChangeEventType) => {
@@ -108,7 +110,7 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : ENABLE_FABRIC
             ? 'onHeaderHeightChange'
             : 'topHeaderHeightChange',
-        ]
+        ],
       )}
       {...rest}>
       <ReanimatedHeaderHeightContext.Provider value={headerHeight}>

package/src/reanimated/ReanimatedScreen.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { InnerScreen, ScreenProps } from '@amazon-devices/react-native-screens';
+import { InnerScreen } from '../components/Screen';
+import { ScreenProps } from '../types';
 
 // @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
+  InnerScreen as unknown as React.ComponentClass,
 );
 
 const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
@@ -17,7 +18,7 @@ const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(
         {...props}
       />
     );
-  }
+  },
 );
 
 ReanimatedScreen.displayName = 'ReanimatedScreen';

package/src/reanimated/ReanimatedScreenProvider.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { View } from 'react-native';
-import { ScreenProps, ScreenContext } from '@amazon-devices/react-native-screens';
+import { ScreenContext } from '../components/Screen';
+import { ScreenProps } from '../types';
 import ReanimatedNativeStackScreen from './ReanimatedNativeStackScreen';
 import AnimatedScreen from './ReanimatedScreen';
 
@@ -31,7 +32,7 @@ class ReanimatedScreenWrapper extends React.Component<ScreenProps> {
 }
 
 export default function ReanimatedScreenProvider(
-  props: PropsWithChildren<unknown>
+  props: PropsWithChildren<unknown>,
 ) {
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/reanimated/useReanimatedHeaderHeight.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
 
-export default function useReanimatedTransitionProgress() {
+export default function useReanimatedHeaderHeight() {
   const height = React.useContext(ReanimatedHeaderHeightContext);
 
   if (height === undefined) {
     throw new Error(
-      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?"
+      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?",
     );
   }
 

package/src/reanimated/useReanimatedTransitionProgress.tsx

@@ -6,7 +6,7 @@ export default function useReanimatedTransitionProgress() {
 
   if (progress === undefined) {
     throw new Error(
-      "Couldn't find values for reanimated transition progress. Are you inside a screen in Native Stack?"
+      "Couldn't find values for reanimated transition progress. Are you inside a screen in Native Stack?",
     );
   }