Liquid glass in React Native and Expo

In short: Use the runnable native/ Expo starter and React Native primitives; iOS 26 can use native GlassView after capability checks, Android API 31+ uses BlurTargetView with BlurView, and unavailable or reduced-transparency cases use an opaque surface. Android frost is not refraction.

Limits: only iOS 26 GlassView bends the backdrop, and the system draws that bend, so the px numbers are visual targets, not props. Android API 31+ and earlier iOS get blur (frost, no bend), everything else an opaque surface; never describe those as refraction. No effect shader (dispersion, caustics, iridescence, morph, liquid metal, border beam) is ported to React Native.

Separate renderer from target platform

web means React DOM with HTML/CSS, browser SVG filters and WebGL. react-native means native View, Text, Pressable, StyleSheet and native modules. React Native targets both Android and iOS; never infer iOS merely from React or mobile. Request create_design_brief with medium react-native and platform android, ios, or android-ios. Search references with renderer react-native to exclude web mockups in phone frames.

Runnable source and installation

The starter is the React Native starter download on your Meniscus account page (paid plans); copy it (or the components you need) into your project. It pins Expo SDK 55 and React Native 0.83.10 (Xcode 26 toolchain). In native/:

• npm ci, then npm run typecheck and npm run test:material (the material decision table).
• Expo Go: npm start, then i / a. Every native module the starter uses ships in Expo Go SDK 55.
• Native build: npm run ios / npm run android (expo run:*: prebuild, CocoaPods or Gradle, install). It needs Xcode or the Android SDK and a UTF-8 locale for CocoaPods (LANG=en_US.UTF-8).

A Metro bundle export is not a native build, and a web screenshot does not prove native support. ?theme=dark, ?page=overview|controls|forms and ?dialog=1 in the app's deep link select a state for screenshots.

Shared implementations live in native/src/components.tsx: GlassButton, GlassIconButton, GlassCard, GlassBadge, GlassAvatar, GlassSeparator, GlassSwitch, GlassCheckbox, GlassTabs, GlassProgress, GlassSlider, GlassStepper, GlassTextField, GlassAccordion, GlassDialog and GlassTabBar. The weather widget is an in-app composition. The remaining component specs are design guidance, not ready-made React Native exports. get_platform_support reports the complete per-component coverage and verification record.

Material selection

native/src/material.ts defines the capability decision, and native/src/GlassSurface.tsx renders it.

• iOS 26+: require both isGlassEffectAPIAvailable() and isLiquidGlassAvailable() before using GlassView. The native system controls refraction and highlights; the web pixel displacement values do not map one-to-one.
• Earlier supported iOS: use BlurView with a tint and rim; this branch is frost, not true refraction.
• Android API 31+: render the backdrop in BlurTargetView before the overlays, and pass its ref as blurTarget to BlurView using blurMethod="dimezisBlurViewSdk31Plus". Keep the blur target outside its own overlays to avoid feedback. This provides blur only, not the iOS Liquid Glass effect.
• Earlier Android or missing blur target: choose an opaque material to retain contrast and predictable performance.
• Respect AccessibilityInfo.isReduceTransparencyEnabled() and its change event. Opaque fallback takes precedence.
• Avoid changing opacity on a native glass view or its ancestors to zero. Keep children legible above the material.

const target = useRef<View>(null);
return <View style={{flex: 1}}>
  <BlurTargetView ref={target} style={StyleSheet.absoluteFill}>
    <Image source={localBackdrop} style={StyleSheet.absoluteFill} />
  </BlurTargetView>
  <BlurView blurTarget={target} blurMethod="dimezisBlurViewSdk31Plus"
    tint="light" intensity={55} style={{borderRadius:24, overflow:'hidden'}}>
    <Text>Collection</Text>
  </BlurView>
</View>;

Use the full GlassSurface wrapper for capability and accessibility checks; the example above shows the Android blur-target relationship only. On iOS 26, glass bodies that should merge (a stepper's two halves, a toolbar group) go inside one GlassContainer spacing={…} from expo-glass-effect. No Skia/WebGL shader port is included. Dispersion, caustics, iridescence, morph, liquid-metal and border-beam web demos must not be advertised as native implementations.

Tokens

native/src/theme.tsx holds the colour tokens of the design language (text, secondary text, accent, danger, dim) with the same values. Its fill is the frost fill, because every non-refracting branch (blur, opaque) is frost; surface is the opaque fallback and the dialog panel. Use colors.accent, never a literal, so both themes stay in step. Shadow tokens are CSS; on native use shadowColor/shadowOpacity/shadowRadius (iOS) and elevation (Android).

Platform behavior and validation

Use safe-area insets for the top content and floating tab bar. Controls need at least 48 dp touch targets, labels, accessibility roles and selected/checked/disabled state. Keep Switch and Slider behavior native. Text fields need keyboard types and scrolling/keyboard avoidance. A React Native Modal must implement onRequestClose for Android back. The shipped dialog deliberately uses an opaque surface for legibility.

Metro bundles for both targets are not enough: launch and interact on both platforms before claiming runtime support, capture real simulator/emulator output, record OS, runtime and material branch, and annotate the renderer as react-native. get_platform_support records what has been verified so far.

Acceptance

• Navigation, text entry, switch, checkbox, slider, stepper bounds and dialog work by touch on both Android and iOS.
• Light and dark, safe areas, keyboard avoidance and Android back dismissal of the dialog.
• Each material branch is reached and looks right: iOS 26 glass, earlier-iOS blur, Android 31+ blur, Android < 31 opaque, and Reduce Transparency opaque. No blur branch is described as refraction.
• The bend and fold checks of the design checklist apply to the iOS 26 glass branch only; judge the blur branches as frost (backdrop detail under every body, rim, legible text).
• No DOM, CSS or WebGL imports in native components; every control has a role, label and state.