| 1 | import { HorizontalFloatingToolbar, Host, RNHostView } from "@expo/ui/jetpack-compose"; |
| 2 | import type { ReactElement } from "react"; |
| 3 | |
| 4 | import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider"; |
| 5 | |
| 6 | /** Native toolbar surface; hosted RN controls retain their existing menus and accessibility. */ |
| 7 | export function MaterialFloatingToolbar(props: { readonly children: ReactElement }) { |
| 8 | const { themeAppearance, themeVariables: colors } = useAppearancePreferences(); |
| 9 | return ( |
| 10 | <Host |
| 11 | matchContents |
| 12 | colorScheme={themeAppearance} |
| 13 | ignoreSafeAreaKeyboardInsets |
| 14 | style={{ alignSelf: "center", maxWidth: "100%" }} |
| 15 | > |
| 16 | <HorizontalFloatingToolbar |
| 17 | colors={{ |
| 18 | toolbarContainerColor: colors["--color-grouped-card"], |
| 19 | toolbarContentColor: colors["--color-foreground"], |
| 20 | }} |
| 21 | > |
| 22 | <RNHostView matchContents>{props.children}</RNHostView> |
| 23 | </HorizontalFloatingToolbar> |
| 24 | </Host> |
| 25 | ); |
| 26 | } |