# Expo Liquid Glass

> >

- **Type:** Skill
- **Install:** `agentstack add skill-devanshudesai-agent-skills-expo-liquid-glass`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [devanshuDesai](https://agentstack.voostack.com/s/devanshudesai)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [devanshuDesai](https://github.com/devanshuDesai)
- **Source:** https://github.com/devanshuDesai/agent-skills/tree/main/skills/expo-liquid-glass

## Install

```sh
agentstack add skill-devanshudesai-agent-skills-expo-liquid-glass
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Expo Liquid Glass

Ship Liquid Glass UI that feels native, stays legible, and degrades safely across iOS/Android.

## Execution Order

1. Confirm platform/runtime constraints.
2. Check design alignment against HIG buckets (recommended for design-heavy tasks).
3. Pick one primary implementation path (add a second path only if needed).
4. Apply Apple-aligned visual rules before writing code.
5. Implement guarded glass components with explicit fallbacks.
6. Run accessibility and visual QA in both light/dark and clear/tinted appearances.

## 1) Preflight Constraints

- Use Liquid Glass only for **controls/navigation chrome**, not primary content surfaces.
- Treat these APIs as fast-moving: check current Expo SDK docs before finalizing syntax.
- Expect a development build for advanced iOS-native features:
  `expo-glass-effect` and `@expo/ui` are not reliable in Expo Go on iOS.
- Keep scope on Liquid Glass in Expo: use HIG rules to guide implementation, not to redesign unrelated product behavior.

## 2) Design Alignment (Recommended for design-heavy tasks)

For tasks that involve significant visual design decisions, evaluate against these HIG buckets:

1. **Foundations**
   Check materials, color, layout, motion, and accessibility implications.
2. **Patterns**
   Check navigation/search/flow behavior for consistency with system expectations.
3. **Components**
   Check bars, buttons, menus, fields, sidebars, and overlays used by the screen.
4. **Inputs**
   Check touch, gesture, keyboard, and pointer behavior for parity and discoverability.

See `references/apple-liquid-glass-design.md` for practical design guidance.
If a proposed style conflicts with HIG intent, prefer the HIG-consistent option.

## 3) Choose the Primary Path

| Path | Use It For | Tradeoffs |
|---|---|---|
| `expo-glass-effect` | Most RN screens that need glass chips, floating buttons, toolbars, grouped controls | Best default in Expo; must guard runtime availability |
| `@expo/ui` (`Host` + SwiftUI modifiers) | Native SwiftUI composition, advanced glass transitions, coordinated IDs/namespaces | iOS-family only, dev-build workflow, SwiftUI mental model |
| `expo-router/unstable-native-tabs` | System-native Liquid Glass tab bars and iOS 26 nav behavior | Unstable API; syntax differs between SDK 54 and 55 |
| `@callstack/liquid-glass` | Non-Expo RN or teams standardizing on Callstack package | iOS/tvOS focus; also requires fallbacks and runtime checks |

Combine paths when appropriate:
- Use native tabs for navigation chrome.
- Use `expo-glass-effect` for floating controls inside screens.
- Use `@expo/ui` only where SwiftUI-specific behavior is required.

## 4) Apple-Style Design Rules (Critical)

Apply these rules before implementing visuals:

1. Keep hierarchy in layout and spacing, not decorative layers.
2. Group related controls into shared glass clusters; separate unrelated groups with space.
3. Let content run edge-to-edge behind controls so glass has something to refract.
4. Use system controls/material first; customize minimally.
5. Move strong brand color into content/background, not navigation bars.
6. Keep icons/labels high contrast in light, dark, clear, and tinted modes.
7. Avoid full-screen glass sheets; reserve glass for top-level interaction surfaces.

## 5) Implementation Patterns

### Pattern A: Guarded Adaptive Glass Wrapper

```tsx
import { Platform, View } from 'react-native';
import { BlurView } from 'expo-blur';
import { GlassView, isGlassEffectAPIAvailable } from 'expo-glass-effect';

export function AdaptiveGlass({ style, children }) {
  if (isGlassEffectAPIAvailable()) {
    return (
      
        {children}
      
    );
  }

  if (Platform.OS === 'ios') {
    return (
      
        {children}
      
    );
  }

  return {children};
}
```

### Pattern B: Safe `expo-glass-effect` Usage

- Prefer `glassEffectStyle`: `'regular' | 'clear' | 'identity'` as needed.
- Never set `opacity 
  
  Home

```

SDK 54 API:

```tsx

  
  Home

```

Known issue: transparent `NativeTabs` can flash white while pushing screens in some stacks.
Mitigate by setting a background color via `ThemeProvider` (see native-tabs reference).

### Pattern D: SwiftUI Glass with Namespace IDs

Use `@expo/ui` when coordinated glass transitions are needed:

```tsx
import { Host, Namespace, Text } from '@expo/ui/swift-ui';
import { glassEffect, glassEffectID, padding } from '@expo/ui/swift-ui/modifiers';

const ns = new Namespace('glass');

  
    Explore
  
;
```

## 6) Accessibility and Quality Gates

Treat this as required before completion:

- Check `AccessibilityInfo.isReduceTransparencyEnabled()` and provide non-glass fallback.
- Verify legibility over bright, dark, and high-saturation backgrounds.
- Validate both clear and tinted system appearances on iOS 26.
- Keep hit targets and spacing stable during interactive animations.
- Measure scroll performance with and without glass on low-end test devices.

## 7) Common Failure Modes and Fixes

- Double blur in headers:
  Native header blur + custom glass child causes muddy layering. Use a plain translucent View in header accessories.
- Flat-looking glass:
  Solid backgrounds remove refraction cues. Add tonal variation, gradients, or imagery behind the surface.
- Over-customized controls:
  Heavy tint/border/shadow stacks reduce native feel. Start from system defaults, then tune lightly.
- Missing runtime guards:
  Rendering glass APIs unguarded can crash or silently degrade on unsupported builds.
- Version drift:
  Native-tabs and SwiftUI wrappers evolve quickly; check SDK-specific docs before coding.

## 8) Reference Loading Strategy

Load only what is needed for the task:

- `references/expo-ui-swiftui.md`: SwiftUI component mapping, Host layout, modifier patterns.
- `references/native-tabs.md`: Native tab behaviors, migration notes, known issues.
- `references/callstack-liquid-glass.md`: Callstack setup and compatibility tradeoffs.
- `references/apple-liquid-glass-design.md`: Apple-aligned composition, hierarchy, motion, and accessibility rules.

If a request is design-heavy (not API-heavy), prioritize Apple visual rules in this file first,
then pull API syntax from the relevant reference.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [devanshuDesai](https://github.com/devanshuDesai)
- **Source:** [devanshuDesai/agent-skills](https://github.com/devanshuDesai/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-devanshudesai-agent-skills-expo-liquid-glass
- Seller: https://agentstack.voostack.com/s/devanshudesai
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.