@react-navigation/native-stack 6.9.0 → 6.9.2

package/src/views/NativeStackView.native.tsx

@@ -116,6 +116,7 @@ const MaybeNestedStack = ({
 
 type SceneViewProps = {
   index: number;
+  focused: boolean;
   descriptor: NativeStackDescriptor;
   previousDescriptor?: NativeStackDescriptor;
   nextDescriptor?: NativeStackDescriptor;
@@ -128,10 +129,11 @@ type SceneViewProps = {
 };
 
 const SceneView = ({
+  index,
+  focused,
   descriptor,
   previousDescriptor,
   nextDescriptor,
-  index,
   onWillDisappear,
   onAppear,
   onDisappear,
@@ -147,6 +149,7 @@ const SceneView = ({
     header,
     headerBackButtonMenuEnabled,
     headerShown,
+    headerTransparent,
     autoHideHomeIndicator,
     navigationBarColor,
     navigationBarHidden,
@@ -203,8 +206,7 @@ const SceneView = ({
   const isModal = presentation === 'modal' || presentation === 'formSheet';
 
   // Modals are fullscreen in landscape only on iPhone
-  const isIPhone =
-    Platform.OS === 'ios' && !(Platform.isPad || Platform.isTVOS);
+  const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);
   const isLandscape = frame.width > frame.height;
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
@@ -289,50 +291,65 @@ const SceneView = ({
                 headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
               }
             >
-              {header !== undefined && headerShown !== false ? (
-                <View
-                  onLayout={(e) => {
-                    setCustomHeaderHeight(e.nativeEvent.layout.height);
-                  }}
-                >
-                  {header({
-                    back: headerBack,
-                    options,
-                    route,
-                    navigation,
-                  })}
-                </View>
-              ) : (
-                <HeaderConfig
-                  {...options}
-                  route={route}
-                  headerBackButtonMenuEnabled={
-                    isRemovePrevented !== undefined
-                      ? !isRemovePrevented
-                      : headerBackButtonMenuEnabled
-                  }
-                  headerShown={headerShown}
-                  headerHeight={headerHeight}
-                  headerBackTitle={
-                    options.headerBackTitle !== undefined
-                      ? options.headerBackTitle
-                      : undefined
-                  }
-                  headerTopInsetEnabled={headerTopInsetEnabled}
-                  canGoBack={headerBack !== undefined}
-                />
-              )}
-              <MaybeNestedStack
-                options={options}
+              {/**
+               * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
+               * We don't render it conditionally to make it possible to dynamically render a custom `header`
+               * Otherwise dynamically rendering a custom `header` leaves the native header visible
+               *
+               * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
+               */}
+              <HeaderConfig
+                {...options}
                 route={route}
-                presentation={presentation}
+                headerBackButtonMenuEnabled={
+                  isRemovePrevented !== undefined
+                    ? !isRemovePrevented
+                    : headerBackButtonMenuEnabled
+                }
+                headerShown={header !== undefined ? false : headerShown}
                 headerHeight={headerHeight}
+                headerBackTitle={
+                  options.headerBackTitle !== undefined
+                    ? options.headerBackTitle
+                    : undefined
+                }
                 headerTopInsetEnabled={headerTopInsetEnabled}
+                canGoBack={headerBack !== undefined}
+              />
+              <View
+                accessibilityElementsHidden={!focused}
+                importantForAccessibility={
+                  focused ? 'auto' : 'no-hide-descendants'
+                }
+                style={styles.scene}
               >
-                <HeaderBackContext.Provider value={headerBack}>
-                  {render()}
-                </HeaderBackContext.Provider>
-              </MaybeNestedStack>
+                <MaybeNestedStack
+                  options={options}
+                  route={route}
+                  presentation={presentation}
+                  headerHeight={headerHeight}
+                  headerTopInsetEnabled={headerTopInsetEnabled}
+                >
+                  <HeaderBackContext.Provider value={headerBack}>
+                    {render()}
+                  </HeaderBackContext.Provider>
+                </MaybeNestedStack>
+                {header !== undefined && headerShown !== false ? (
+                  <View
+                    onLayout={(e) => {
+                      setCustomHeaderHeight(e.nativeEvent.layout.height);
+                    }}
+                    style={headerTransparent ? styles.absolute : null}
+                  >
+                    {header({
+                      back: headerBack,
+                      options,
+                      route,
+                      navigation,
+                    })}
+                  </View>
+                ) : null}
+              </View>
             </HeaderHeightContext.Provider>
           </HeaderShownContext.Provider>
         </NavigationRouteContext.Provider>
@@ -356,6 +373,7 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
     <ScreenStack style={styles.container}>
       {state.routes.map((route, index) => {
         const descriptor = descriptors[route.key];
+        const isFocused = state.index === index;
         const previousKey = state.routes[index - 1]?.key;
         const nextKey = state.routes[index + 1]?.key;
         const previousDescriptor = previousKey
@@ -367,6 +385,7 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
           <SceneView
             key={route.key}
             index={index}
+            focused={isFocused}
             descriptor={descriptor}
             previousDescriptor={previousDescriptor}
             nextDescriptor={nextDescriptor}
@@ -433,4 +452,14 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  scene: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
 });