@react-navigation/stack 7.6.16 → 8.0.0-alpha.1

package/src/views/Header/HeaderSegment.tsx

@@ -4,18 +4,13 @@ import {
   HeaderBackButton,
   type HeaderBackButtonProps,
   HeaderTitle,
+  useFrameSize,
 } from '@react-navigation/elements';
 import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, type ViewStyle } from 'react-native';
 
 import type {
-  Layout,
   SceneProgress,
   StackHeaderOptions,
   StackHeaderStyleInterpolator,
@@ -23,7 +18,6 @@ import type {
 
 type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
-  layout: Layout;
   title: string;
   modal: boolean;
   onGoBack?: () => void;
@@ -34,48 +28,10 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
 
 export function HeaderSegment(props: Props) {
   const { direction } = useLocale();
-
-  const [leftLabelLayout, setLeftLabelLayout] = React.useState<
-    Layout | undefined
-  >(undefined);
-
-  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
-    undefined
-  );
-
-  const handleTitleLayout = (e: LayoutChangeEvent) => {
-    const { height, width } = e.nativeEvent.layout;
-
-    setTitleLayout((titleLayout) => {
-      if (
-        titleLayout &&
-        height === titleLayout.height &&
-        width === titleLayout.width
-      ) {
-        return titleLayout;
-      }
-
-      return { height, width };
-    });
-  };
-
-  const handleLeftLabelLayout = (e: LayoutChangeEvent) => {
-    const { height, width } = e.nativeEvent.layout;
-
-    if (
-      leftLabelLayout &&
-      height === leftLabelLayout.height &&
-      width === leftLabelLayout.width
-    ) {
-      return;
-    }
-
-    setLeftLabelLayout({ height, width });
-  };
+  const layout = useFrameSize((frame) => frame, true);
 
   const {
     progress,
-    layout,
     modal,
     onGoBack,
     backHref,
@@ -86,7 +42,7 @@ export function HeaderSegment(props: Props) {
     headerRight: right,
     headerBackImage,
     headerBackTitle,
-    headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackButtonDisplayMode,
     headerBackTruncatedTitle,
     headerBackAccessibilityLabel,
     headerBackTestID,
@@ -102,11 +58,11 @@ export function HeaderSegment(props: Props) {
     ...rest
   } = props;
 
-  const defaultHeight = getDefaultHeaderHeight(
-    layout,
-    modal,
-    headerStatusBarHeight
-  );
+  const defaultHeight = getDefaultHeaderHeight({
+    landscape: layout.width > layout.height,
+    modalPresentation: modal,
+    topInset: headerStatusBarHeight,
+  });
 
   const { height = defaultHeight } = StyleSheet.flatten(
     customHeaderStyle || {}
@@ -114,38 +70,23 @@ export function HeaderSegment(props: Props) {
 
   const headerHeight = typeof height === 'number' ? height : defaultHeight;
 
-  const {
-    titleStyle,
-    leftButtonStyle,
-    leftLabelStyle,
-    rightButtonStyle,
-    backgroundStyle,
-  } = React.useMemo(
-    () =>
-      styleInterpolator({
-        current: { progress: progress.current },
-        next: progress.next && { progress: progress.next },
-        direction,
-        layouts: {
-          header: {
-            height: headerHeight,
-            width: layout.width,
+  const { titleStyle, leftButtonStyle, rightButtonStyle, backgroundStyle } =
+    React.useMemo(
+      () =>
+        styleInterpolator({
+          current: { progress: progress.current },
+          next: progress.next && { progress: progress.next },
+          direction,
+          layouts: {
+            header: {
+              height: headerHeight,
+              width: layout.width,
+            },
+            screen: layout,
           },
-          screen: layout,
-          title: titleLayout,
-          leftLabel: leftLabelLayout,
-        },
-      }),
-    [
-      styleInterpolator,
-      progress,
-      direction,
-      headerHeight,
-      layout,
-      titleLayout,
-      leftLabelLayout,
-    ]
-  );
+        }),
+      [styleInterpolator, progress, direction, headerHeight, layout]
+    );
 
   const headerLeft: StackHeaderOptions['headerLeft'] = left
     ? (props) =>
@@ -159,10 +100,7 @@ export function HeaderSegment(props: Props) {
           onPress: onGoBack,
           label: headerBackTitle,
           truncatedLabel: headerBackTruncatedTitle,
-          labelStyle: [leftLabelStyle, headerBackTitleStyle],
-          onLabelLayout: handleLeftLabelLayout,
-          screenLayout: layout,
-          titleLayout,
+          labelStyle: headerBackTitleStyle,
           canGoBack: Boolean(onGoBack),
         })
     : undefined;
@@ -176,14 +114,11 @@ export function HeaderSegment(props: Props) {
     : undefined;
 
   const headerTitle: StackHeaderOptions['headerTitle'] =
-    typeof title !== 'function'
-      ? (props) => <HeaderTitle {...props} onLayout={handleTitleLayout} />
-      : (props) => title({ ...props, onLayout: handleTitleLayout });
+    typeof title !== 'function' ? (props) => <HeaderTitle {...props} /> : title;
 
   return (
     <Header
       modal={modal}
-      layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
       headerRight={headerRight}

package/src/views/Stack/Card.tsx

@@ -1,9 +1,8 @@
+import { Color } from '@react-navigation/elements/internal';
 import type { LocaleDirection } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
-  InteractionManager,
   Platform,
   type StyleProp,
   StyleSheet,
@@ -118,10 +117,7 @@ const defaultOverlay = ({
   style,
 }: {
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-}) =>
-  style ? (
-    <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
-  ) : null;
+}) => (style ? <Animated.View style={[styles.overlay, style]} /> : null);
 
 function Card({
   shadowEnabled = false,
@@ -160,7 +156,6 @@ function Card({
   const didInitiallyAnimate = React.useRef(false);
   const lastToValueRef = React.useRef<number | undefined>(undefined);
 
-  const interactionHandleRef = React.useRef<number | undefined>(undefined);
   const animationHandleRef = React.useRef<number | undefined>(undefined);
   const pendingGestureCallbackRef =
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -181,20 +176,6 @@ function Card({
 
   const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
 
-  const onStartInteraction = useLatestCallback(() => {
-    if (interactionHandleRef.current === undefined) {
-      interactionHandleRef.current =
-        InteractionManager.createInteractionHandle();
-    }
-  });
-
-  const onEndInteraction = useLatestCallback(() => {
-    if (interactionHandleRef.current !== undefined) {
-      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
-      interactionHandleRef.current = undefined;
-    }
-  });
-
   const animate = useLatestCallback(
     ({
       closing: isClosingParam,
@@ -245,7 +226,6 @@ function Card({
       };
 
       if (animated) {
-        onStartInteraction();
         animation(gesture, {
           ...spec.config,
           velocity,
@@ -253,7 +233,6 @@ function Card({
           useNativeDriver,
           isInteraction: false,
         }).start(({ finished }) => {
-          onEndInteraction();
           clearTimeout(pendingGestureCallbackRef.current);
 
           if (finished) {
@@ -271,13 +250,11 @@ function Card({
       switch (nativeEvent.state) {
         case GestureState.ACTIVE:
           isSwiping.setValue(TRUE);
-          onStartInteraction();
           onGestureBegin?.();
           break;
         case GestureState.CANCELLED:
         case GestureState.FAILED: {
           isSwiping.setValue(FALSE);
-          onEndInteraction();
 
           const velocity =
             gestureDirection === 'vertical' ||
@@ -368,8 +345,6 @@ function Card({
 
   React.useEffect(() => {
     return () => {
-      onEndInteraction();
-
       if (animationHandleRef.current) {
         cancelAnimationFrame(animationHandleRef.current);
       }
@@ -378,7 +353,6 @@ function Card({
     };
 
     // We only want to clean up the animation on unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -518,7 +492,8 @@ function Card({
 
   const isTransparent =
     typeof backgroundColor === 'string'
-      ? Color(backgroundColor).alpha() === 0
+      ? backgroundColor === 'transparent' ||
+        Color(backgroundColor)?.alpha() === 0
       : false;
 
   return (
@@ -537,12 +512,11 @@ function Card({
         />
       ) : null}
       {overlayEnabled ? (
-        <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+        <View style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}>
           {overlay({ style: overlayStyle })}
         </View>
       ) : null}
       <Animated.View
-        pointerEvents="box-none"
         style={[styles.container, containerStyle, customContainerStyle]}
       >
         <PanGestureHandler
@@ -557,13 +531,11 @@ function Card({
           })}
         >
           <Animated.View
-            pointerEvents="box-none"
             needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
             style={[styles.container, cardStyle]}
           >
             {shadowEnabled && shadowStyle && !isTransparent ? (
               <Animated.View
-                pointerEvents="none"
                 style={[
                   styles.shadow,
                   gestureDirection === 'horizontal'
@@ -597,13 +569,16 @@ export { Card };
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    pointerEvents: 'box-none',
   },
   overlay: {
     flex: 1,
     backgroundColor: '#000',
+    pointerEvents: 'none',
   },
   shadow: {
     position: 'absolute',
+    pointerEvents: 'none',
   },
   shadowHorizontal: {
     top: 0,

package/src/views/Stack/CardA11yWrapper.tsx

@@ -39,10 +39,10 @@ export const CardA11yWrapper = React.forwardRef(
     return (
       <View
         aria-hidden={!focused}
-        pointerEvents={(animated ? inert : !focused) ? 'none' : 'box-none'}
         style={[
           StyleSheet.absoluteFill,
           {
+            pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
             // This is necessary to avoid unfocused larger pages increasing scroll area
             // The issue can be seen on the web when a smaller screen is pushed over a larger one
             overflow: active ? undefined : 'hidden',

package/src/views/Stack/CardContainer.tsx

@@ -292,7 +292,6 @@ function CardContainerInner({
             {headerMode !== 'float'
               ? renderHeader({
                   mode: 'screen',
-                  layout,
                   scenes: [previousScene, scene],
                   getPreviousScene,
                   getFocusedRoute,

package/src/views/Stack/CardContent.tsx

@@ -75,8 +75,11 @@ export function CardContent({ enabled, layout, style, ...rest }: Props) {
   return (
     <View
       {...rest}
-      pointerEvents="box-none"
-      style={[enabled && fill ? styles.page : styles.card, style]}
+      style={[
+        { pointerEvents: 'box-none' },
+        enabled && fill ? styles.page : styles.card,
+        style,
+      ]}
     />
   );
 }

package/src/views/Stack/CardStack.tsx

@@ -1,7 +1,5 @@
-import {
-  getDefaultHeaderHeight,
-  SafeAreaProviderCompat,
-} from '@react-navigation/elements';
+import { getDefaultHeaderHeight } from '@react-navigation/elements';
+import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
 import type {
   LocaleDirection,
   ParamListBase,
@@ -17,6 +15,7 @@ import {
   View,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   forModalPresentationIOS,
@@ -49,7 +48,6 @@ import { findLastIndex } from '../../utils/findLastIndex';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import { MaybeScreen, MaybeScreenContainer } from '../Screens';
 import { CardContainer } from './CardContainer';
 
 type GestureValues = {
@@ -191,7 +189,11 @@ const getHeaderHeights = (
     acc[curr.route.key] =
       typeof height === 'number'
         ? height
-        : getDefaultHeaderHeight(layout, isModal, headerStatusBarHeight);
+        : getDefaultHeaderHeight({
+            landscape: layout.width > layout.height,
+            modalPresentation: isModal,
+            topInset: headerStatusBarHeight,
+          });
 
     return acc;
   }, {});
@@ -678,9 +680,8 @@ export class CardStack extends React.Component<Props, State> {
       this.state;
 
     const focusedRoute = state.routes[state.index];
-    const focusedHeaderHeight = headerHeights[focusedRoute.key];
 
-    const isFloatHeaderAbsolute = this.state.scenes.slice(-2).some((scene) => {
+    const isFloatHeaderAbsolute = scenes.slice(-2).some((scene) => {
       const options = scene.descriptor.options ?? {};
       const { headerMode, headerTransparent, headerShown = true } = options;
 
@@ -695,25 +696,30 @@ export class CardStack extends React.Component<Props, State> {
       return false;
     });
 
+    const isFloatHeaderFocused =
+      scenes.findLast((scene) => scene.route.key === focusedRoute.key)
+        ?.descriptor.options.headerMode === 'float';
+
     return (
       <View style={styles.container}>
         {renderHeader({
           mode: 'float',
-          layout,
           scenes,
           getPreviousScene: this.getPreviousScene,
           getFocusedRoute: this.getFocusedRoute,
           onContentHeightChange: this.handleHeaderLayout,
           style: [
-            styles.floating,
             isFloatHeaderAbsolute && [
-              // Without this, the header buttons won't be touchable on Android when headerTransparent: true
-              { height: focusedHeaderHeight },
               styles.absolute,
+              // The header title can't be found with maestro without this
+              // In some cases, header buttons may not be touchable as well
+              isFloatHeaderFocused && {
+                height: headerHeights[focusedRoute.key],
+              },
             ],
           ],
         })}
-        <MaybeScreenContainer
+        <ScreenContainer
           enabled={detachInactiveScreens}
           style={styles.container}
           onLayout={this.handleLayout}
@@ -772,15 +778,14 @@ export class CardStack extends React.Component<Props, State> {
               : activeStates[index];
 
             return (
-              <MaybeScreen
+              <Screen
                 key={route.key}
-                style={[StyleSheet.absoluteFill]}
+                style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}
                 enabled={detachInactiveScreens}
-                active={activityState}
+                activityState={activityState}
                 freezeOnBlur={freezeOnBlur}
                 shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
                 homeIndicatorHidden={autoHideHomeIndicator}
-                pointerEvents="box-none"
               >
                 <CardContainer
                   index={index}
@@ -817,10 +822,10 @@ export class CardStack extends React.Component<Props, State> {
                   detachCurrentScreen={detachCurrentScreen}
                   preloaded={isPreloaded}
                 />
-              </MaybeScreen>
+              </Screen>
             );
           })}
-        </MaybeScreenContainer>
+        </ScreenContainer>
       </View>
     );
   }
@@ -835,8 +840,6 @@ const styles = StyleSheet.create({
     top: 0,
     start: 0,
     end: 0,
-  },
-  floating: {
     zIndex: 1,
   },
 });

package/src/views/Stack/StackView.tsx

@@ -1,7 +1,5 @@
-import {
-  HeaderShownContext,
-  SafeAreaProviderCompat,
-} from '@react-navigation/elements';
+import { HeaderShownContext } from '@react-navigation/elements';
+import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
 import {
   CommonActions,
   type LocaleDirection,

package/lib/module/views/Screens.js

@@ -1,42 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-let Screens;
-try {
-  Screens = require('react-native-screens');
-} catch (e) {
-  // Ignore
-}
-export const MaybeScreenContainer = ({
-  enabled,
-  ...rest
-}) => {
-  if (Screens != null) {
-    return /*#__PURE__*/_jsx(Screens.ScreenContainer, {
-      enabled: enabled,
-      ...rest
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    ...rest
-  });
-};
-export const MaybeScreen = ({
-  enabled,
-  active,
-  ...rest
-}) => {
-  if (Screens != null) {
-    return /*#__PURE__*/_jsx(Screens.Screen, {
-      enabled: enabled,
-      activityState: active,
-      ...rest
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    ...rest
-  });
-};
-//# sourceMappingURL=Screens.js.map

package/lib/module/views/Screens.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","jsx","_jsx","Screens","require","e","MaybeScreenContainer","enabled","rest","ScreenContainer","MaybeScreen","active","Screen","activityState"],"sourceRoot":"../../../src","sources":["views/Screens.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAmBC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9D,IAAIC,OAA0D;AAE9D,IAAI;EACFA,OAAO,GAAGC,OAAO,CAAC,sBAAsB,CAAC;AAC3C,CAAC,CAAC,OAAOC,CAAC,EAAE;EACV;AAAA;AAGF,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EACnCC,OAAO;EACP,GAAGC;AAIL,CAAC,KAAK;EACJ,IAAIL,OAAO,IAAI,IAAI,EAAE;IACnB,oBAAOD,IAAA,CAACC,OAAO,CAACM,eAAe;MAACF,OAAO,EAAEA,OAAQ;MAAA,GAAKC;IAAI,CAAG,CAAC;EAChE;EAEA,oBAAON,IAAA,CAACF,IAAI;IAAA,GAAKQ;EAAI,CAAG,CAAC;AAC3B,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAAC;EAC1BH,OAAO;EACPI,MAAM;EACN,GAAGH;AAQL,CAAC,KAAK;EACJ,IAAIL,OAAO,IAAI,IAAI,EAAE;IACnB,oBACED,IAAA,CAACC,OAAO,CAACS,MAAM;MAACL,OAAO,EAAEA,OAAQ;MAACM,aAAa,EAAEF,MAAO;MAAA,GAAKH;IAAI,CAAG,CAAC;EAEzE;EAEA,oBAAON,IAAA,CAACF,IAAI;IAAA,GAAKQ;EAAI,CAAG,CAAC;AAC3B,CAAC","ignoreList":[]}

package/lib/typescript/src/views/Screens.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Animated, type ViewProps } from 'react-native';
-export declare const MaybeScreenContainer: ({ enabled, ...rest }: ViewProps & {
-    enabled: boolean;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MaybeScreen: ({ enabled, active, ...rest }: ViewProps & {
-    enabled: boolean;
-    active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
-    children: React.ReactNode;
-    freezeOnBlur?: boolean;
-    shouldFreeze: boolean;
-    homeIndicatorHidden?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Screens.d.ts.map

package/lib/typescript/src/views/Screens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Screens.d.ts","sourceRoot":"","sources":["../../../../src/views/Screens.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9D,eAAO,MAAM,oBAAoB,GAAI,sBAGlC,SAAS,GAAG;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAMA,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8BAIzB,SAAS,GAAG;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,4CAQA,CAAC"}

package/src/views/Screens.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { Animated, View, type ViewProps } from 'react-native';
-
-let Screens: typeof import('react-native-screens') | undefined;
-
-try {
-  Screens = require('react-native-screens');
-} catch (e) {
-  // Ignore
-}
-
-export const MaybeScreenContainer = ({
-  enabled,
-  ...rest
-}: ViewProps & {
-  enabled: boolean;
-  children: React.ReactNode;
-}) => {
-  if (Screens != null) {
-    return <Screens.ScreenContainer enabled={enabled} {...rest} />;
-  }
-
-  return <View {...rest} />;
-};
-
-export const MaybeScreen = ({
-  enabled,
-  active,
-  ...rest
-}: ViewProps & {
-  enabled: boolean;
-  active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
-  children: React.ReactNode;
-  freezeOnBlur?: boolean;
-  shouldFreeze: boolean;
-  homeIndicatorHidden?: boolean;
-}) => {
-  if (Screens != null) {
-    return (
-      <Screens.Screen enabled={enabled} activityState={active} {...rest} />
-    );
-  }
-
-  return <View {...rest} />;
-};