Liquid Glass Chat UI for React Native and Expo

Description:

Liquid Glass Chat UI is a React Native and Expo source template with two iOS chat UI cookbooks: Fable and Astra.

Native iOS 26 glass, refractive portrait shaders, and gesture-driven transitions give each cookbook a distinct inbox and conversation flow.

Both run with local sample content and persistent on-device messages. Fable adds folding stories and simulated replies; Astra adds a reversible portrait ribbon, search, filters, and reactions.

Choose a Cookbook

Cookbook	Inbox and conversation behavior	Route
Fable	Three portraits expand into a horizontal story rail; timed stories, grouped message bubbles, and a floating glass composer	`/fable`
Astra	A portrait ribbon fans out from the header; the selected portrait moves into the conversation; search, unread/group filters, mute state, and heart reactions	`/astra`

Run the Expo Project

Use macOS with Node.js 22.13 or newer, Xcode 26 or newer, CocoaPods, and an iOS 26 simulator.

The gallery uses portrait iPhone layouts and requires a native build for Skia, MMKV, and Keyboard Controller.

No environment variables, credentials, remote images, or backend services are required. The ios/ directory is generated from app.json during the native build.

git clone https://github.com/Appllama/liquid-glass-chat-ui.git
cd liquid-glass-chat-ui
npm ci
npm run ios:release

Select the simulator when prompted. For development with Metro, run:

npm run ios

Open either cookbook directly on a booted simulator:

xcrun simctl openurl booted 'liquid-glass-chat://fable'
xcrun simctl openurl booted 'liquid-glass-chat://astra'

Copy a Cookbook into an Existing App

Integrate either cookbook on its own; the gallery is optional. Keep its screens, route adapters, motion helpers, and assets. The exported inbox screens depend on Expo Router and their native providers.

Files	Integration role
`src/cookbooks/fable/`	Fable screens, story UI, theme, hooks, and sample data
`src/app/fable/`	Fable route adapters and native sheets
`src/cookbooks/astra/`	Astra screens, portrait ribbon, flight animations, theme, and data
`src/app/astra/`	Astra route adapters and photo presentation
`src/app/_layout.tsx`	Native providers and asset preloading
`assets/cookbooks/`	Bundled portraits and photographs
`src/cookbooks/NotFound.tsx`	Invalid conversation route handling

For Fable, mount StoryHost once above its navigator, inside the safe-area, Gesture Handler, and Keyboard Controller providers. Preload portraits before showing the inbox.

For Astra, mount GlassFlight once above its navigator. Preserve the photo route’s Close control and disabled gestureEnabled setting so route gestures do not compete with image pinches.

Adapt route URLs to your app and replace sample contacts, artwork, text, and MMKV namespaces. Install missing native packages with npx expo install, then rebuild native code. Keep distinct MMKV namespaces if you integrate both cookbooks.

Glass and Motion

Buttons, sheets, and composers use expo-glass-effect. Photographic portraits use Skia runtime shaders for refraction, edge highlights, and chromatic offsets.

Fable’s story rail follows scroll progress through Reanimated transforms. Astra’s ribbon uses shared gesture progress, release velocity, and an optical-response spring. Keyboard Controller keeps the composer and conversation aligned during interactive keyboard dismissal.

Adjust Astra’s ribbon geometry and spring settings in circleMotion.ts, and portrait travel in flight.ts. Keep the corresponding gesture thresholds consistent when changing either animation.