Workspace channels with unread badges and live rooms
import * as React from "react";
import { ScrollView, TextInput, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
Easing,
runOnJS,
useAnimatedStyle,
useSharedValue,
withTiming,
} from "react-native-reanimated";
import { Button, EmptyState, Glass, Icon, List, Text, } from "@lumioui/ui";
import { LumioMark, Mount, Press, SEPARATOR_INSET } from "../shared";
export interface Channel {
id: string;
name: string;
/** e.g. "product-design" → shown as "# product-design" */
lastMessage: string;
time: string;
unread?: number;
/** Voice/video rooms get a live badge. */
live?: boolean;
/** Pinned to a Starred section above the channel list. */
starred?: boolean;
}
export interface ChannelsListScreenProps {
workspaceName?: string;
channels?: Channel[];
onChannelPress?: (id: string) => void;
onBack?: () => void;
}
/** Channel glyph colors — the funky Lumio palette, bare (no tinted tiles). */
const CHANNEL_HEXES = ["#5E68E0", "#E8842F", "#3E9AA3", "#EC5C9E", "#7CB94A"];
const DEFAULT_CHANNELS: Channel[] = [
{ id: "c1", name: "announcements", lastMessage: "All-hands moved to Friday", time: "9:12", unread: 3 },
{ id: "c2", name: "product-design", lastMessage: "New tokens are live in Figma", time: "8:47", unread: 12, starred: true },
{ id: "c3", name: "eng-ios", lastMessage: "RC build is green on CI", time: "7:58" },
{ id: "c4", name: "random", lastMessage: "Friday playlist thread", time: "Yesterday" },
{ id: "c5", name: "design-crit", lastMessage: "Live voice room", time: "Now", live: true },
{ id: "c6", name: "marketing", lastMessage: "Launch checklist v3 is up", time: "Yesterday" },
{ id: "c7", name: "support-escalations", lastMessage: "Refund thread needs an owner", time: "Yesterday", unread: 4, starred: true },
{ id: "c8", name: "eng-android", lastMessage: "Gesture repro on Pixel 8", time: "Tue" },
{ id: "c9", name: "data", lastMessage: "Retention dashboard refreshed", time: "Tue" },
{ id: "c10", name: "hiring", lastMessage: "Loop feedback due Friday", time: "Mon" },
{ id: "c11", name: "releases", lastMessage: "2.4.0 phased rollout at 30%", time: "Mon", unread: 2 },
{ id: "c12", name: "watercooler", lastMessage: "Porto offsite photos are up", time: "Sep 20" },
];
/** Channels list — workspace channels with unread badges and a live room. */
export function ChannelsListScreen({
workspaceName = "Lumio Studio",
channels = DEFAULT_CHANNELS,
onChannelPress,
onBack,
}: ChannelsListScreenProps) {
const insets = useSafeAreaInsets();
const [query, setQuery] = React.useState("");
// The search pill expands leftward into a full search bar; `open`
// drives the width, `searching` keeps it mounted until it collapses.
const [searching, setSearching] = React.useState(false);
const [rowW, setRowW] = React.useState(0);
const open = useSharedValue(0);
const inputRef = React.useRef<TextInput>(null);
const openSearch = () => {
setSearching(true);
open.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.cubic) });
};
const closeSearch = () => {
inputRef.current?.blur();
setQuery("");
open.value = withTiming(0, { duration: 260, easing: Easing.in(Easing.cubic) }, (finished) => {
if (finished) runOnJS(setSearching)(false);
});
};
const searchStyle = useAnimatedStyle(() => ({ width: rowW * open.value }));
const chromeStyle = useAnimatedStyle(() => ({ opacity: 1 - open.value }));
React.useEffect(() => {
if (searching) inputRef.current?.focus();
}, [searching]);
const filtered = channels.filter((c) =>
c.name.toLowerCase().includes(query.toLowerCase())
);
const starred = filtered.filter((c) => c.starred);
const rest = filtered.filter((c) => !c.starred);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{ paddingTop: insets.top + 62, paddingBottom: insets.bottom + 48 }}
>
{filtered.length === 0 ? (
<View className="px-8 pt-16">
<EmptyState
variant="search"
title="No channels found"
description={`Nothing matches "${query.trim()}".`}
/>
</View>
) : (
<List inset glass>
{([
["Starred", starred],
["Channels", rest],
] as const).map(([title, list]) =>
list.length === 0 ? null : (
<List.Section key={title} title={title}>
{list.map((ch, ii) => {
const hex = CHANNEL_HEXES[ii % CHANNEL_HEXES.length]!;
return (
<React.Fragment key={ch.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={ch.name}
subtitle={ch.lastMessage}
leading={
<Text className="w-6 text-center text-base font-bold" style={{ color: hex }}>
#
</Text>
}
titleClassName={ch.unread ? "font-semibold" : undefined}
haptic="light"
onPress={() => onChannelPress?.(ch.id)}
trailing={
<View className="items-end gap-1">
<Text variant="small" className="text-muted-foreground">
{ch.time}
</Text>
{ch.live ? (
<View className="flex-row items-center gap-1 rounded-full bg-[#BEF04C] px-2 py-0.5">
<View className="h-1.5 w-1.5 rounded-full bg-[#0B0B0F]" />
<Text className="text-[10px] font-bold text-[#0B0B0F]">Live</Text>
</View>
) : ch.unread ? (
<View className="min-w-5 items-center rounded-full bg-[#1B1B26] px-1.5 py-0.5">
<Text className="text-[10px] font-semibold text-white">{ch.unread}</Text>
</View>
) : undefined}
</View>
}
className="py-3"
/>
</React.Fragment>
);
})}
</List.Section>
),
)}
</List>
)}
{/* Discovery footer — Slack's "browse all channels" escape hatch. */}
<View className="mx-6 flex-row items-center gap-3 rounded-2xl bg-white px-4 py-3.5 dark:bg-[#1A1A20]">
<Icon name="search" size="sm" color="mutedForeground" />
<View className="flex-1">
<Text variant="small" className="font-medium">
Browse channels
</Text>
<Text variant="muted" className="text-xs">
42 more channels in this workspace
</Text>
</View>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</View>
</ScrollView>
{/* Floating chrome — three frosted pills on one line: back, header,
search icon. The list scrolls underneath; tapping search expands
the right pill leftward into a full search bar. */}
<View
className="absolute inset-x-4 z-10"
style={{ top: insets.top + 8 }}
pointerEvents="box-none"
onLayout={(e) => setRowW(e.nativeEvent.layout.width)}
>
<Animated.View style={chromeStyle} className="flex-row items-center gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
<Glass
effect="regular"
className="h-11 flex-1 flex-row items-center gap-2.5 rounded-full px-3"
>
<Mount className="flex-1 flex-row items-center gap-2.5">
<LumioMark size={24} />
<View className="flex-1">
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
{workspaceName}
</Text>
<View className="flex-row items-center gap-1">
<View className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<Text className="text-[10px] text-muted-foreground">
248 members · 31 online
</Text>
</View>
</View>
</Mount>
</Glass>
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Press
haptic="light"
onPress={openSearch}
accessibilityRole="button"
accessibilityLabel="Search channels"
className="h-11 w-11 items-center justify-center"
>
<Icon name="search" size="sm" color="foreground" />
</Press>
</Glass>
</Animated.View>
{/* Expanding search bar — grows leftward out of the icon pill,
covers the row, and takes focus while the list filters live. */}
{searching ? (
<Animated.View
style={searchStyle}
className="absolute right-0 top-0 h-11 overflow-hidden"
>
<View className="h-11 flex-row items-center gap-2" style={{ width: rowW }}>
{/* Solid surface, not Glass — a real input behind the
backdrop-filter material paints its text smeared. */}
<View className="h-11 flex-1 flex-row items-center rounded-full bg-white px-3 dark:bg-[#1A1A20]">
<Icon name="search" size="sm" color="mutedForeground" />
<TextInput
ref={inputRef}
value={query}
onChangeText={setQuery}
placeholder="Search channels"
placeholderTextColor="#8A8A93"
returnKeyType="search"
accessibilityLabel="Search channels"
autoFocus
className="flex-1 px-2 text-base text-foreground outline-none"
/>
</View>
<View className="h-11 w-11 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]">
<Press
haptic="light"
onPress={closeSearch}
accessibilityRole="button"
accessibilityLabel="Close search"
className="h-11 w-11 items-center justify-center"
>
<Icon name="x" size="sm" color="foreground" />
</Press>
</View>
</View>
</Animated.View>
) : null}
</View>
</SafeAreaView>
);
}
ChannelsListScreen.displayName = "ChannelsListScreen";
Recreate the "Channels List Screen" screen in React Native using LumioUI.
Goal: Workspace channels with unread badges and live rooms Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add chat-channels-list
```
Or pull just the components: `npx lumioui add badge button empty-state icon list search-input text`
Native packages:
- @lumioui/ui@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- @lumioui/core@latest
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `badge` — Compact status pill with variants, icons and pulse option.
- imported but not rendered directly — likely used through a sibling or as a utility
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1
### `empty-state` — Illustrated placeholder with title, copy and action slot.
- `<EmptyState>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×6
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1
### `search-input` — Search field with clear button, debounce, focus halo — plus a glass capsule mode that floats over content like iOS 26
- imported but not rendered directly — likely used through a sibling or as a utility
### `text` — Themed type scale from caption to display.
- `<Text>` ×8
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/chat/channels-list.tsx` exporting ChannelsListScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { ScrollView, TextInput, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
Easing,
runOnJS,
useAnimatedStyle,
useSharedValue,
withTiming,
} from "react-native-reanimated";
import { Button, EmptyState, Glass, Icon, List, Text, } from "@lumioui/ui";
import { LumioMark, Mount, Press, SEPARATOR_INSET } from "../shared";
export interface Channel {
id: string;
name: string;
/** e.g. "product-design" → shown as "# product-design" */
lastMessage: string;
time: string;
unread?: number;
/** Voice/video rooms get a live badge. */
live?: boolean;
/** Pinned to a Starred section above the channel list. */
starred?: boolean;
}
export interface ChannelsListScreenProps {
workspaceName?: string;
channels?: Channel[];
onChannelPress?: (id: string) => void;
onBack?: () => void;
}
/** Channel glyph colors — the funky Lumio palette, bare (no tinted tiles). */
const CHANNEL_HEXES = ["#5E68E0", "#E8842F", "#3E9AA3", "#EC5C9E", "#7CB94A"];
const DEFAULT_CHANNELS: Channel[] = [
{ id: "c1", name: "announcements", lastMessage: "All-hands moved to Friday", time: "9:12", unread: 3 },
{ id: "c2", name: "product-design", lastMessage: "New tokens are live in Figma", time: "8:47", unread: 12, starred: true },
{ id: "c3", name: "eng-ios", lastMessage: "RC build is green on CI", time: "7:58" },
{ id: "c4", name: "random", lastMessage: "Friday playlist thread", time: "Yesterday" },
{ id: "c5", name: "design-crit", lastMessage: "Live voice room", time: "Now", live: true },
{ id: "c6", name: "marketing", lastMessage: "Launch checklist v3 is up", time: "Yesterday" },
{ id: "c7", name: "support-escalations", lastMessage: "Refund thread needs an owner", time: "Yesterday", unread: 4, starred: true },
{ id: "c8", name: "eng-android", lastMessage: "Gesture repro on Pixel 8", time: "Tue" },
{ id: "c9", name: "data", lastMessage: "Retention dashboard refreshed", time: "Tue" },
{ id: "c10", name: "hiring", lastMessage: "Loop feedback due Friday", time: "Mon" },
{ id: "c11", name: "releases", lastMessage: "2.4.0 phased rollout at 30%", time: "Mon", unread: 2 },
{ id: "c12", name: "watercooler", lastMessage: "Porto offsite photos are up", time: "Sep 20" },
];
/** Channels list — workspace channels with unread badges and a live room. */
export function ChannelsListScreen({
workspaceName = "Lumio Studio",
channels = DEFAULT_CHANNELS,
onChannelPress,
onBack,
}: ChannelsListScreenProps) {
const insets = useSafeAreaInsets();
const [query, setQuery] = React.useState("");
// The search pill expands leftward into a full search bar; `open`
// drives the width, `searching` keeps it mounted until it collapses.
const [searching, setSearching] = React.useState(false);
const [rowW, setRowW] = React.useState(0);
const open = useSharedValue(0);
const inputRef = React.useRef<TextInput>(null);
const openSearch = () => {
setSearching(true);
open.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.cubic) });
};
const closeSearch = () => {
inputRef.current?.blur();
setQuery("");
open.value = withTiming(0, { duration: 260, easing: Easing.in(Easing.cubic) }, (finished) => {
if (finished) runOnJS(setSearching)(false);
});
};
const searchStyle = useAnimatedStyle(() => ({ width: rowW * open.value }));
const chromeStyle = useAnimatedStyle(() => ({ opacity: 1 - open.value }));
React.useEffect(() => {
if (searching) inputRef.current?.focus();
}, [searching]);
const filtered = channels.filter((c) =>
c.name.toLowerCase().includes(query.toLowerCase())
);
const starred = filtered.filter((c) => c.starred);
const rest = filtered.filter((c) => !c.starred);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{ paddingTop: insets.top + 62, paddingBottom: insets.bottom + 48 }}
>
{filtered.length === 0 ? (
<View className="px-8 pt-16">
<EmptyState
variant="search"
title="No channels found"
description={`Nothing matches "${query.trim()}".`}
/>
</View>
) : (
<List inset glass>
{([
["Starred", starred],
["Channels", rest],
] as const).map(([title, list]) =>
list.length === 0 ? null : (
<List.Section key={title} title={title}>
{list.map((ch, ii) => {
const hex = CHANNEL_HEXES[ii % CHANNEL_HEXES.length]!;
return (
<React.Fragment key={ch.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={ch.name}
subtitle={ch.lastMessage}
leading={
<Text className="w-6 text-center text-base font-bold" style={{ color: hex }}>
#
</Text>
}
titleClassName={ch.unread ? "font-semibold" : undefined}
haptic="light"
onPress={() => onChannelPress?.(ch.id)}
trailing={
<View className="items-end gap-1">
<Text variant="small" className="text-muted-foreground">
{ch.time}
</Text>
{ch.live ? (
<View className="flex-row items-center gap-1 rounded-full bg-[#BEF04C] px-2 py-0.5">
<View className="h-1.5 w-1.5 rounded-full bg-[#0B0B0F]" />
<Text className="text-[10px] font-bold text-[#0B0B0F]">Live</Text>
</View>
) : ch.unread ? (
<View className="min-w-5 items-center rounded-full bg-[#1B1B26] px-1.5 py-0.5">
<Text className="text-[10px] font-semibold text-white">{ch.unread}</Text>
</View>
) : undefined}
</View>
}
className="py-3"
/>
</React.Fragment>
);
})}
</List.Section>
),
)}
</List>
)}
{/* Discovery footer — Slack's "browse all channels" escape hatch. */}
<View className="mx-6 flex-row items-center gap-3 rounded-2xl bg-white px-4 py-3.5 dark:bg-[#1A1A20]">
<Icon name="search" size="sm" color="mutedForeground" />
<View className="flex-1">
<Text variant="small" className="font-medium">
Browse channels
</Text>
<Text variant="muted" className="text-xs">
42 more channels in this workspace
</Text>
</View>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</View>
</ScrollView>
{/* Floating chrome — three frosted pills on one line: back, header,
search icon. The list scrolls underneath; tapping search expands
the right pill leftward into a full search bar. */}
<View
className="absolute inset-x-4 z-10"
style={{ top: insets.top + 8 }}
pointerEvents="box-none"
onLayout={(e) => setRowW(e.nativeEvent.layout.width)}
>
<Animated.View style={chromeStyle} className="flex-row items-center gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
<Glass
effect="regular"
className="h-11 flex-1 flex-row items-center gap-2.5 rounded-full px-3"
>
<Mount className="flex-1 flex-row items-center gap-2.5">
<LumioMark size={24} />
<View className="flex-1">
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
{workspaceName}
</Text>
<View className="flex-row items-center gap-1">
<View className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<Text className="text-[10px] text-muted-foreground">
248 members · 31 online
</Text>
</View>
</View>
</Mount>
</Glass>
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Press
haptic="light"
onPress={openSearch}
accessibilityRole="button"
accessibilityLabel="Search channels"
className="h-11 w-11 items-center justify-center"
>
<Icon name="search" size="sm" color="foreground" />
</Press>
</Glass>
</Animated.View>
{/* Expanding search bar — grows leftward out of the icon pill,
covers the row, and takes focus while the list filters live. */}
{searching ? (
<Animated.View
style={searchStyle}
className="absolute right-0 top-0 h-11 overflow-hidden"
>
<View className="h-11 flex-row items-center gap-2" style={{ width: rowW }}>
{/* Solid surface, not Glass — a real input behind the
backdrop-filter material paints its text smeared. */}
<View className="h-11 flex-1 flex-row items-center rounded-full bg-white px-3 dark:bg-[#1A1A20]">
<Icon name="search" size="sm" color="mutedForeground" />
<TextInput
ref={inputRef}
value={query}
onChangeText={setQuery}
placeholder="Search channels"
placeholderTextColor="#8A8A93"
returnKeyType="search"
accessibilityLabel="Search channels"
autoFocus
className="flex-1 px-2 text-base text-foreground outline-none"
/>
</View>
<View className="h-11 w-11 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]">
<Press
haptic="light"
onPress={closeSearch}
accessibilityRole="button"
accessibilityLabel="Close search"
className="h-11 w-11 items-center justify-center"
>
<Icon name="x" size="sm" color="foreground" />
</Press>
</View>
</View>
</Animated.View>
) : null}
</View>
</SafeAreaView>
);
}
ChannelsListScreen.displayName = "ChannelsListScreen";
```
Screen: https://lumioui.dev/screens/chat-channels-list