feat: add detachInactiveScreens prop for bottom tabs and drawer (#8816)

packages/drawer/src/types.tsx

@@ -69,6 +69,7 @@ export type NavigationDrawerConfig = {
   drawerBackgroundColor?: ThemedColor;
   overlayColor?: ThemedColor;
   screenContainerStyle?: StyleProp<ViewStyle>;
+  detachInactiveScreens?: boolean;
 };
 
 export type NavigationDrawerRouterConfig = {

packages/drawer/src/views/DrawerView.tsx

@@ -49,6 +49,7 @@ type Props = {
     contentOptions?: object;
   };
   screenProps: unknown;
+  detachInactiveScreens: boolean;
 };
 
 type State = {
@@ -166,7 +167,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
   };
 
   private renderContent = () => {
-    let { lazy, navigation } = this.props;
+    let { lazy, navigation, detachInactiveScreens = true } = this.props;
     let { loaded } = this.state;
     let { routes } = navigation.state;
 
@@ -183,7 +184,8 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       );
     } else {
       return (
-        <ScreenContainer style={styles.content}>
+        // @ts-ignore
+        <ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
           {routes.map((route, index) => {
             if (lazy && !loaded.includes(index)) {
               // Don't render a screen if we've never navigated to it
@@ -201,6 +203,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
                   { opacity: isFocused ? 1 : 0 },
                 ]}
                 isVisible={isFocused}
+                enabled={detachInactiveScreens}
               >
                 <SceneView
                   navigation={descriptor.navigation}

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -6,6 +6,7 @@ type Props = {
   isVisible: boolean;
   children: React.ReactNode;
   style?: any;
+  enabled: boolean;
 };
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
@@ -13,7 +14,7 @@ const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
     // react-native-screens is buggy on web
-    if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (screensEnabled?.() && this.props.enabled && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
       // @ts-ignore

packages/tabs/src/navigators/createBottomTabNavigator.tsx

@@ -20,6 +20,7 @@ type Config = {
   lazy?: boolean;
   tabBarComponent?: React.ComponentType<any>;
   tabBarOptions?: BottomTabBarOptions;
+  detachInactiveScreens?: boolean;
 };
 
 type Props = NavigationViewProps &
@@ -131,13 +132,19 @@ class TabNavigationView extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { navigation, renderScene, lazy } = this.props;
+    const {
+      navigation,
+      renderScene,
+      lazy,
+      detachInactiveScreens = true,
+    } = this.props;
     const { routes } = navigation.state;
     const { loaded } = this.state;
 
     return (
       <View style={styles.container}>
-        <ScreenContainer style={styles.pages}>
+        {/* @ts-ignore */}
+        <ScreenContainer enabled={detachInactiveScreens} style={styles.pages}>
           {routes.map((route, index) => {
             if (lazy && !loaded.includes(index)) {
               // Don't render a screen if we've never navigated to it
@@ -151,6 +158,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
                 key={route.key}
                 style={StyleSheet.absoluteFill}
                 isVisible={isFocused}
+                enabled={detachInactiveScreens}
               >
                 {renderScene({ route })}
               </ResourceSavingScene>

packages/tabs/src/types.tsx

@@ -149,6 +149,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
   isLandscape: boolean;
   jumpTo: (key: string) => void;
   screenProps: unknown;
+  detachInactiveScreens?: boolean;
 };
 
 export type MaterialTabBarOptions = {

packages/tabs/src/views/ResourceSavingScene.tsx

@@ -6,6 +6,7 @@ type Props = {
   isVisible: boolean;
   children: React.ReactNode;
   style?: any;
+  enabled: boolean;
 };
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
@@ -13,7 +14,7 @@ const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
     // react-native-screens is buggy on web
-    if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (screensEnabled?.() && this.props.enabled && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
       // @ts-ignore