Add Liquid Glass to an Expo app

The same components, written for React Native

The Expo registry has 26 items with the names and props of the web library, rewritten for React Native. Like the web components, they install as source you own; there is no Glassy UI runtime package. They need Expo SDK 55 or later and are tested with SDK 57 on iOS, Android and the web. See them on a phone.

iOS 26 and later draw the system’s own Liquid Glass, which bends what lies behind it. Earlier iOS versions and the web blur what lies behind and light the rim; Android blurs the GlassBackdrop the glass sits over. With Reduce Transparency on, every platform draws opaque surfaces.

Set up the registry

shadcn init does not set up Expo apps, so add a components.json at the root of your app. If you already have one, from NativeWind or React Native Reusables, keep it and add the registries entry.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": { "config": "", "css": "", "baseColor": "neutral", "cssVariables": true },
  "aliases": { "components": "@/components", "utils": "@/lib/utils" },
  "registries": {
    "@glassyui-native": "https://glassyui.com/r/native/{name}.json"
  }
}

Keep cssVariables on. With it off, the CLI rewrites every string in the files it installs as if it were a list of Tailwind classes, which breaks colour values such as rgba(255, 255, 255, 0.12).

Install one component

npx shadcn@4.14.1 add @glassyui-native/glass-button

The CLI also adds the packages the component needs, such as expo-blur and expo-glass-effect, at their latest versions. Match them to your Expo SDK:

npx expo install --fix

Expo Go already includes these packages; rebuild your development build after adding them. The files land in components/glassyui, or in src/components/glassyui when your app keeps its code in src. Adjust the imports below to match.

Put glass over something

Glass needs something to bend. GlassBackdrop lays its children over the backdropyou give it: a wallpaper, a photo or the screen’s own content. iOS and the web blur whatever lies behind glass, but Android can only blur a view marked for it, so put the content behind your glass in a backdrop. Outside one, Android glass is a translucent tint.

import { Image } from 'react-native';
import { GlassBackdrop } from '@/components/glassyui/glass-backdrop';
import { GlassButton } from '@/components/glassyui/glass-button';
import { GlassPanel } from '@/components/glassyui/glass-panel';
import { GlassProvider } from '@/components/glassyui/glass-provider';

const wallpaper = require('@/assets/wallpaper.jpg');

export default function Welcome() {
  return (
    <GlassProvider>
      <GlassBackdrop
        backdrop={<Image source={wallpaper} style={{ width: '100%', height: '100%' }} />}
        style={{ flex: 1, justifyContent: 'center', padding: 24 }}
      >
        <GlassPanel>
          <GlassButton variant="prominent" onPress={() => {}}>
            Continue
          </GlassButton>
        </GlassPanel>
      </GlassBackdrop>
    </GlassProvider>
  );
}

A required image takes its own pixel size unless you size it, so give a backdrop image a full width and height.

Follow the device’s settings

GlassProviderfollows the device’s appearance, Reduce Motion and Reduce Transparency settings. Without a provider, each component reads them itself. Choices made with setPreferenceslast while the provider is mounted; save them in your app’s storage if they should survive a restart.

import { GlassSwitch } from '@/components/glassyui/glass-switch';
import { usePreferences } from '@/components/glassyui/glass-provider';

export function ReduceEffects() {
  const { preferences, setPreferences } = usePreferences();

  return (
    <GlassSwitch
      accessibilityLabel="Reduce glass effects"
      checked={preferences.reduceTransparency}
      onCheckedChange={(on) => setPreferences({ reduceMotion: on, reduceTransparency: on })}
    />
  );
}

Components

Each links to its web page, which shows the design. The React Native props keep the same names, except that onPress replaces onClick and style replaces className:

Provider, Surface, Button, Panel, Input, Textarea, Checkbox, Radio Group, Switch, Slider, Segmented Control, Tabs, Badge, Progress, Spinner, Skeleton, Alert, Avatar, Accordion, Dock, Dialog, Sheet, Toast, Menu, Select, Popover.

Where it differs from the web

On Android, dialogs, sheets, menus, selects and popovers open in a window of their own, which the blur cannot see into, so they show their denser overlay tint instead. Toasts appear in a GlassToastViewport you mount once near the root of your app, inside GlassToastProvider.

Menus have no submenus. Checkbox and radio labels are plain text, which screen readers read as the control’s name. Dock items show their label on a long press. A sheet does not scroll by itself, so put long content in a ScrollView.

What stays on the web

Glass Scene and Glass Lens draw their own refraction with WebGL and SVG filters, which React Native does not have; on iOS 26 and later the system glass bends its backdrop instead. Header, tooltip, keyboard keys, breadcrumb, pagination, command menu, laptop mockup and the portfolio starter are web patterns and have no Expo version.