Liquid Glass in React Native

Apple announced Liquid Glass at WWDC 2025. It's the largest visual change to its systems since iOS 7, and it arrived across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26 and tvOS 26. Interface elements became translucent layers that reflect and refract what's behind them, and they react to it in real time.

Opinions on the look were divided. Everyone agreed it was different. For anyone building apps, that raised two questions. Can my framework render it? And should my app use it?

Native components get it for free

React Native draws its interface with the platform's own components. So an app that used native tabs and navigation got the new look by building with the new Xcode and running on iOS 26. Nothing had to be reimplemented. Evan Bacon, who created Expo Router, was posting working tests within days of the announcement.

Frameworks that paint their own interface are in a different position. They have to rebuild the effect themselves. At the time, Flutter's issue tracker had long threads about blur that failed to render or needed platform-specific workarounds on iOS.

The useful part is the trade-off. When the platform changes its design language, an app built on native components changes with it. An app that draws everything itself has to catch up.

Native tabs with Expo

The quickest way I found was react-native-bottom-tabs, which renders the system's own tab bar. Alberto Moedano published a good video walkthrough of the same setup.

This setup is from the first iOS 26 betas, so check the current docs before following it. You need Xcode with the iOS 26 SDK and an Expo project, managed or bare.

npx expo install expo-build-properties react-native-bottom-tabs @bottom-tabs/react-navigation

Add the plugins to app.json.

{
  "expo": {
    "plugins": [
      "react-native-bottom-tabs",
      ["expo-build-properties", { "ios": { "useFrameworks": "static" } }]
    ]
  }
}

Then rebuild the native project and run it.

npx expo prebuild --clean
npx expo run:ios

With Expo Router, wrap the native navigator so it can be used as a layout.

import { withLayoutContext } from 'expo-router';
import {
  createNativeBottomTabNavigator,
  NativeBottomTabNavigationOptions,
  NativeBottomTabNavigationEventMap,
} from '@bottom-tabs/react-navigation';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';

const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;

export const Tabs = withLayoutContext<
  NativeBottomTabNavigationOptions,
  typeof BottomTabNavigator,
  TabNavigationState<ParamListBase>,
  NativeBottomTabNavigationEventMap
>(BottomTabNavigator);

The glass effect only exists on iOS 26. On older versions the same tab bar renders in the previous style.

Approximating it yourself

For custom surfaces, or for versions before iOS 26, you can get close with three ingredients.

• Blur. Use BlurView from expo-blur or @react-native-community/blur, and adjust the intensity and tint.
• Translucency and depth. Stack views with RGBA overlays and soft shadows.
• Motion. Use Reanimated for transitions that grow and shrink in place, in the way the system's menus do.

Watch the performance. Blur combined with animation is expensive, so keep the blurred layers few and light, and test on older devices.

Should your app use it?

Before adopting the look, I'd ask who it's for. Does it help your users, including the ones on Android? Or does it make the app look like an Apple keynote demo?

If your app uses the system's components, you get the new style in the places where the system applies it, and that's usually enough. Rebuilding the effect everywhere by hand costs performance and upkeep. It's worth that only where it makes the interface clearer.

When the platform changes its look, the apps built from its own components change with it.