1import { NativeHeaderToolbar } from "../../native/NativeHeaderToolbar";
2import { NativeThemeHost } from "./NativeThemeHost.android";
3import { HorizontalFloatingToolbar, RNHostView } from "@expo/ui/jetpack-compose";
4import type { ToolbarProps } from "./Toolbar.types";
5
6import { useControlTheme } from "./useControlTheme";
7
8function ToolbarRoot(props: ToolbarProps) {
9 const { colors } = useControlTheme();
10 if (props.placement) return <NativeHeaderToolbar {...props} />;
11 return (
12 <NativeThemeHost
13 matchContents
14 ignoreSafeAreaKeyboardInsets
15 style={{ alignSelf: "center", maxWidth: "100%" }}
16 >
17 <HorizontalFloatingToolbar
18 colors={{
19 toolbarContainerColor: colors["--color-grouped-card"],
20 toolbarContentColor: colors["--color-foreground"],
21 }}
22 >
23 <RNHostView matchContents>{props.children}</RNHostView>
24 </HorizontalFloatingToolbar>
25 </NativeThemeHost>
26 );
27}
28
29export const Toolbar = Object.assign(ToolbarRoot, {
30 Button: NativeHeaderToolbar.Button,
31 Custom: NativeHeaderToolbar.Custom,
32 Label: NativeHeaderToolbar.Label,
33 Menu: NativeHeaderToolbar.Menu,
34 MenuAction: NativeHeaderToolbar.MenuAction,
35 SearchBarSlot: NativeHeaderToolbar.SearchBarSlot,
36 Spacer: NativeHeaderToolbar.Spacer,
37});