fix: check for screens enabled in ScreenContainer

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -13,7 +13,7 @@ import {
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 
 import SafeAreaProviderCompat, {
   initialSafeAreaInsets,
@@ -138,13 +138,14 @@ export default class BottomTabView extends React.Component<Props, State> {
     } = this.props;
     const { routes } = state;
     const { loaded, tabBarHeight } = this.state;
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
 
     return (
       <NavigationHelpersContext.Provider value={navigation}>
         <SafeAreaProviderCompat>
           <ScreenContainer
             // @ts-ignore
-            enabled={detachInactiveScreens}
+            enabled={isScreensEnabled}
             style={styles.container}
           >
             {routes.map((route, index) => {
@@ -166,7 +167,7 @@ export default class BottomTabView extends React.Component<Props, State> {
                   key={route.key}
                   style={StyleSheet.absoluteFill}
                   isVisible={isFocused}
-                  enabled={detachInactiveScreens}
+                  enabled={isScreensEnabled}
                 >
                   <SceneContent
                     isFocused={isFocused}

packages/drawer/src/views/DrawerView.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   BackHandler,
 } from 'react-native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 import {
   NavigationHelpersContext,
   NavigationContext,
@@ -175,9 +175,11 @@ export default function DrawerView({
   };
 
   const renderContent = () => {
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
+
     return (
       // @ts-ignore
-      <ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
+      <ScreenContainer enabled={isScreensEnabled} style={styles.content}>
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
           const { unmountOnBlur } = descriptor.options;
@@ -202,7 +204,7 @@ export default function DrawerView({
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               isVisible={isFocused}
-              enabled={detachInactiveScreens}
+              enabled={isScreensEnabled}
             >
               {headerShown ? (
                 <NavigationContext.Provider value={descriptor.navigation}>

packages/stack/src/views/Stack/CardStack.tsx

@@ -12,6 +12,7 @@ import type {
   Route,
   StackNavigationState,
 } from '@react-navigation/native';
+import { screensEnabled } from 'react-native-screens';
 
 import {
   MaybeScreenContainer,
@@ -489,11 +490,13 @@ export default class CardStack extends React.Component<Props, State> {
         </React.Fragment>
       ) : null;
 
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
+
     return (
       <React.Fragment>
         {isFloatHeaderAbsolute ? null : floatingHeader}
         <MaybeScreenContainer
-          enabled={detachInactiveScreens}
+          enabled={isScreensEnabled}
           style={styles.container}
           onLayout={this.handleLayout}
         >
@@ -613,7 +616,7 @@ export default class CardStack extends React.Component<Props, State> {
               <MaybeScreen
                 key={route.key}
                 style={StyleSheet.absoluteFill}
-                enabled={detachInactiveScreens}
+                enabled={isScreensEnabled}
                 active={isScreenActive}
                 pointerEvents="box-none"
               >