Open History to see the last commit
1import { Activity, useState, type ReactNode } from "react";
2import { View } from "react-native";
3
4/**
5 * Top-level tabs swap in a single frame. A tab mounts on its first visit and then stays mounted
6 * while hidden, so returning to it shows its list as it was left instead of an empty one that
7 * fills in. Hidden tabs keep their state but run no effects, so they register no keyboard
8 * commands, back handlers, or header options.
9 */
10export function WorkspaceTabPanes<Tab extends string>(props: {
11 readonly tabs: readonly Tab[];
12 readonly selected: Tab;
13 readonly renderTab: (tab: Tab) => ReactNode;
14}) {
15 const [visited, setVisited] = useState<readonly Tab[]>(() => [props.selected]);
16 if (!visited.includes(props.selected)) {
17 setVisited([...visited, props.selected]);
18 }
19 return props.tabs.map((tab) =>
20 visited.includes(tab) ? (
21 <Activity key={tab} mode={tab === props.selected ? "visible" : "hidden"}>
22 <View className="flex-1">{props.renderTab(tab)}</View>
23 </Activity>
24 ) : null,
25 );
26}