fix: fix drawer and bottom tabs not being visible on web. closes #9225

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

@@ -142,51 +142,49 @@ export default class BottomTabView extends React.Component<Props, State> {
     return (
       <NavigationHelpersContext.Provider value={navigation}>
         <SafeAreaProviderCompat>
-          <View style={styles.container}>
-            <ScreenContainer
-              // @ts-ignore
-              enabled={detachInactiveScreens}
-              style={styles.pages}
-            >
-              {routes.map((route, index) => {
-                const descriptor = descriptors[route.key];
-                const { unmountOnBlur } = descriptor.options;
-                const isFocused = state.index === index;
+          <ScreenContainer
+            // @ts-ignore
+            enabled={detachInactiveScreens}
+            style={styles.container}
+          >
+            {routes.map((route, index) => {
+              const descriptor = descriptors[route.key];
+              const { unmountOnBlur } = descriptor.options;
+              const isFocused = state.index === index;
 
-                if (unmountOnBlur && !isFocused) {
-                  return null;
-                }
+              if (unmountOnBlur && !isFocused) {
+                return null;
+              }
 
-                if (lazy && !loaded.includes(route.key) && !isFocused) {
-                  // Don't render a screen if we've never navigated to it
-                  return null;
-                }
+              if (lazy && !loaded.includes(route.key) && !isFocused) {
+                // Don't render a screen if we've never navigated to it
+                return null;
+              }
 
-                return (
-                  <ResourceSavingScene
-                    key={route.key}
-                    style={StyleSheet.absoluteFill}
-                    isVisible={isFocused}
-                    enabled={detachInactiveScreens}
+              return (
+                <ResourceSavingScene
+                  key={route.key}
+                  style={StyleSheet.absoluteFill}
+                  isVisible={isFocused}
+                  enabled={detachInactiveScreens}
+                >
+                  <SceneContent
+                    isFocused={isFocused}
+                    style={sceneContainerStyle}
                   >
-                    <SceneContent
-                      isFocused={isFocused}
-                      style={sceneContainerStyle}
-                    >
-                      <BottomTabBarHeightContext.Provider value={tabBarHeight}>
-                        {descriptor.render()}
-                      </BottomTabBarHeightContext.Provider>
-                    </SceneContent>
-                  </ResourceSavingScene>
-                );
-              })}
-            </ScreenContainer>
-            <BottomTabBarHeightCallbackContext.Provider
-              value={this.handleTabBarHeightChange}
-            >
-              {this.renderTabBar()}
-            </BottomTabBarHeightCallbackContext.Provider>
-          </View>
+                    <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                      {descriptor.render()}
+                    </BottomTabBarHeightContext.Provider>
+                  </SceneContent>
+                </ResourceSavingScene>
+              );
+            })}
+          </ScreenContainer>
+          <BottomTabBarHeightCallbackContext.Provider
+            value={this.handleTabBarHeightChange}
+          >
+            {this.renderTabBar()}
+          </BottomTabBarHeightCallbackContext.Provider>
         </SafeAreaProviderCompat>
       </NavigationHelpersContext.Provider>
     );
@@ -198,9 +196,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
-  pages: {
-    flex: 1,
-  },
   content: {
     flex: 1,
   },

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

@@ -41,32 +41,35 @@ export default function ResourceSavingScene({
     }
   }
 
-  return (
-    <View
-      // @ts-expect-error: hidden exists on web, but not in React Native
-      hidden={!isVisible}
-      style={[
-        styles.container,
-        Platform.OS === 'web' ? { display: isVisible ? 'flex' : 'none' } : null,
-        style,
-      ]}
-      collapsable={false}
-      removeClippedSubviews={
-        // On iOS, set removeClippedSubviews to true only when not focused
-        // This is an workaround for a bug where the clipped view never re-appears
-        Platform.OS === 'ios' ? !isVisible : true
-      }
-      pointerEvents={isVisible ? 'auto' : 'none'}
-      {...rest}
-    >
+  if (Platform.OS === 'web') {
+    return (
       <View
-        style={
-          Platform.OS === 'web'
-            ? null
-            : isVisible
-            ? styles.attached
-            : styles.detached
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!isVisible}
+        style={[
+          { display: isVisible ? 'flex' : 'none' },
+          styles.container,
+          style,
+        ]}
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <View
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' ? !isVisible : true
         }
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        style={isVisible ? styles.attached : styles.detached}
       >
         {children}
       </View>

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -41,34 +41,35 @@ export default function ResourceSavingScene({
     }
   }
 
-  return (
-    <View
-      // @ts-expect-error: hidden exists on web, but not in React Native
-      hidden={!isVisible}
-      style={[
-        styles.container,
-        Platform.OS === 'web'
-          ? { display: isVisible ? 'flex' : 'none' }
-          : { overflow: 'hidden' },
-        style,
-      ]}
-      collapsable={false}
-      removeClippedSubviews={
-        // On iOS, set removeClippedSubviews to true only when not focused
-        // This is an workaround for a bug where the clipped view never re-appears
-        Platform.OS === 'ios' ? !isVisible : true
-      }
-      pointerEvents={isVisible ? 'auto' : 'none'}
-      {...rest}
-    >
+  if (Platform.OS === 'web') {
+    return (
       <View
-        style={
-          Platform.OS === 'web'
-            ? null
-            : isVisible
-            ? styles.attached
-            : styles.detached
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!isVisible}
+        style={[
+          { display: isVisible ? 'flex' : 'none' },
+          styles.container,
+          style,
+        ]}
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <View
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' ? !isVisible : true
         }
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        style={isVisible ? styles.attached : styles.detached}
       >
         {children}
       </View>