Pressing Tab to Pop to Top Makes Tab Screen Unresponsive After Nested Navigation

[taariqelliott]

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 bottom tabs, navigating into a nested screen within a tab and then pressing the same tab again to popToTop causes that tab’s screen to become unresponsive. The tab press correctly pops the stack back to the top, and other tabs remain clickable, but the UI on the affected tab stops responding to touch input until the app is reloaded. I tested this issue with the expo-router tabs and it worked normally.

Repo: App Directory

You won't be able to see the app not responding but at the end once I pop to the top of the stack the view becomes unresponsive.

compressedvideo.mp4

Library version

1.0.2

Environment info

expo-env-info 2.0.7 environment info:
    System:
      OS: macOS 26.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
      Yarn: 4.9.2 - ~/.nvm/versions/node/v22.12.0/bin/yarn
      npm: 11.5.2 - ~/.nvm/versions/node/v22.12.0/bin/npm
      Watchman: 2025.10.27.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 25.0, iOS 26.0, macOS 26.0, tvOS 26.0, visionOS 26.0, watchOS 26.0
    IDEs:
      Android Studio: 2025.1 AI-251.27812.49.2514.14217341
      Xcode: 26.0/17A321 - /usr/bin/xcodebuild
    npmPackages:
      expo: 54.0.21 => 54.0.21 
      expo-router: 6.0.14 => 6.0.14 
      react: 19.1.0 => 19.1.0 
      react-dom: 19.1.0 => 19.1.0 
      react-native: 0.81.5 => 0.81.5 
      react-native-web: ^0.21.0 => 0.21.1 
    npmGlobalPackages:
      eas-cli: 16.19.1
    Expo Workflow: managed

Steps to reproduce

1. Set up bottom tabs using @bottom-tabs/react-navigation with nested stack screens inside a tab
2. Launch the app
3. Tap a tab (e.g., Home)
4. Navigate to a nested screen inside that tab (e.g., Home -> Details)
5. Tap the same tab again to trigger popToTop behavior (reset stack to root)
6. Observe that the tab returns to the root screen, but the UI on that tab becomes unresponsive to touch
7. Switch to another tab → still works
8. Switch back → still frozen until app reload

Reproducible sample code

import '@/global.css';
import { NAV_THEME, THEME } from '@/lib/theme';
import {
  createNativeBottomTabNavigator,
  NativeBottomTabNavigationEventMap,
  NativeBottomTabNavigationOptions,
} from '@bottom-tabs/react-navigation';
import { ClerkProvider, useAuth } from '@clerk/clerk-expo';
import { tokenCache } from '@clerk/clerk-expo/token-cache';
import { ParamListBase, TabNavigationState, ThemeProvider } from '@react-navigation/native';
import { PortalHost } from '@rn-primitives/portal';
import { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { withLayoutContext } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useColorScheme } from 'nativewind';
import { useEffect } from 'react';
import { LogBox } from 'react-native';
import { createMMKV } from 'react-native-mmkv';

export const storage = createMMKV();
export { ErrorBoundary } from 'expo-router';

LogBox.ignoreLogs(['Open debugger to view warnings.']);

const convexUrl = process.env.EXPO_PUBLIC_CONVEX_URL;
const convex = new ConvexReactClient(convexUrl!);
const clerkKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
const Tabs = withLayoutContext<
  NativeBottomTabNavigationOptions,
  typeof BottomTabNavigator,
  TabNavigationState<ParamListBase>,
  NativeBottomTabNavigationEventMap
>(BottomTabNavigator);

export type ColorSelection = 'light' | 'dark' | undefined;

export default function RootLayout() {
  const { colorScheme, setColorScheme } = useColorScheme();

  const tabBarOptions = {
    tabBarActiveTintColor: colorScheme === 'dark' ? THEME.dark.primary : THEME.light.primary,
  };

  useEffect(() => {
    const storedMode = storage.getString('colorScheme') as ColorSelection;
    if (storedMode && storedMode !== colorScheme) {
      setColorScheme(storedMode);
    }
  }, []);

  useEffect(() => {
    if (colorScheme) {
      storage.set('colorScheme', colorScheme);
    }
  }, [colorScheme]);
  return (
    <ClerkProvider publishableKey={clerkKey} tokenCache={tokenCache} telemetry={false}>
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}>
          <StatusBar style="auto" />
          <Tabs screenOptions={tabBarOptions}>
            <Tabs.Screen
              name="(home)"
              options={{
                title: 'Home',
                tabBarLabel: 'Home',
                tabBarIcon: () => ({ sfSymbol: 'house' }),
              }}
            />
            <Tabs.Screen
              name="discover"
              options={{
                title: 'Discover',
                tabBarLabel: 'Discover',
                tabBarIcon: () => ({ sfSymbol: 'magnifyingglass' }),
              }}
            />
            <Tabs.Screen
              name="create"
              options={{
                title: 'Create',
                tabBarLabel: 'Create',
                tabBarIcon: () => ({ sfSymbol: 'plus' }),
              }}
            />
            <Tabs.Screen
              name="profile"
              options={{
                title: 'Profile',
                tabBarLabel: 'Profile',
                tabBarIcon: () => ({ sfSymbol: 'person' }),
              }}
            />
            <Tabs.Screen
              name="settings"
              options={{
                title: 'Settings',
                tabBarLabel: 'Settings',
                tabBarIcon: () => ({ sfSymbol: 'gearshape.2' }),
              }}
            />
            <Tabs.Screen
              name="(auth)"
              options={{
                tabBarItemHidden: true,
              }}
            />
          </Tabs>
          <PortalHost />
        </ThemeProvider>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}