1import { RNHostView, TopAppBar } from "@expo/ui/jetpack-compose";
2import { fillMaxWidth, height } from "@expo/ui/jetpack-compose/modifiers";
3import type { ReactElement } from "react";
4import { NativeThemeHost } from "./NativeThemeHost.android";
5import { useControlTheme } from "./useControlTheme";
6import { useToolbarLayout } from "./useToolbarLayout";
7
8/** Internal renderer. The surrounding screen owns status-bar and sheet insets. */
9export function NativeAppBar(props: {
10 readonly title: ReactElement;
11 readonly navigationIcon?: ReactElement;
12 readonly actions?: ReactElement;
13 /** Compose nodes laid out by the bar itself, so they never wait on a React Native measure. */
14 readonly nativeActions?: ReactElement;
15}) {
16 const { colors } = useControlTheme();
17 const layout = useToolbarLayout();
18 return (
19 // The bar's height is fixed, so React Native lays out the screen below it from the first frame
20 // instead of at zero height until Compose has measured and reported the bar.
21 <NativeThemeHost style={{ width: "100%", height: layout.height }}>
22 <TopAppBar
23 windowInsets={{}}
24 // Every header shares the list toolbar's height, so titles line up across panes.
25 modifiers={[fillMaxWidth(), height(layout.height)]}
26 colors={{
27 containerColor: colors["--color-header"],
28 titleContentColor: colors["--color-header-foreground"],
29 navigationIconContentColor: colors["--color-header-foreground"],
30 actionIconContentColor: colors["--color-header-foreground"],
31 }}
32 >
33 <TopAppBar.Title>{props.title}</TopAppBar.Title>
34 {props.navigationIcon ? (
35 <TopAppBar.NavigationIcon>
36 <RNHostView matchContents>{props.navigationIcon}</RNHostView>
37 </TopAppBar.NavigationIcon>
38 ) : null}
39 {props.actions || props.nativeActions ? (
40 <TopAppBar.Actions>
41 {props.nativeActions}
42 {props.actions ? <RNHostView matchContents>{props.actions}</RNHostView> : null}
43 </TopAppBar.Actions>
44 ) : null}
45 </TopAppBar>
46 </NativeThemeHost>
47 );
48}