Bottom Tabs + React Navigation + nested navigator = super slow

[MateoParodi]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When using:

import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
together with
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Lets say we have 4 bottom tabs:

HomeScreen (with nested navigator inside)
SearchScreen
InboxScreen
AccountScreen

Tapping really fast between the bottom tabs, you will notice that when tapping away of the nested navigator (home) to a normal one (search/inbox/account), it is super slow. But when tapping between normal tabs, it works perfectly fine.

Bug:
https://github.com/user-attachments/assets/4b1da3c8-961b-4044-b3ab-4fd60b52d19e

Working fine:
https://github.com/user-attachments/assets/4349813f-bbdf-4940-a7e3-ac0ed96f4b46

Library version

1.0.2

Environment info

System:
  OS: macOS 26.0.1
  CPU: (14) arm64 Apple M3 Max
  Memory: 998.39 MB / 36.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 20.19.4
    path: ~/.nvm/versions/node/v20.19.4/bin/node
  Yarn:
    version: 1.22.21
    path: /usr/local/bin/yarn
  npm:
    version: 11.4.2
    path: ~/Projects/Gronda/app/node_modules/.bin/npm
  Watchman:
    version: 2024.09.09.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/mateoparodi/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "29"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-32 | Desktop ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-Baklava | Google Play ARM 64 v8a
      - android-TiramisuPrivacySandbox | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13752376
  Xcode:
    version: 26.0/17A324
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/mateoparodi/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Create a simple, small react native app with @bottom-tabs/react-navigation and @react-navigation/native-stack
2. Create 4 tabs
3. In one of the tabs, put a nested navigator.
4. Now tap fast between the bottom tabs, you will notice that when tapping away of the nested navigator to a normal one, is super slow. but when tapping between normal tabs, it works perfectly fine.

Reproducible sample code

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tab = createNativeBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomesScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function HomeStackNavigator({ route }: any) {
  const initialParams = route?.params || {};
  return (
    <Stack.Navigator initialRouteName={routes.HOME} screenOptions={{ headerShown: false }}>
      <Stack.Screen name={routes.HOME} component={HomesScreen} initialParams={initialParams} />
    </Stack.Navigator>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function InboxScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Inbox!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}
export default function App() {

  return (
    <NavigationContainer>
      <Tab.Navigator labeled={false}>
        <Tab.Screen 
          name={'home'}
          component={HomeStackNavigator} // Here is the problem
          options={{ tabBarIcon: () => ({ sfSymbol: 'house' }) }}
        />
        <Tab.Screen
          name={'search'}
          component={SettingsScreen}
          options={{ tabBarIcon: () => ({ sfSymbol: 'magnifyingglass' }) }}
        />
        <Tab.Screen
          name={'inbox'}
          component={InboxScreen}
          options={{ tabBarIcon: () => ({ sfSymbol: 'message' }) }}
        />
        <Tab.Screen
          name={'account'}
          component={ProfileScreen}
          options={{ tabBarIcon: () => ({ sfSymbol: 'person' }) }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

[okwasniewski]

Hey, you are most likely hitting this issue: software-mansion/react-native-screens#3307