Liquid Glass & Native Component Architecture

Section 01

Section 02

Every package that contributes to native components, glass, blur, icons, animation or transitions. (Application/data libs like auth, storage and markdown are intentionally omitted.)

Glass, blur & native UI

Icons

Animation, gesture & layout

Navigation, styling & lists

Section 03

Everything glass funnels through universal-glass-view.tsx. The platform decision is made once at module load, so the dead branch is eliminated by the bundler and no per-render feature checks are needed.

import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
import { withUniwind } from "uniwind";

export const StyledGlassView = withUniwind(GlassView);   // className support
export const isGlassAvailable = isLiquidGlassAvailable(); // computed once

export function UniversalGlassView({ glassViewProps, className, viewClassName, ...props }) {
  if (isGlassAvailable) {
    return <StyledGlassView className={className} {...props} {...glassViewProps} />;
  }
  return <View className={cn(className, viewClassName)} {...props} />;
}

Section 04

composedchat-input.tsx — a glass-surfaced input that morphs its trailing button between mic → send → stop, hosts an inline voice recorder, and stays glued to the keyboard.

How it’s built

• Glass surface: the whole field is a UniversalGlassView (rounded-3xl, isInteractive) with a border bg-field fallback for non-glass devices.
• Keyboard: a multiline TextInput; submission dismisses the keyboard via KeyboardController.dismiss() (react-native-keyboard-controller).
• Trailing button morph: mic and send are stacked and cross-faded with EaseView spring transitions (opacity + scale 0.01→1). The “stop / submitting” state swaps in with Reanimated FadeIn/FadeOut.
• Haptics: haptics.tap() on submit and stop.

// mic ⇄ send share one slot and spring between states
const SEND_BUTTON_SPRING = { type: "spring", damping: 18, stiffness: 247, mass: 1 };

<EaseView animate={{ opacity: showMic ? 1 : 0, scale: showMic ? 1 : 0.01 }} transition={SEND_BUTTON_SPRING}>
  <IconButton icon="mic" onPress={voice.start} variant="secondary" />
</EaseView>
<EaseView animate={{ opacity: showSend ? 1 : 0, scale: showSend ? 1 : 0.01 }} style={absoluteFill}>
  <IconButton icon="arrowUp" onPress={handleSubmit} tactile />      // tactile = raised primary
</EaseView>
{isActive && (
  <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
    {status === "submitted" ? <Spinner/> : <IconButton icon="square" onPress={handleStop} tactile/>}
  </Animated.View>
)}

The voice waveform — UI-thread, zero re-renders

voice-input.tsx overlays the text row when recording. The waveform is 40 bars whose heights are driven entirely on the UI thread: a single SharedValue<number[]> holds the rolling sample buffer and each bar reads its own slot inside a worklet, so metering updates at 10–30 Hz never trigger a React render.

// one buffer, each bar is a worklet reading its slot
const samples = useSharedValue<number[]>(new Array(BAR_COUNT).fill(SILENT_DB));

const animatedStyle = useAnimatedStyle(() => ({
  height: BAR_MIN_HEIGHT + normalizeMetering(samples.value[index] ?? SILENT_DB) * BAR_MAX_HEIGHT,
}));

Section 05

Three button families cover the app: a glass button for floating/nav surfaces, a tactile raised button for primary actions, and a plain icon button.

Animated glass + the opacity workaround

The scroll-to-bottom FAB is the clearest example of animating native glass. Opacity isn’t animated on the glass directly — instead a derived value fades a wrapper while glassEffectStyle snaps between "regular" and "none":

// scroll-to-bottom-button.tsx — glass on/off, not opacity
const targetOpacity = useDerivedValue(() => {
  if (!(hasMessages && isListReady.value)) return 0;
  return withTiming(isAtBottom.value ? 0 : 1, { duration: 150 });
});
const glassViewProps = useAnimatedProps((): GlassViewProps => ({
  glassEffectStyle: targetOpacity.value > 0.01 ? "regular" : "none",
}));

Section 06

Day-to-day UI icons are Lucide vectors behind a central registry; native menus use real SF Symbols / Material Symbols via @expo/ui.

composed Lucide registry — the default path

icons.tsx imports ~70 Lucide icons into a typed map and exposes a single LucideIcon (wrapped with withUniwind so it takes Tailwind classes like text-foreground). A missing key falls back to a help icon. Sizes are standardized in iconButtonSizes.

const icons = { home: HomeIcon, search: SearchIcon, mic: MicIcon, arrowUp: ArrowUpIcon, /* …~70 */ }
  satisfies Record<string, React.ComponentType<LucideProps>>;

const BaseIcon = ({ name, strokeWidth = 1.5, ...props }) => {
  const Icon = icons[name] ?? CircleHelpIcon;  // graceful fallback
  return <Icon strokeWidth={strokeWidth} {...props} />;
};
export const LucideIcon = withUniwind(BaseIcon);

native Platform symbols — for native menus only

Inside native MenuViews, icons are chosen per-platform with Icon.select — SF Symbol strings on iOS, lazily-imported Material Symbols XML on Android:

const upvoteIcon = Icon.select({
  ios: "hand.thumbsup",
  android: import("@expo/material-symbols/thumb_up.xml"),
});

Section 07

expo-router on react-native-screens. A guarded root Stack hosts a Drawer for chat history; settings & referrals are formSheet modals; auth is a protected sub-stack. (Again: no tab bar.)

Root: guarded native stack

<Stack screenOptions={{ headerShown: false }}>
  <Stack.Protected guard={hasUser}>
    <Stack.Screen name="(drawer)" />
    <Stack.Screen name="(settings)" options={{ presentation: "formSheet" }} />
  </Stack.Protected>
