Liquid Glass Bottom Tabs with React Native Expo - Step by Step | Code with Beto

Learn how to adopt the new Liquid Glass design introduced in iOS 26 into a React Native Expo app. You'll see how to use the React Native Bottom Tabs library by Oscar, which leverages native implementations on iOS and Android for smooth, adaptive bottom tab navigation.

I walk through installing the native bottom tabs package, configuring Expo for static linking, creating a development build, and replacing Expo Router tabs with native bottom tabs. The result is a responsive, visually rich tab bar that adapts to background colors and supports light/dark mode automatically.

What's inside

Introduction to iOS 26 Liquid Glass design and its appeal
Demo of Liquid Glass bottom tabs adapting to background and interaction
Installing React Native Bottom Tabs and React Navigation dependencies
Configuring Expo with plugins and build properties for native bottom tabs
Creating a development build with prebuild commands for native code
Replacing Expo Router tabs with native bottom tabs in the layout
Using native Apple SF Symbols for tab icons with autocomplete
Cleaning up unused dependencies and handling navigation hooks

Introduction to iOS 26 Liquid Glass design and its appeal

Apple’s iOS 26 introduces a new expressive design language called Liquid Glass, which offers a visually stunning, adaptive material effect. It reacts dynamically to backgrounds and user interactions, creating a modern and polished UI experience.

In this video, I focus on bringing this Liquid Glass effect to React Native Expo apps by leveraging native bottom tabs. The design looks amazing once you get used to it, and it’s fully integrated at the native level, so you don’t have to manually handle the blur or color changes.

Demo of Liquid Glass bottom tabs adapting to background and interaction

I show a demo where the bottom tabs fluidly adapt their appearance based on the background behind them. For example, when the background is white, icons appear black, and when the background is dark (like a black dog image), icons switch to white for contrast.

The tabs respond instantly and smoothly to finger drags and taps, changing icon colors and backgrounds with native performance. This reactive behavior is part of the native implementation in iOS 26, providing a polished user experience without extra code.

To use native bottom tabs, you need to install the package by Oscar, which leverages native APIs on iOS and Android. I also install and to integrate with React Navigation.

The commands I use are:

These packages enable native bottom tab navigation with support for the latest iOS 26 features.

Configuring Expo with plugins and build properties for native bottom tabs

Since native code is involved, you must configure Expo to support static linking and native modules. I add the plugin to the plugins array.

Additionally, I install and configure the iOS build to use frameworks by adding in the Expo build properties. This setup ensures the native bottom tabs library is properly linked during builds.

Creating a development build with prebuild commands for native code

Because native code is required, you cannot use the standard Expo Go app. Instead, you create a development build with:

npx expo prebuild --platform ios --clean

This regenerates native iOS folders and installs CocoaPods dependencies. After that, you run:

npx expo run:ios

to build and launch the app with native bottom tabs enabled.

Replacing Expo Router tabs with native bottom tabs in the layout

I replace the default Expo Router tabs with native bottom tabs by copying the official guide code for Expo Router integration from the React Native Bottom Tabs documentation.

This involves importing from Expo Router, creating a , and passing options and types for the tabs. I remove the old export and simplify the layout to only use native tabs.

Using native Apple SF Symbols for tab icons with autocomplete

One cool feature is that you can use native Apple SF Symbols for tab icons with autocomplete support in your code editor. This means you can search and pick any symbol from Apple’s extensive icon set, ensuring your icons look native and consistent.

For example, I pick a dog icon for one tab and a different symbol for another, all fully native and adaptive to the Liquid Glass style.

After switching to native bottom tabs, I remove unused packages like and to keep the project clean.

I also fix an error caused by the hook from the deleted dependencies by removing its imports and adjusting navigation logic. The native tabs handle dark mode and color changes automatically, so manual color scheme code is no longer needed.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Pro membershipPro membership

Access live courses, exclusive tutorials, and private projects including the upcoming Lifur course.

Let's connect!

Liquid Glass Bottom Tabs with React Native Expo - Step by Step