feat(mobile): expose themed native Android app bars

apps/mobile/package.json

@@ -165,6 +165,7 @@
     "autolinking": {
       "buildFromSource": [
         "@expo/ui",
+        "expo-ui",
         "expo-notifications",
         "react-native-screens",
         "react-native-reanimated",

apps/mobile/src/components/NativeAppBar.android.tsx

@@ -0,0 +1,42 @@
+import { RNHostView, TopAppBar } from "@expo/ui/jetpack-compose";
+import { fillMaxWidth, height } from "@expo/ui/jetpack-compose/modifiers";
+import type { ReactElement } from "react";
+import { NativeThemeHost } from "./NativeThemeHost.android";
+import { useControlTheme } from "./useControlTheme";
+import { useToolbarLayout } from "./useToolbarLayout";
+
+/** Internal renderer. The surrounding screen owns status-bar and sheet insets. */
+export function NativeAppBar(props: {
+  readonly title: ReactElement;
+  readonly navigationIcon?: ReactElement;
+  readonly actions?: ReactElement;
+}) {
+  const { colors } = useControlTheme();
+  const layout = useToolbarLayout();
+  return (
+    <NativeThemeHost matchContents={{ vertical: true }} style={{ width: "100%" }}>
+      <TopAppBar
+        applyWindowInsets={false}
+        modifiers={[fillMaxWidth(), height(Math.max(64, layout.height))]}
+        colors={{
+          containerColor: colors["--color-header"],
+          titleContentColor: colors["--color-header-foreground"],
+          navigationIconContentColor: colors["--color-header-foreground"],
+          actionIconContentColor: colors["--color-header-foreground"],
+        }}
+      >
+        <TopAppBar.Title>{props.title}</TopAppBar.Title>
+        {props.navigationIcon ? (
+          <TopAppBar.NavigationIcon>
+            <RNHostView matchContents>{props.navigationIcon}</RNHostView>
+          </TopAppBar.NavigationIcon>
+        ) : null}
+        {props.actions ? (
+          <TopAppBar.Actions>
+            <RNHostView matchContents>{props.actions}</RNHostView>
+          </TopAppBar.Actions>
+        ) : null}
+      </TopAppBar>
+    </NativeThemeHost>
+  );
+}

apps/mobile/src/features/development/ComponentCatalogScreen.tsx

@@ -1,3 +1,4 @@
+import { NativeAppBarExample } from "./NativeAppBarExample";
 import { Toast } from "../../components/Toast";
 import { Progress } from "../../components/Progress";
 import { useNavigation } from "@react-navigation/native";
@@ -136,6 +137,7 @@ export function ComponentCatalogScreen() {
               </View>
             </View>
             <View className="gap-3">
+              <NativeAppBarExample />
               <AppText className="text-lg font-t3-semibold">Buttons</AppText>
               <View className="flex-row flex-wrap gap-2">
                 <Button label="Primary" tone="primary" onPress={announceAction} />

apps/mobile/src/features/development/NativeAppBarExample.android.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+import { Text } from "@expo/ui/jetpack-compose";
+import { IconButton } from "../../components/IconButton";
+import { NativeAppBar } from "../../components/NativeAppBar.android";
+
+export function NativeAppBarExample() {
+  return (
+    <NativeAppBar
+      title={<Text style={{ fontSize: 21 }}>Native app bar</Text>}
+      navigationIcon={
+        <IconButton icon="arrow.left" accessibilityLabel="Example back" onPress={() => {}} />
+      }
+      actions={
+        <View className="flex-row">
+          <IconButton
+            icon="magnifyingglass"
+            accessibilityLabel="Example search"
+            onPress={() => {}}
+          />
+        </View>
+      }
+    />
+  );
+}

apps/mobile/src/features/development/NativeAppBarExample.tsx

@@ -0,0 +1,4 @@
+/** The Android-only native renderer preview has no iOS counterpart. */
+export function NativeAppBarExample() {
+  return null;
+}

patches/@expo__ui@58.0.11.patch

@@ -1,3 +1,18 @@
+diff --git a/android/src/main/java/expo/modules/ui/ExpoUIModule.kt b/android/src/main/java/expo/modules/ui/ExpoUIModule.kt
+index 8a6a28c566376fe66c3097c4b09b4ada8df9632c..3446becd7aa8d084aaa14dd0583cc90a1d03afe4 100644
+--- a/android/src/main/java/expo/modules/ui/ExpoUIModule.kt
++++ b/android/src/main/java/expo/modules/ui/ExpoUIModule.kt
+@@ -530,6 +530,10 @@ class ExpoUIModule : Module() {
+       }
+     }
+
++    ExpoUIView<TopAppBarProps>("TopAppBarView") {
++      Content { props -> TopAppBarContent(props) }
++    }
++
+     ExpoUIView<HorizontalFloatingToolbarProps>("HorizontalFloatingToolbarView") {
+       Content { props ->
+         HorizontalFloatingToolbarContent(props)
 diff --git a/android/src/main/java/expo/modules/ui/HostView.kt b/android/src/main/java/expo/modules/ui/HostView.kt
 index eac1903ae62f66081211101a0de408215fea6b44..1a3feb98cfb2e6bb38832ae96a22217b990ee888 100644
 --- a/android/src/main/java/expo/modules/ui/HostView.kt
@@ -72,6 +87,59 @@ index eac1903ae62f66081211101a0de408215fea6b44..1a3feb98cfb2e6bb38832ae96a22217b
      val layoutDirection = props.layoutDirection.value.toLayoutDirection()
 
      // Material3's `MaterialTheme` does not provide `LocalContentColor` — only `Surface` does — so
+diff --git a/android/src/main/java/expo/modules/ui/TopAppBarView.kt b/android/src/main/java/expo/modules/ui/TopAppBarView.kt
+new file mode 100644
+index 0000000000000000000000000000000000000000..4ed0132d57fc7aff08ecb7ee84fb8fa48942931b
+--- /dev/null
++++ b/android/src/main/java/expo/modules/ui/TopAppBarView.kt
+@@ -0,0 +1,47 @@
++@file:OptIn(androidx.compose.material3.ExperimentalMaterial3Api::class)
++
++package expo.modules.ui
++
++import android.graphics.Color
++import androidx.compose.foundation.layout.WindowInsets
++import androidx.compose.material3.TopAppBar
++import androidx.compose.material3.TopAppBarDefaults
++import androidx.compose.runtime.Composable
++import expo.modules.kotlin.records.Field
++import expo.modules.kotlin.records.Record
++import expo.modules.kotlin.types.OptimizedRecord
++import expo.modules.kotlin.views.ComposeProps
++import expo.modules.kotlin.views.FunctionalComposableScope
++import expo.modules.kotlin.views.OptimizedComposeProps
++
++@OptimizedRecord
++class TopAppBarColors : Record {
++  @Field val containerColor: Color? = null
++  @Field val titleContentColor: Color? = null
++  @Field val navigationIconContentColor: Color? = null
++  @Field val actionIconContentColor: Color? = null
++}
++
++@OptimizedComposeProps
++data class TopAppBarProps(
++  val colors: TopAppBarColors = TopAppBarColors(),
++  val applyWindowInsets: Boolean = true,
++  val modifiers: ModifierList = emptyList()
++) : ComposeProps
++
++@Composable
++fun FunctionalComposableScope.TopAppBarContent(props: TopAppBarProps) {
++  TopAppBar(
++    title = { Children(UIComposableScope(), filter = { isSlotWithName(it, "title") }) },
++    navigationIcon = { Children(UIComposableScope(), filter = { isSlotWithName(it, "navigationIcon") }) },
++    actions = { Children(UIComposableScope(), filter = { isSlotWithName(it, "actions") }) },
++    colors = TopAppBarDefaults.topAppBarColors(
++      containerColor = props.colors.containerColor.compose,
++      titleContentColor = props.colors.titleContentColor.compose,
++      navigationIconContentColor = props.colors.navigationIconContentColor.compose,
++      actionIconContentColor = props.colors.actionIconContentColor.compose
++    ),
++    windowInsets = if (props.applyWindowInsets) TopAppBarDefaults.windowInsets else WindowInsets(0, 0, 0, 0),
++    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
++  )
++}
 diff --git a/build/jetpack-compose/Host/index.d.ts b/build/jetpack-compose/Host/index.d.ts
 index b586b653a991ce8840b9994a6fe1e6af75480ece..e32f6e093fde22e9cfc9d7ff612cddb59e036945 100644
 --- a/build/jetpack-compose/Host/index.d.ts
@@ -128,6 +196,64 @@ index 3e785c1667bcba137c3369da15aa7b397aa0fb37..80dba6ac4dd6ac8caf53fb7839ff3ed3
                  onLayoutContent: onLayoutContent,
                  layoutDirection: layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight'),
                  ref: mergedRef
+diff --git a/build/jetpack-compose/TopAppBar/index.d.ts b/build/jetpack-compose/TopAppBar/index.d.ts
+new file mode 100644
+index 0000000000000000000000000000000000000000..63afa28d56a9b0260de16d32e08bd7405e2c517d
+--- /dev/null
++++ b/build/jetpack-compose/TopAppBar/index.d.ts
+@@ -0,0 +1,15 @@
++import type { ReactNode } from 'react';
++import type { ColorValue } from 'react-native';
++import type { ExpoModifier } from '../../types';
++export interface TopAppBarProps {
++  children: ReactNode;
++  colors?: { containerColor?: ColorValue; titleContentColor?: ColorValue; navigationIconContentColor?: ColorValue; actionIconContentColor?: ColorValue };
++  applyWindowInsets?: boolean;
++  modifiers?: ExpoModifier[];
++}
++export declare function TopAppBar(props: TopAppBarProps): import('react/jsx-runtime').JSX.Element;
++export declare namespace TopAppBar {
++  var Title: ({ children }: { children: ReactNode }) => import('react/jsx-runtime').JSX.Element;
++  var NavigationIcon: ({ children }: { children: ReactNode }) => import('react/jsx-runtime').JSX.Element;
++  var Actions: ({ children }: { children: ReactNode }) => import('react/jsx-runtime').JSX.Element;
++}
+diff --git a/build/jetpack-compose/TopAppBar/index.js b/build/jetpack-compose/TopAppBar/index.js
+new file mode 100644
+index 0000000000000000000000000000000000000000..95dcb7e59a2072446d45d51f14848075514e651f
+--- /dev/null
++++ b/build/jetpack-compose/TopAppBar/index.js
+@@ -0,0 +1,11 @@
++import { jsx } from 'react/jsx-runtime';
++import { requireNativeView } from 'expo';
++import { createViewModifierEventListener } from '../modifiers/utils';
++const NativeTopAppBar = requireNativeView('ExpoUI', 'TopAppBarView');
++const Slot = requireNativeView('ExpoUI', 'SlotView');
++export function TopAppBar({ modifiers, ...props }) {
++  return jsx(NativeTopAppBar, { ...props, modifiers, ...(modifiers ? createViewModifierEventListener(modifiers) : undefined) });
++}
++TopAppBar.Title = function Title({ children }) { return jsx(Slot, { style: { position: 'absolute' }, slotName: 'title', children }); };
++TopAppBar.NavigationIcon = function NavigationIcon({ children }) { return jsx(Slot, { style: { position: 'absolute' }, slotName: 'navigationIcon', children }); };
++TopAppBar.Actions = function Actions({ children }) { return jsx(Slot, { style: { position: 'absolute' }, slotName: 'actions', children }); };
+diff --git a/build/jetpack-compose/index.d.ts b/build/jetpack-compose/index.d.ts
+index 8597c8f081d9ee31ac312721eb6a407a184f8133..e3661aac95080b6646a93a3f3b8043b0dd206b2d 100644
+--- a/build/jetpack-compose/index.d.ts
++++ b/build/jetpack-compose/index.d.ts
+@@ -52,3 +52,5 @@ export * from './FlowRow';
+ export { useNativeState } from '../State';
+ export type { ViewEvent } from '../types';
+ export type { PrimitiveBaseProps } from './layout-types';
++
++export * from './TopAppBar';
+diff --git a/build/jetpack-compose/index.js b/build/jetpack-compose/index.js
+index bb5dcc76e45eabf2b31447f5c7ae26f507d032ce..a3c6a1b70fd1d39f2c901ea760b62e2144a77f68 100644
+--- a/build/jetpack-compose/index.js
++++ b/build/jetpack-compose/index.js
+@@ -52,3 +52,5 @@ export * from './FlowRow';
+ export { useNativeState } from '../State';
+
+ //# sourceMappingURL=index.js.map
++
++export * from './TopAppBar';
 diff --git a/build/swift-ui/Picker/index.d.ts b/build/swift-ui/Picker/index.d.ts
 index 5a973529c235050062aedcf749c8ff2d25fd7766..01e095bf179ed0d1642f1c50f2c0604f70f842d5 100644
 --- a/build/swift-ui/Picker/index.d.ts
@@ -324,6 +450,50 @@ index c38eb76691942ee8515776cb443cd3b003052db3..ca3b901fc7c31768cce9d7923070332a
            onLayoutContent={onLayoutContent}
            layoutDirection={
              layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
+diff --git a/src/jetpack-compose/TopAppBar/index.tsx b/src/jetpack-compose/TopAppBar/index.tsx
+new file mode 100644
+index 0000000000000000000000000000000000000000..4f2d3ec00db95fb929f08656ebc57056c80267e5
+--- /dev/null
++++ b/src/jetpack-compose/TopAppBar/index.tsx
+@@ -0,0 +1,28 @@
++import { requireNativeView } from 'expo';
++import type { ReactNode, ComponentType } from 'react';
++import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
++import type { ExpoModifier } from '../../types';
++import { createViewModifierEventListener } from '../modifiers/utils';
++
++export interface TopAppBarProps {
++  children: ReactNode;
++  colors?: {
++    containerColor?: ColorValue;
++    titleContentColor?: ColorValue;
++    navigationIconContentColor?: ColorValue;
++    actionIconContentColor?: ColorValue;
++  };
++  /** False when the React Native parent already applies safe-area padding. */
++  applyWindowInsets?: boolean;
++  modifiers?: ExpoModifier[];
++}
++const NativeTopAppBar: ComponentType<TopAppBarProps> = requireNativeView('ExpoUI', 'TopAppBarView');
++const Slot: ComponentType<{ slotName: string; children: ReactNode; style?: StyleProp<ViewStyle> }> = requireNativeView('ExpoUI', 'SlotView');
++
++/** Compose positions the slots; absolute Yoga layout avoids double-counting their offsets. */
++export function TopAppBar({ modifiers, ...props }: TopAppBarProps) {
++  return <NativeTopAppBar {...props} modifiers={modifiers} {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)} />;
++}
++TopAppBar.Title = function Title({ children }: { children: ReactNode }) { return <Slot style={{ position: "absolute" }} slotName="title">{children}</Slot>; };
++TopAppBar.NavigationIcon = function NavigationIcon({ children }: { children: ReactNode }) { return <Slot style={{ position: "absolute" }} slotName="navigationIcon">{children}</Slot>; };
++TopAppBar.Actions = function Actions({ children }: { children: ReactNode }) { return <Slot style={{ position: "absolute" }} slotName="actions">{children}</Slot>; };
+diff --git a/src/jetpack-compose/index.ts b/src/jetpack-compose/index.ts
+index 4e788cf01163a05e5043a36cc852507fe1f0d731..5f0ef493285e966d4f11be15774498df239a7d73 100644
+--- a/src/jetpack-compose/index.ts
++++ b/src/jetpack-compose/index.ts
+@@ -75,3 +75,5 @@ export * from './FlowRow';
+ export { useNativeState } from '../State';
+ export type { ViewEvent } from '../types';
+ export type { PrimitiveBaseProps } from './layout-types';
++
++export * from './TopAppBar';
 diff --git a/src/swift-ui/Picker/index.tsx b/src/swift-ui/Picker/index.tsx
 index ab7d7ceee94cc5755cdb4b708e70600d12532205..ceac7bff6ca71ed7fbfc526d771123e9e8aabd6e 100644
 --- a/src/swift-ui/Picker/index.tsx