</Stack>

The drawer + the “card slide” effect

The (drawer)/_layout.tsx uses drawerType="back" (85% width on iOS, full on Android), a full-width swipe edge, freezeOnBlur, and a custom drawerContent. The signature effect — the active screen shrinking into a rounded card as the drawer opens — is ScreenBg reading useDrawerProgress() and morphing borderRadius (0 → 48) and an overlay’s opacity:

// screen-bg.tsx — drawer progress drives the scene morph
const sceneStyle = useAnimatedStyle(() => ({
  borderRadius: progress.value > 0.05 ? 48 : 0,
  borderColor: progress.value > 0.05 ? border : "transparent",
}));
const overlayStyle = useAnimatedStyle(() => ({ opacity: interpolate(progress.value, [0,1], [0,1]) }));

The floating glass header

Instead of a native header bar, each screen overlays a transparent header: a GlassIconButton menu button on the left and the ChatOptionsMenu glass pill on the right. When a chat has messages, a ProgressiveBlurView (top-to-bottom, intensity={10}) fades the content under the header so text scrolls cleanly behind it.

Section 08

nativeContext menus, the bottom sheet and settings rows are real native components bridged through @expo/ui (SwiftUI on iOS, Jetpack Compose on Android) — not JS look-alikes.

Native context menus (MenuView)

Used for chat message actions (upvote/downvote), drawer list items (rename / share / destructive delete) and the settings appearance picker. Long-press or tap opens the system menu; icons come from Icon.select.

<MenuView
  actions={[
    { id: "rename", title: t`Rename`, image: editIcon },
    { id: "delete", title: t`Delete`, image: deleteIcon, attributes: { destructive: true } },
  ]}
  onPressAction={(e) => handle(e.nativeEvent.event)}
  shouldOpenOnLongPress>
  <Link asChild href={`/chat/${chat.id}`}>…</Link>
</MenuView>

The bottom sheet — native, as a compound component

ui/bottom-sheet.tsx wraps @expo/ui/community/bottom-sheet and exposes an ergonomic compound API (Header / Title / Description / Close / Action / Footer) using slot extraction (it walks children and routes them by type). Snap points, dynamic sizing and pan-to-close are native; the close button is a GlassIconButton. The citation modal and message-status sheet build on this same component.

skia The membership card — a GPU canvas showpiece

• Rendering: a Skia Canvas draws a tiled pattern (built via PathBuilder + Matrix), a mihrab motif, the wordmark, Arabic text (ParagraphBuilder, RTL) and monospace labels; the QR back uses react-native-qrcode-skia.
• Tilt & glare: use-card-tilt.ts reads the gyroscope with useAnimatedSensor and a per-frame useFrameCallback applying exponential decay; the glare is a RadialGradient whose center is a useDerivedValue of the tilt, blended in screen mode.
• Flip: withTiming rotates rotateY 0→180° (340 ms, Easing.out(Easing.cubic)) with front/back opacity swapping at the 50% mark; a font-gated fade-in avoids FOUT.

Section 09

Where real glass can’t produce a soft directional fade, the app composes blur by hand. Two reusable primitives do most of the work.

// progressive-blur-view.tsx — mask a blur with an eased gradient
const { colors, locations } = useMemo(() => easeGradient({
  colorStops: {
    [isTopToBottom ? 1 : 0]: { color: colorKit.setAlpha(color, 0).hex() },
    [isTopToBottom ? 0 : 1]: { color: colorKit.setAlpha(color, opacity).hex() },
  },
}), [color, opacity, isTopToBottom]);

<MaskedView maskElement={<LinearGradient colors={colors} locations={locations}/>}>
  <BlurView intensity={intensity} tint={tint} />
</MaskedView>

Morphing techniques in one place

• Glass morph: animate glassEffectStyle "regular" ⇄ "none" (FAB, scroll-to-bottom).
• Blur ramp: masked ease-gradient over BlurView (headers, footers).
• Control morph: stacked EaseView cross-fade + scale (mic ⇄ send) and FadeIn/FadeOut swaps (send ⇄ stop ⇄ spinner).
• Spatial morph: drawer-progress-driven borderRadius + overlay (the screen folds into a card).
• 3D morph: perspective rotateY flip + gyro tilt on the Skia card.

Section 10

The app deliberately runs two animation libraries. Knowing which is which explains nearly every transition in the codebase.

First-message choreography (the marquee transition)

When a chat’s first message is sent, the user bubble springs up from behind the keyboard while fading in; the assistant bubble then fades in only after that animation reports complete. Coordination flows through a ChatScrollContext of shared values (isMessageSendAnimating, isFirstMsgAnimComplete, isAtBottom, isListReady) — not prop drilling.

// use-first-message-animation.ts — instant set, then spring + timed fade
translateY.value = withTiming(start.translateY, { duration: 0 }, () => {
  translateY.value = withSpring(end.translateY, { damping: 28, stiffness: 200, mass: 0.7 });
});
progress.value = withTiming(start.progress, { duration: 0 }, () => {
  progress.value = withTiming(end.progress, { duration, easing: Easing.out(Easing.cubic) });
});

Lists & keyboard

• List: @legendapp/list’s KeyboardAwareLegendList with getItemType recycling; the whole container’s opacity is gated by an EaseView tied to the list’s onLoad (existing chats render at the bottom first, then fade in).
• Keyboard: react-native-keyboard-controller supplies height as a shared value and a scrollMessageToEnd/freeze pair so the list stays pinned while the keyboard animates.
• Gestures: react-native-gesture-handler drives swipe-to-send / swipe-to-dismiss in the empty state; the worklet calls back to JS via scheduleOnRN (react-native-worklets).

Section 11

Section 12

Corrections & clarifications