Expo Router iOS 26 Tutorial: Native Tabs, Toolbars, Zoom Transitions (SDK 55)

Expo SDK 55 brings a new version of Expo Router that unlocks powerful native APIs for React Native apps on iOS 26. I cover native tabs, a flexible stack toolbar, a new bottom accessory, smooth zoom transitions, and a bonus fix for form sheets.

If you want to build apps that feel truly native with system-level animations and UI behaviors, these new APIs are essential. I show practical examples from Inkigo, a real app using these features in production.

What's inside

Expo SDK 55 and Expo Router updates with native API access
Native tabs using the system tab bar on iOS and Android
Stack toolbar with customizable placement and native buttons
Bottom accessory for live activities above the tab bar
Smooth zoom transitions for interactive navigation
Bonus: reliable bottom-aligned actions inside native form sheets
Inkigo app as a real-world example and source code access
Links to blog post, React Native course, and premium resources

Expo SDK 55 and Expo Router updates with native API access

Expo SDK 55 introduces a new Expo Router version that exposes many native APIs you should know about. These APIs let you build UI components that integrate deeply with the platform, providing smooth system animations and native behaviors without hacks.

I emphasize that these features are composable and easy to integrate. If you want to ship high-quality React Native apps with native modules and views, the React Native course and premium resources at codewithbeto.dev cover this in depth.

Native tabs using the system tab bar on iOS and Android

You can now use the system tab bar on both iOS and Android, so your tabs respond to native system behaviors like the liquid glass effect on iOS 26. The Inkigo app uses the minimize behavior prop to hide the tab bar when scrolling down.

In code, you define your tabs layout normally but can customize icons per tab with the selected prop to avoid unwanted overrides. This native tabs support means your app’s tab bar looks and feels like a true platform component.

The new stack toolbar component lets you place buttons, menus, spacers, and custom views natively on the left, right, or bottom of the screen. This replaces hacks for building native headers and footers.

Inkigo uses the toolbar with placement set to right and a yellow tint color to get the iOS 26 glass effect. You can also style button labels. The bottom placement unlocks UI possibilities with animated transitions and interactive elements, including menus or custom views.

Bottom accessory for live activities above the tab bar

iOS 26 introduces a bottom accessory API that attaches a view like Apple Music’s mini player above the tab bar. When the tab bar is minimized, the accessory animates in line with it.

This is ideal for real-time updates or long-running processes, acting like a live activity inside your app. It’s not recommended for static controls; for those, the bottom stack toolbar is a better choice.

Implementation is simple: call native tabs bottom accessory, create a React Native view with pressable elements, and add your content.

Zoom transitions, introduced in iOS 18, create a strong sense of continuity by animating between thumbnails and detail screens. Users can drag and interrupt the transition, making it feel natural.

In Inkigo, zoom transitions connect tattoo thumbnails to detailed views. The code involves calling Apple zoom inside a link and wrapping the target image in an Apple zoom target component. This generates smooth system-level animations with minimal code.

Bonus: reliable bottom-aligned actions inside native form sheets

A recent fix in Expo Router and React Native screens makes bottom-aligned content inside native bottom sheets reliable. Previously, styling and pinning content at the bottom caused layout bugs.

Now you can use regular flex: 1 to pin content, enabling smooth form sheet presentations with no hacks or layout jumps. Inkigo uses this for an easter egg that appears when expanding a signing sheet.

Inkigo app as a real-world example and source code access

Inkigo is a real production app using these new native APIs. It generates over $200 monthly recurring revenue and showcases patterns like native tabs, toolbars, bottom accessories, zoom transitions, and form sheets.

Pro members at codewithbeto.dev get full access to Inkigo’s source code, along with courses, a private GitHub organization, and a Discord community for React Native developers.

Links to blog post, React Native course, and premium resources

For deeper explanations and copy-paste code examples, check the detailed blog post linked in the description. If you want to master React Native and native modules, the React Native course is highly recommended.

I also invites feedback on favorite native APIs and interest in a similar deep dive focused on Android.

Resources

CourseReact Native course

Learn to build high-quality React Native apps with native modules and best practices.

Premium resourcePro membership

Get full access to Inkigo source code, private GitHub, Discord, and all premium resources.

Let's connect!