@react-navigation/native-stack 6.2.5 → 6.5.0

package/src/views/NativeStackView.native.tsx

@@ -6,6 +6,8 @@ import {
   SafeAreaProviderCompat,
 } from '@react-navigation/elements';
 import {
+  NavigationContext,
+  NavigationRouteContext,
   ParamListBase,
   Route,
   StackActions,
@@ -13,7 +15,7 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, PlatformIOSStatic, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -40,11 +42,13 @@ const MaybeNestedStack = ({
   options,
   route,
   presentation,
+  headerHeight,
   children,
 }: {
   options: NativeStackNavigationOptions;
   route: Route<string>;
   presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
+  headerHeight: number;
   children: React.ReactNode;
 }) => {
   const { colors } = useTheme();
@@ -83,33 +87,17 @@ const MaybeNestedStack = ({
     </DebugContainer>
   );
 
-  const insets = useSafeAreaInsets();
-  const dimensions = useSafeAreaFrame();
-  // landscape is meaningful only for iPhone
-  const isLandscape =
-    dimensions.width > dimensions.height &&
-    !(Platform as PlatformIOSStatic).isPad &&
-    !(Platform as PlatformIOSStatic).isTVOS;
-  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
-  const isFullScreenModal =
-    presentation !== 'modal' && presentation !== 'formSheet';
-  const topInset = isFullScreenModal && !isLandscape ? insets.top : 0;
-  const headerHeight = getDefaultHeaderHeight(
-    dimensions,
-    !isFullScreenModal,
-    topInset
-  );
-
   if (isHeaderInModal) {
     return (
       <ScreenStack style={styles.container}>
         <Screen enabled style={StyleSheet.absoluteFill}>
-          <HeaderShownContext.Provider value>
-            <HeaderHeightContext.Provider value={headerHeight}>
-              <HeaderConfig {...options} route={route} canGoBack />
-              {content}
-            </HeaderHeightContext.Provider>
-          </HeaderShownContext.Provider>
+          <HeaderConfig
+            {...options}
+            route={route}
+            headerHeight={headerHeight}
+            canGoBack
+          />
+          {content}
         </Screen>
       </ScreenStack>
     );
@@ -139,11 +127,13 @@ const SceneView = ({
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
   const {
+    animation,
+    animationTypeForReplace = 'push',
+    customAnimationOnGesture,
+    fullScreenGestureEnabled,
     gestureEnabled,
     header,
     headerShown,
-    animationTypeForReplace = 'push',
-    animation,
     orientation,
     statusBarAnimation,
     statusBarHidden,
@@ -163,20 +153,35 @@ const SceneView = ({
     : presentation === 'card' && headerShown !== false;
 
   const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isModal = presentation === 'modal' || presentation === 'formSheet';
+
+  // Modals are fullscreen in landscape only on iPhone
+  const isIPhone =
+    Platform.OS === 'ios' && !(Platform.isPad && Platform.isTVOS);
+  const isLandscape = frame.width > frame.height;
+
+  const topInset = isModal || (isIPhone && isLandscape) ? 0 : insets.top;
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
-  const headerHeight = getDefaultHeaderHeight(
-    useSafeAreaFrame(),
-    false,
-    insets.top
-  );
+
+  const defaultHeaderHeight = getDefaultHeaderHeight(frame, isModal, topInset);
+
+  const [customHeaderHeight, setCustomHeaderHeight] =
+    React.useState(defaultHeaderHeight);
+
+  const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
 
   return (
     <Screen
       key={route.key}
       enabled
       style={StyleSheet.absoluteFill}
+      customAnimationOnSwipe={customAnimationOnGesture}
+      fullScreenSwipeEnabled={fullScreenGestureEnabled}
       gestureEnabled={
         isAndroid
           ? // This prop enables handling of system back gestures on Android
@@ -195,6 +200,7 @@ const SceneView = ({
       onAppear={onAppear}
       onDisappear={onDisappear}
       onDismissed={onDismissed}
+      isNativeStack
     >
       <HeaderShownContext.Provider
         value={isParentHeaderShown || isHeaderInPush !== false}
@@ -205,25 +211,35 @@ const SceneView = ({
           }
         >
           {header !== undefined && headerShown !== false ? (
-            // TODO: expose custom header height
-            header({
-              back: previousDescriptor
-                ? {
-                    title: getHeaderTitle(
-                      previousDescriptor.options,
-                      previousDescriptor.route.name
-                    ),
-                  }
-                : undefined,
-              options,
-              route,
-              navigation,
-            })
+            <NavigationContext.Provider value={navigation}>
+              <NavigationRouteContext.Provider value={route}>
+                <View
+                  onLayout={(e) => {
+                    setCustomHeaderHeight(e.nativeEvent.layout.height);
+                  }}
+                >
+                  {header({
+                    back: previousDescriptor
+                      ? {
+                          title: getHeaderTitle(
+                            previousDescriptor.options,
+                            previousDescriptor.route.name
+                          ),
+                        }
+                      : undefined,
+                    options,
+                    route,
+                    navigation,
+                  })}
+                </View>
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
           ) : (
             <HeaderConfig
               {...options}
               route={route}
               headerShown={isHeaderInPush}
+              headerHeight={headerHeight}
               canGoBack={index !== 0}
             />
           )}
@@ -231,6 +247,7 @@ const SceneView = ({
             options={options}
             route={route}
             presentation={presentation}
+            headerHeight={headerHeight}
           >
             {render()}
           </MaybeNestedStack>
@@ -247,8 +264,9 @@ type Props = {
 };
 
 function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  const [nextDismissedKey, setNextDismissedKey] =
-    React.useState<string | null>(null);
+  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+    null
+  );
 
   const dismissedRouteName = nextDismissedKey
     ? state.routes.find((route) => route.key === nextDismissedKey)?.name

package/src/views/NativeStackView.tsx

@@ -25,6 +25,11 @@ type Props = {
   descriptors: NativeStackDescriptorMap;
 };
 
+const TRANSPARENT_PRESENTATIONS = [
+  'transparentModal',
+  'containedTransparentModal',
+];
+
 export default function NativeStackView({ state, descriptors }: Props) {
   return (
     <SafeAreaProviderCompat>
@@ -33,9 +38,11 @@ export default function NativeStackView({ state, descriptors }: Props) {
           const isFocused = state.index === i;
           const canGoBack = i !== 0;
           const previousKey = state.routes[i - 1]?.key;
+          const nextKey = state.routes[i + 1]?.key;
           const previousDescriptor = previousKey
             ? descriptors[previousKey]
             : undefined;
+          const nexDescriptor = nextKey ? descriptors[nextKey] : undefined;
           const { options, navigation, render } = descriptors[route.key];
 
           const {
@@ -51,10 +58,13 @@ export default function NativeStackView({ state, descriptors }: Props) {
             headerStyle,
             headerShadowVisible,
             headerTransparent,
-            contentStyle,
             headerBackTitle,
+            presentation,
+            contentStyle,
           } = options;
 
+          const nextPresentation = nexDescriptor?.options.presentation;
+
           return (
             <Screen
               key={route.key}
@@ -115,7 +125,8 @@ export default function NativeStackView({ state, descriptors }: Props) {
                     }
                     headerRight={
                       typeof headerRight === 'function'
-                        ? ({ tintColor }) => headerRight({ tintColor })
+                        ? ({ tintColor }) =>
+                            headerRight({ tintColor, canGoBack })
                         : headerRight
                     }
                     headerTitle={
@@ -143,7 +154,18 @@ export default function NativeStackView({ state, descriptors }: Props) {
               }
               style={[
                 StyleSheet.absoluteFill,
-                { display: isFocused ? 'flex' : 'none' },
+                {
+                  display:
+                    isFocused ||
+                    (nextPresentation != null &&
+                      TRANSPARENT_PRESENTATIONS.includes(nextPresentation))
+                      ? 'flex'
+                      : 'none',
+                },
+                presentation != null &&
+                TRANSPARENT_PRESENTATIONS.includes(presentation)
+                  ? { backgroundColor: 'transparent' }
+                  : null,
               ]}
             >
               <View style={[styles.contentContainer, contentStyle]}>