@amazon-devices/react-navigation__stack 7.0.1759135970 → 8.0.9000000000

package/src/views/Header/HeaderContainer.tsx

@@ -2,11 +2,12 @@ import { getHeaderTitle, HeaderBackContext } from '@amazon-devices/react-navigat
 import {
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  Route,
+  type ParamListBase,
+  type Route,
+  useLinkBuilder,
 } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import {
   forNoAnimation,
@@ -21,7 +22,7 @@ import type {
   StackHeaderProps,
   StackNavigationProp,
 } from '../../types';
-import Header from './Header';
+import { Header } from './Header';
 
 export type Props = {
   mode: StackHeaderMode;
@@ -33,10 +34,10 @@ export type Props = {
     route: Route<string>;
     height: number;
   }) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
 };
 
-export default function HeaderContainer({
+export function HeaderContainer({
   mode,
   scenes,
   layout,
@@ -47,10 +48,14 @@ export default function HeaderContainer({
 }: Props) {
   const focusedRoute = getFocusedRoute();
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const { buildHref } = useLinkBuilder();
 
   return (
-    <Animated.View pointerEvents="box-none" style={style}>
-      {scenes.slice(-3).map((scene, i, self) => {
+    <View pointerEvents="box-none" style={style}>
+      {/* We render header only on two top-most headers as
+         a workaround for https://github.com/react-navigation/react-navigation/issues/12456.
+         If the header is persisted, it might be placed incorrectly when navigating back. */}
+      {scenes.slice(-2).map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
         }
@@ -78,7 +83,10 @@ export default function HeaderContainer({
           const { options, route } = previousScene.descriptor;
 
           headerBack = previousScene
-            ? { title: getHeaderTitle(options, route.name) }
+            ? {
+                title: getHeaderTitle(options, route.name),
+                href: buildHref(route.name, route.params),
+              }
             : parentHeaderBack;
         }
 
@@ -128,8 +136,8 @@ export default function HeaderContainer({
                   nextHeaderlessGestureDirection === 'vertical-inverted'
                   ? forSlideUp
                   : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                  ? forSlideRight
-                  : forSlideLeft
+                    ? forSlideRight
+                    : forSlideLeft
                 : headerStyleInterpolator
               : forNoAnimation,
         };
@@ -154,10 +162,7 @@ export default function HeaderContainer({
                     : undefined
                 }
                 pointerEvents={isFocused ? 'box-none' : 'none'}
-                accessibilityElementsHidden={!isFocused}
-                importantForAccessibility={
-                  isFocused ? 'auto' : 'no-hide-descendants'
-                }
+                aria-hidden={!isFocused}
                 style={
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
@@ -172,7 +177,7 @@ export default function HeaderContainer({
           </NavigationContext.Provider>
         );
       })}
-    </Animated.View>
+    </View>
   );
 }
 
@@ -180,7 +185,7 @@ const styles = StyleSheet.create({
   header: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
   },
 });

package/src/views/Header/HeaderSegment.tsx

@@ -2,16 +2,16 @@ import {
   getDefaultHeaderHeight,
   Header,
   HeaderBackButton,
-  HeaderBackButtonProps,
+  type HeaderBackButtonProps,
   HeaderTitle,
 } from '@amazon-devices/react-navigation__elements';
+import { useLocale } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
 import {
-  Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import type {
@@ -20,7 +20,6 @@ import type {
   StackHeaderOptions,
   StackHeaderStyleInterpolator,
 } from '../../types';
-import memoize from '../../utils/memoize';
 
 type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
@@ -28,11 +27,14 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   title: string;
   modal: boolean;
   onGoBack?: () => void;
+  backHref?: string;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
-export default function HeaderSegment(props: Props) {
+export function HeaderSegment(props: Props) {
+  const { direction } = useLocale();
+
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
   >(undefined);
@@ -71,36 +73,12 @@ export default function HeaderSegment(props: Props) {
     setLeftLabelLayout({ height, width });
   };
 
-  const getInterpolatedStyle = memoize(
-    (
-      styleInterpolator: StackHeaderStyleInterpolator,
-      layout: Layout,
-      current: Animated.AnimatedInterpolation<number>,
-      next: Animated.AnimatedInterpolation<number> | undefined,
-      titleLayout: Layout | undefined,
-      leftLabelLayout: Layout | undefined,
-      headerHeight: number
-    ) =>
-      styleInterpolator({
-        current: { progress: current },
-        next: next && { progress: next },
-        layouts: {
-          header: {
-            height: headerHeight,
-            width: layout.width,
-          },
-          screen: layout,
-          title: titleLayout,
-          leftLabel: leftLabelLayout,
-        },
-      })
-  );
-
   const {
     progress,
     layout,
     modal,
     onGoBack,
+    backHref,
     headerTitle: title,
     headerLeft: left = onGoBack
       ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
@@ -108,8 +86,8 @@ export default function HeaderSegment(props: Props) {
     headerRight: right,
     headerBackImage,
     headerBackTitle,
-    headerBackTitleVisible = Platform.OS === 'ios',
-    headerTruncatedBackTitle,
+    headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackTruncatedTitle,
     headerBackAccessibilityLabel,
     headerBackTestID,
     headerBackAllowFontScaling,
@@ -134,33 +112,53 @@ export default function HeaderSegment(props: Props) {
     customHeaderStyle || {}
   ) as ViewStyle;
 
+  const headerHeight = typeof height === 'number' ? height : defaultHeight;
+
   const {
     titleStyle,
     leftButtonStyle,
     leftLabelStyle,
     rightButtonStyle,
     backgroundStyle,
-  } = getInterpolatedStyle(
-    styleInterpolator,
-    layout,
-    progress.current,
-    progress.next,
-    titleLayout,
-    headerBackTitle ? leftLabelLayout : undefined,
-    typeof height === 'number' ? height : defaultHeight
+  } = React.useMemo(
+    () =>
+      styleInterpolator({
+        current: { progress: progress.current },
+        next: progress.next && { progress: progress.next },
+        direction,
+        layouts: {
+          header: {
+            height: headerHeight,
+            width: layout.width,
+          },
+          screen: layout,
+          title: titleLayout,
+          leftLabel: leftLabelLayout,
+        },
+      }),
+    [
+      styleInterpolator,
+      progress,
+      direction,
+      headerHeight,
+      layout,
+      titleLayout,
+      leftLabelLayout,
+    ]
   );
 
   const headerLeft: StackHeaderOptions['headerLeft'] = left
     ? (props) =>
         left({
           ...props,
+          href: backHref,
           backImage: headerBackImage,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,
           allowFontScaling: headerBackAllowFontScaling,
           onPress: onGoBack,
           label: headerBackTitle,
-          truncatedLabel: headerTruncatedBackTitle,
+          truncatedLabel: headerBackTruncatedTitle,
           labelStyle: [leftLabelStyle, headerBackTitleStyle],
           onLabelLayout: handleLeftLabelLayout,
           screenLayout: layout,
@@ -188,11 +186,11 @@ export default function HeaderSegment(props: Props) {
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
-      headerLeftLabelVisible={headerBackTitleVisible}
       headerRight={headerRight}
       headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
       headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
       headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}
+      headerBackButtonDisplayMode={headerBackButtonDisplayMode}
       headerBackgroundContainerStyle={[
         backgroundStyle,
         headerBackgroundContainerStyle,

package/src/views/Screens.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
+import { Animated, View, type ViewProps } from 'react-native';
 
 let Screens: typeof import('@amazon-devices/react-native-screens') | undefined;
 
@@ -29,9 +29,11 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: 0 | 1;
+  active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
   children: React.ReactNode;
   freezeOnBlur?: boolean;
+  shouldFreeze: boolean;
+  homeIndicatorHidden?: boolean;
 }) => {
   if (Screens != null) {
     return (