🚨 CRITICAL BUG REPORT: React Navigation Bottom Tabs Rendering Multiple Tab Components Simultaneously

[adey69]

Current behavior

React Navigation bottom tabs are incorrectly rendering multiple tab components simultaneously, causing visual layering issues where elements from inactive tabs appear behind active tabs.

Environment
React Native Version: 0.80.1
React Navigation Bottom Tabs: ^7.4.2
React Navigation Native: ^7.1.14
React Navigation Stack: ^7.4.2
Platform: iOS
Node Version: >=18

I have created a repo to reproduce the issue but it's not exactly producing it the same way as shown in images. Instead, the element inspector shows the inactive tab's components when trying to select an element on the first tab.

Expected behavior

The inactive tab's component shouldn't be visible with transparent background on active tab. Neither should the inactive tab's components should be shown or selected in element inspector.

Reproduction

https://github.com/adey69/bottom-tabs-render-issue

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

I've removed the packages that I don't use

package	version
@react-navigation/native	7.1.18
@react-navigation/bottom-tabs	7.5.0
@react-navigation/material-top-tabs	7.3.9
@react-navigation/stack	7.5.0
react-native-screens	4.18.0
react-native-safe-area-context	5.6.1
react-native-gesture-handler	2.29.0
react-native-reanimated	4.1.3
react-native	0.80.1
node	22.16.0
yarn	1.22.22

[damithg-dev]

Similar issue is reported on here as well: #12824

[damithg-dev]

I've create a patch for it.

diff --git a/node_modules/@react-navigation/bottom-tabs/src/views/ScreenFallback.tsx b/node_modules/@react-navigation/bottom-tabs/src/views/ScreenFallback.tsx
index 9b7580d..5c17546 100644
--- a/node_modules/@react-navigation/bottom-tabs/src/views/ScreenFallback.tsx
+++ b/node_modules/@react-navigation/bottom-tabs/src/views/ScreenFallback.tsx
@@ -34,6 +34,10 @@ export const MaybeScreenContainer = ({
 };
 
 export function MaybeScreen({ visible, children, ...rest }: Props) {
+  if(!visible){
+    return
+  }
+
   if (Screens?.screensEnabled?.()) {
     return (
       <Screens.Screen activityState={visible ? 2 : 0} {...rest}>

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-tab-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 7.1.18, latest: 7.1.21)
• @react-navigation/bottom-tabs (found: 7.5.0, latest: 7.8.6)
• @react-navigation/material-top-tabs (found: 7.3.9, latest: 7.4.4)
• @react-navigation/stack (found: 7.5.0, latest: 7.6.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 7.1.18, latest: 7.1.21)
• @react-navigation/bottom-tabs (found: 7.5.0, latest: 7.8.6)
• @react-navigation/material-top-tabs (found: 7.3.9, latest: 7.4.4)
• @react-navigation/stack (found: 7.5.0, latest: 7.6.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[AndreiCalazans]

The source of the issues was well explained here: software-mansion/react-native-screens#3072

Kacper Kafara explained how the children array used by the bottom-tabs causes the shadow tree to diverge from the host tree.

It seems like we should just disable enable RN screens for the bottom tabs while in DEV. From what I gathered the underlying mechanism used to look up inspection data does not impact app usage, from inspecting the UI hireachy in the native host tree it does not show duplicate layers getting rendered.

Returning null when not visible will actually change production behavior and will result in bottom tabs without the react-native-screens usage which is not ideal.