Tabs switch animation delay in iOS 26 #383
Description
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
- Put Tabs Router into Stack router in _layout's hierarchy
- Build with Xcode-beta 26
- 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.tsxRoot _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>
);
}