Tabs switch animation delay in iOS 26

[stovv]

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

Hi! I tested repo on the latest iOS 26 beta and found a bug.
When using Tabs inside a Stack navigator, I get this small lag when switching between tabs. It disappears if I place the Tabs navigator in the root layout.

Library version

0.9.2

Environment info

System:
  OS: macOS 26.0
  CPU: (12) arm64 Apple M3 Pro
  Memory: 148.28 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.13.1
    path: ~/.nvm/versions/node/v22.13.1/bin/node
  Yarn:
    version: 4.9.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.13.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/dstavrov/.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"
      - "31"
      - "33"
      - "35"
      - "36"
    Build Tools:
      - 33.0.0
      - 35.0.0
    System Images:
      - android-29 | Google APIs ARM 64 v8a
      - android-36 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.0/17A5241e
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.7
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/dstavrov/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.5
    wanted: 0.79.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.80.1 is now available (your project is running on v0.79.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.80.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.79.5&to=0.80.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

1. Put Tabs Router into Stack router in _layout's hierarchy
2. Build with Xcode-beta 26
3. Run on iOS beta 26

Reproducible sample code

Example with expo-router

File structure

  app/
    (tabs)/
      _layout.tsx
      index.tsx
      settings.tsx
      profile.tsx
    _layout.tsx
    +not-found.tsx

Root _layout.tsx

import { Stack } from 'expo-router';
  
  export default function RootLayout() {
    return (
      <Stack>
        <Stack.Screen 
          name="(tabs)" 
          options={{ headerShown: false }} 
        />
      </Stack>
    );
  }

Tabs _layout.tsx

  import { withLayoutContext } from 'expo-router';
  import React from 'react';
  
  import {
    type NativeBottomTabNavigationEventMap,
    type NativeBottomTabNavigationOptions,
    createNativeBottomTabNavigator,
  } from '@bottom-tabs/react-navigation';
  import type { ParamListBase, TabNavigationState } from '@react-navigation/native';
  
  const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
  
  const Tabs = withLayoutContext<
    NativeBottomTabNavigationOptions,
    typeof BottomTabNavigator,
    TabNavigationState<ParamListBase>,
    NativeBottomTabNavigationEventMap
  >(BottomTabNavigator);
  
  export default function TabLayout() {
    return (
      <Tabs screenOptions={{ lazy: false }}>
        <Tabs.Screen
          name="index"
          options={{
            title: 'Home',
            tabBarIcon: () => ({ sfSymbol: 'house' }),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: 'Profile',
            tabBarIcon: () => ({ sfSymbol: 'person.2' }),
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            title: 'Settings',
            tabBarIcon: () => ({ sfSymbol: 'paperplane' }),
          }}
        />
      </Tabs>
    );
  }

[okwasniewski]

Hey, can you re-test on Beta 3? I've tried it out and it seems much better.

[tryon-dev]

I've also had the same problem since the beginning on my native react app, and unfortunately the problem is also on beta 3.

[ecnivtwelve]

I'm having the same issue on iOS 26 beta 3. Seems to also happen on iPad

[samuelbeaulieu]

The same problem is still happening on iOS 26 beta 4.

[niteshbalusu11]

It's happening in Beta 4 as well.

ScreenRecording_07-25-2025.12-28-42_1.mov

[okwasniewski]

Hey,

Can you try version: 0.10.0-canary-20250719100729? For me the flickering was reduced there

[niteshbalusu11]

@okwasniewski just tried it, the flickering still exists.

[berg-dee]

I'm having the same issues (iOS 26 Beta 4), any idea why this is happening or how we can avoid it?

[okwasniewski]

Hey,

So the main reason this flickering exists is that line: https://github.com/callstackincubator/react-native-bottom-tabs/blob/44dd50d3467a8a6bbec78ba9ff11bdd1cf0b55d1/packages/react-native-bottom-tabs/ios/TabItemEventModifier.swift#L23

If you change it to true, there are no flickers. It's used to intercept events on the native side. So you can call: event.preventDefault() inside of React Navigation handler and the tab won't be selected. It makes the state being fully controlled on the JS side. That's also where the delays come from..

If you are not intercepting the events on the JS side (for example overriding the tab to do something else) you can safely patch this line to return true.

I'll keep you posted about updates on resolving this issue.

[niteshbalusu11]

@okwasniewski i have tested that fix, I think it's better than before but not perfect, i haven't tested a production build but in debug build it does stutter sometimes but not as bad as before.

[berg-dee]

Thanks @okwasniewski for the answer, appreciate it and keeping us informed on updates. I personally am using preventDefault to override for a tab action. But I tried your suggestion anyway and confirmed it fixes the issue.

@niteshbalusu11 What is being discussed here is not whether there is "stuttering" or lag, but the behavior of jumping between the selected tab and the previous (as shown in the original posts video). Like I said I have tried this (on a real phone running the beta 5) and it works flawlessly with the temporary fix, without any lag or stuttering. So you're more likely to have another issue in your code, and it should be handled in another issue thread.