@expo/ui 56.0.15 → 56.0.16

package/ios/Modifiers/ViewModifierRegistry.swift

@@ -486,6 +486,26 @@ internal struct AccessibilityValueModifier: ViewModifier, Record {
   }
 }
 
+internal struct AccessibilityIdentifierModifier: ViewModifier, Record {
+  @Field var identifier: String?
+
+  func body(content: Content) -> some View {
+    if let identifier = identifier {
+      content.accessibilityIdentifier(identifier)
+    } else {
+      content
+    }
+  }
+}
+
+internal struct AccessibilityHiddenModifier: ViewModifier, Record {
+  @Field var hidden: Bool = true
+
+  func body(content: Content) -> some View {
+    content.accessibilityHidden(hidden)
+  }
+}
+
 internal struct LayoutPriorityModifier: ViewModifier, Record {
   @Field var priority: Double = 0
 
@@ -712,6 +732,22 @@ internal struct ListRowSeparator: ViewModifier, Record {
   }
 }
 
+internal struct ListRowSpacing: ViewModifier, Record {
+  @Field var spacing: Double?
+
+  func body(content: Content) -> some View {
+#if os(iOS)
+    if #available(iOS 15.0, *) {
+      content.listRowSpacing(spacing.map { CGFloat($0) })
+    } else {
+      content
+    }
+#else
+    content
+#endif
+  }
+}
+
 internal enum TextTruncationModeTypes: String, Enumerable {
   case head
   case middle
@@ -1212,14 +1248,7 @@ public class ViewModifierRegistry {
       return text.monospacedDigit()
     case "font":
       guard let modifier = try? FontModifier(from: params, appContext: appContext) else { return text }
-      if let family = modifier.family {
-        return text.font(Font.custom(family, size: modifier.size ?? 17))
-      }
-      return text.font(.system(
-        size: modifier.size ?? 17,
-        weight: modifier.weight?.toSwiftUI() ?? .regular,
-        design: modifier.design?.toSwiftUI() ?? .default
-      ))
+      return text.font(modifier.resolveFont())
     case "foregroundColor":
       guard let modifier = try? ForegroundColorModifier(from: params, appContext: appContext),
             let color = modifier.color else { return text }
@@ -1535,6 +1564,14 @@ extension ViewModifierRegistry {
       return try AccessibilityValueModifier(from: params, appContext: appContext)
     }
 
+    register("accessibilityIdentifier") { params, appContext, _ in
+      return try AccessibilityIdentifierModifier(from: params, appContext: appContext)
+    }
+
+    register("accessibilityHidden") { params, appContext, _ in
+      return try AccessibilityHiddenModifier(from: params, appContext: appContext)
+    }
+
     register("layoutPriority") { params, appContext, _ in
       return try LayoutPriorityModifier(from: params, appContext: appContext)
     }
@@ -1599,6 +1636,10 @@ extension ViewModifierRegistry {
       return try ButtonStyleModifier(from: params, appContext: appContext)
     }
 
+    register("buttonBorderShape") { params, appContext, _ in
+      return try ButtonBorderShapeModifier(from: params, appContext: appContext)
+    }
+
     register("toggleStyle") { params, appContext, _ in
       return try ToggleStyleModifier(from: params, appContext: appContext)
     }
@@ -1627,6 +1668,10 @@ extension ViewModifierRegistry {
       return try ListRowSeparator(from: params, appContext: appContext)
     }
 
+    register("listRowSpacing") { params, appContext, _ in
+      return try ListRowSpacing(from: params, appContext: appContext)
+    }
+
     register("truncationMode") { params, appContext, _ in
       return try TextTruncationMode(from: params, appContext: appContext)
     }
@@ -1703,6 +1748,10 @@ extension ViewModifierRegistry {
       return try FontModifier(from: params, appContext: appContext)
     }
 
+    register("dynamicTypeSize") { params, appContext, _ in
+      return try DynamicTypeSizeModifier(from: params, appContext: appContext)
+    }
+
     register("gridCellUnsizedAxes") { params, appContext, _ in
       return try GridCellUnsizedAxes(from: params, appContext: appContext)
     }

package/ios/SecureFieldView.swift

@@ -70,8 +70,22 @@ private struct StatefulSecureField: View {
   @FocusState.Binding var isFocused: Bool
   let promptText: Text?
 
+  // See `StatefulTextField.userMutatingState` in TextFieldView.swift.
+  @State private var userMutatingState = false
+
+  private var textBinding: Binding<String> {
+    Binding(
+      get: { (state.value as? String) ?? "" },
+      set: { newValue in
+        let current = (state.value as? String) ?? ""
+        guard newValue != current else { return }
+        userMutatingState = true
+        state.value = newValue
+      }
+    )
+  }
+
   var body: some View {
-    let textBinding = state.binding("")
     SecureField(
       promptText == nil ? props.placeholder : "",
       text: textBinding,
@@ -84,10 +98,12 @@ private struct StatefulSecureField: View {
         }
       }
       .onChange(of: state.value as? String) { newValue in
+        guard userMutatingState else { return }
         if let max = props.maxLength, let str = newValue, str.count > max {
           state.value = String(str.prefix(max))
           return
         }
+        userMutatingState = false
         props.onTextChange(["value": newValue])
         props.onTextChangeSync?.invoke(arguments: [newValue])
       }

package/ios/TextFieldView.swift

@@ -123,13 +123,27 @@ private struct StatefulTextField: View {
   @FocusState.Binding var isFocused: Bool
   let promptText: Text?
 
+  // True only while the current `state.value` change came from the user typing.
+  @State private var userMutatingState = false
+
   private var swiftUIAxis: Axis {
     props.axis == .vertical ? .vertical : .horizontal
   }
 
+  private var textBinding: Binding<String> {
+    Binding(
+      get: { (state.value as? String) ?? "" },
+      set: { newValue in
+        let current = (state.value as? String) ?? ""
+        guard newValue != current else { return }
+        userMutatingState = true
+        state.value = newValue
+      }
+    )
+  }
+
   @ViewBuilder
   var textField: some View {
-    let textBinding = state.binding("")
     if #available(iOS 16.0, tvOS 16.0, *) {
       TextField(
         promptText == nil ? props.placeholder : "",
@@ -156,10 +170,12 @@ private struct StatefulTextField: View {
         }
       }
       .onChange(of: state.value as? String) { newValue in
+        guard userMutatingState else { return }
         if let max = props.maxLength, let str = newValue, str.count > max {
           state.value = String(str.prefix(max))
           return
         }
+        userMutatingState = false
         props.onTextChange(["value": newValue])
         props.onTextChangeSync?.invoke(arguments: [newValue])
       }
@@ -184,13 +200,26 @@ private struct StatefulSelectableTextField: View {
   let promptText: Text?
 
   @State private var localSelection: SwiftUI.TextSelection?
+  // See `StatefulTextField.userMutatingState`.
+  @State private var userMutatingState = false
 
   private var swiftUIAxis: Axis {
     props.axis == .vertical ? .vertical : .horizontal
   }
 
+  private var textBinding: Binding<String> {
+    Binding(
+      get: { (state.value as? String) ?? "" },
+      set: { newValue in
+        let current = (state.value as? String) ?? ""
+        guard newValue != current else { return }
+        userMutatingState = true
+        state.value = newValue
+      }
+    )
+  }
+
   var body: some View {
-    let textBinding = state.binding("")
     TextField(
       promptText == nil ? props.placeholder : "",
       text: textBinding,
@@ -221,10 +250,12 @@ private struct StatefulSelectableTextField: View {
       props.onSelectionChange(["start": start, "end": end])
     }
     .onChange(of: state.value as? String) { newValue in
+      guard userMutatingState else { return }
       if let max = props.maxLength, let str = newValue, str.count > max {
         state.value = String(str.prefix(max))
         return
       }
+      userMutatingState = false
       props.onTextChange(["value": newValue])
       props.onTextChangeSync?.invoke(arguments: [newValue])
     }

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.md5

@@ -0,0 +1 @@
+930e8ab7442da199117ed6e88be44b5b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha1

@@ -0,0 +1 @@
+4ed8efb025b6e6c393bc9c3f5f13f3c28bedda50

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha256

@@ -0,0 +1 @@
+869fc2b13a7487be231ecffde437bf73d138786f9d20b04d843c59c2d95f376c

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16-sources.jar.sha512

@@ -0,0 +1 @@
+84b9331a94360a66891a0d1d33f82f6b9e90df27e7b209774b02a9a3732dafa4d58bb800952273b60d2c3a4b5c102dbc03ac418bc6123c33b39da4c515f5c2ea

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.md5

@@ -0,0 +1 @@
+86b861e8240bfa02ed19115b82f2191b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha1

@@ -0,0 +1 @@
+12ad717dbdbff8ac4cf80073d6ce7996265718cc

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha256

@@ -0,0 +1 @@
+d3b7205e40a307e5b1e4c3e9cb1a067fdef2c1b49984e9df3222448c856b55a2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.aar.sha512

@@ -0,0 +1 @@
+0a92657dee5473065082fc5fa71f484a728b7f3a1ef0a8a80144ae17a1c71fffc60a6dd98a8c9e932eca828a2258a29df0529f471a1c6ee4503bc0ff7f46705d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.15/expo.modules.ui-56.0.15.module → 56.0.16/expo.modules.ui-56.0.16.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "56.0.15",
+    "version": "56.0.16",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.15.aar",
-          "url": "expo.modules.ui-56.0.15.aar",
-          "size": 1839545,
-          "sha512": "b0183591c16d8ba78c2d0e6aad2044b660811a5fb2126302a5f746dff169fc93fd4547d4c73ccf35bfefa083fde9819acbf3bb0fa4f6c80869e0d225880047a2",
-          "sha256": "27c02acb624ed6593fe2380e495a636970bc9033ae9cd00132029c7b8ecf899e",
-          "sha1": "7100e52679119435cf14936c7a715d729b763e16",
-          "md5": "790df1c5a23dc1ac9a8521284af9bc15"
+          "name": "expo.modules.ui-56.0.16.aar",
+          "url": "expo.modules.ui-56.0.16.aar",
+          "size": 1884250,
+          "sha512": "0a92657dee5473065082fc5fa71f484a728b7f3a1ef0a8a80144ae17a1c71fffc60a6dd98a8c9e932eca828a2258a29df0529f471a1c6ee4503bc0ff7f46705d",
+          "sha256": "d3b7205e40a307e5b1e4c3e9cb1a067fdef2c1b49984e9df3222448c856b55a2",
+          "sha1": "12ad717dbdbff8ac4cf80073d6ce7996265718cc",
+          "md5": "86b861e8240bfa02ed19115b82f2191b"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-56.0.15.aar",
-          "url": "expo.modules.ui-56.0.15.aar",
-          "size": 1839545,
-          "sha512": "b0183591c16d8ba78c2d0e6aad2044b660811a5fb2126302a5f746dff169fc93fd4547d4c73ccf35bfefa083fde9819acbf3bb0fa4f6c80869e0d225880047a2",
-          "sha256": "27c02acb624ed6593fe2380e495a636970bc9033ae9cd00132029c7b8ecf899e",
-          "sha1": "7100e52679119435cf14936c7a715d729b763e16",
-          "md5": "790df1c5a23dc1ac9a8521284af9bc15"
+          "name": "expo.modules.ui-56.0.16.aar",
+          "url": "expo.modules.ui-56.0.16.aar",
+          "size": 1884250,
+          "sha512": "0a92657dee5473065082fc5fa71f484a728b7f3a1ef0a8a80144ae17a1c71fffc60a6dd98a8c9e932eca828a2258a29df0529f471a1c6ee4503bc0ff7f46705d",
+          "sha256": "d3b7205e40a307e5b1e4c3e9cb1a067fdef2c1b49984e9df3222448c856b55a2",
+          "sha1": "12ad717dbdbff8ac4cf80073d6ce7996265718cc",
+          "md5": "86b861e8240bfa02ed19115b82f2191b"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.15-sources.jar",
-          "url": "expo.modules.ui-56.0.15-sources.jar",
-          "size": 87333,
-          "sha512": "ba1daa456b3e0d92466af0c58b5ddd0bdd0a4c5f06c727bf7d34acd69e78c42187295b575199cefa3b2098d59eeb1ab6fcf2463c339fd6af2a186224a14f505d",
-          "sha256": "01e5734d4e704ab1ff81ad1651eae63e0c5317dbba712328b1721270d303e0cf",
-          "sha1": "cef9c4c1296a5c70d6a61965cba485c2dd802f47",
-          "md5": "2cf329d52090d6202b7a70c1cb7c2a4b"
+          "name": "expo.modules.ui-56.0.16-sources.jar",
+          "url": "expo.modules.ui-56.0.16-sources.jar",
+          "size": 88918,
+          "sha512": "84b9331a94360a66891a0d1d33f82f6b9e90df27e7b209774b02a9a3732dafa4d58bb800952273b60d2c3a4b5c102dbc03ac418bc6123c33b39da4c515f5c2ea",
+          "sha256": "869fc2b13a7487be231ecffde437bf73d138786f9d20b04d843c59c2d95f376c",
+          "sha1": "4ed8efb025b6e6c393bc9c3f5f13f3c28bedda50",
+          "md5": "930e8ab7442da199117ed6e88be44b5b"
         }
       ]
     }

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.module.md5

@@ -0,0 +1 @@
+76b22d8101716780ce269a9c780a39f3

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.module.sha1

@@ -0,0 +1 @@
+a5ec14f774ba7cbc4f094af1684ea54873600661

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.module.sha256

@@ -0,0 +1 @@
+47111fef1e88685da6b2a1018c17235ccf956aa41eb1f8d1fdde4cbe7df86f80

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.module.sha512

@@ -0,0 +1 @@
+9266793e40dca55e2a32d8aea44e3428f82f69f0c0d3f696de7fa38ab9ea5fdaabd237173b0a810e5920eebf3f1d132d38bb058d8ef27061220dccc8aff00727

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.15/expo.modules.ui-56.0.15.pom → 56.0.16/expo.modules.ui-56.0.16.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>56.0.15</version>
+  <version>56.0.16</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.pom.md5

@@ -0,0 +1 @@
+5cf4b923e1b075be2708700c5db82342

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.pom.sha1

@@ -0,0 +1 @@
+49737ff4ff40390e2e7c5828b663ee45ab9556bc

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.pom.sha256

@@ -0,0 +1 @@
+4932698b7ce04c8c5f3fabfbc39b79826395202f6c0cc3ab57f90ff1081a0208

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.16/expo.modules.ui-56.0.16.pom.sha512

@@ -0,0 +1 @@
+ccd7c8e428bea422d337383c18e11ceefad80526b9b8fcf1daa4c5f55bb8008b3426dfaf3fe9ee49bbac0ba2eb347f520a0eee6cc3c8ee71af0ab3203a47ff0d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>56.0.15</latest>
-    <release>56.0.15</release>
+    <latest>56.0.16</latest>
+    <release>56.0.16</release>
     <versions>
-      <version>56.0.15</version>
+      <version>56.0.16</version>
     </versions>
-    <lastUpdated>20260529100208</lastUpdated>
+    <lastUpdated>20260605211303</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-b63599942a3f767839b2ab4661aa9f0b
+06d44b3caa511e0c357fa5a4b97c3867

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-5ed1689c481832ae81351f3296fa74efa0ad8104
+6b09b188d3943a03a462cc08d80212d62490d2b9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-38ac5032a6f49787dcf8f493b77d9546a7d81a06288bac319a98bad6f79ec877
+680aeda3449ab8b21e06cec91465124d63053367f1be0fa5c6b005526a0eccf4

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-7138619d0626a7b454da7b4ffed89dcdc169737955a85beae665e23c404dae52117ae7f1857bdc186018c782c44da47e73912e80e635f2edf60a40cef085a5a9
+3a7cfc9313dacce167a1c0e9ff4519e357d5043205c6c16e47365cf5c5db3ea7b5660c5981e619f5e3d3f2079768975ba35d8eea6adb0d2bd9afd9543a4787d0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.15",
+  "version": "56.0.16",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -95,8 +95,8 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.7",
-    "expo-module-scripts": "56.0.2"
+    "expo": "56.0.9",
+    "expo-module-scripts": "56.0.3"
   },
   "jest": {
     "preset": "expo-module-scripts"
@@ -124,7 +124,7 @@
       "optional": true
     }
   },
-  "gitHead": "a7adc95c1747db1e92655feba56d0e62660098db",
+  "gitHead": "175f1e78e3444ca99ddea473faea6777a0656668",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/State/useNativeState.ts

@@ -71,19 +71,11 @@ type NativeObservableState = {
  * Adds a `value` property that delegates to the native `getValue`/`setValue` functions.
  */
 function defineValueProperty(state: NativeObservableState): void {
-  let warnedOnJSWrite = false;
   Object.defineProperty(state, 'value', {
     get() {
       return state.getValue();
     },
     set(v: unknown) {
-      if (__DEV__ && !warnedOnJSWrite && worklets && !worklets.isUIRuntime()) {
-        warnedOnJSWrite = true;
-        console.warn(
-          'ObservableState.value was set from the JS thread, the result may be unexpected. ' +
-            'Use a worklet to update the state.'
-        );
-      }
       state.setValue({ value: v });
     },
   });

package/src/community/segmented-control/SegmentedControl.ios.tsx

@@ -35,7 +35,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
   };
 
   return (
-    <Host matchContents={{ vertical: true }} style={style}>
+    <Host matchContents={{ vertical: true }} style={style} ignoreSafeArea="all">
       <Picker
         selection={selectedIndex}
         onSelectionChange={handleSelectionChange}

package/src/jetpack-compose/NavigationBar/index.tsx

@@ -0,0 +1,174 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { type ModifierConfig, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers';
+
+type SlotProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+/**
+ * Colors for navigation bar items in different states.
+ */
+export type NavigationBarItemColors = {
+  selectedIconColor?: ColorValue;
+  selectedTextColor?: ColorValue;
+  selectedIndicatorColor?: ColorValue;
+  unselectedIconColor?: ColorValue;
+  unselectedTextColor?: ColorValue;
+  disabledIconColor?: ColorValue;
+  disabledTextColor?: ColorValue;
+};
+
+export type NavigationBarProps = {
+  /**
+   * Background color of the navigation bar.
+   * @default NavigationBarDefaults.containerColor
+   */
+  containerColor?: ColorValue;
+  /**
+   * Preferred content color inside the navigation bar.
+   * @default contentColorFor(containerColor)
+   */
+  contentColor?: ColorValue;
+  /**
+   * Tonal elevation in dp.
+   * @default NavigationBarDefaults.Elevation
+   */
+  tonalElevation?: number;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Navigation bar items.
+   */
+  children?: React.ReactNode;
+};
+
+export type NavigationBarItemProps = {
+  /**
+   * Whether this item is currently selected.
+   */
+  selected: boolean;
+  /**
+   * Callback that is called when the item is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Whether the item is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Whether to always show the label.
+   * @default true
+   */
+  alwaysShowLabel?: boolean;
+  /**
+   * Colors for the item in different states.
+   */
+  colors?: NavigationBarItemColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing `Icon`, `SelectedIcon`, and `Label` slots.
+   */
+  children?: React.ReactNode;
+};
+
+type NativeNavigationBarItemProps = Omit<NavigationBarItemProps, 'onClick'> &
+  ViewEvent<'onButtonPressed', void>;
+
+const NavigationBarNativeView: React.ComponentType<NavigationBarProps> = requireNativeView(
+  'ExpoUI',
+  'NavigationBarView'
+);
+
+const NavigationBarItemNativeView: React.ComponentType<NativeNavigationBarItemProps> =
+  requireNativeView('ExpoUI', 'NavigationBarItemView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+function transformNavigationBarProps(props: NavigationBarProps): NavigationBarProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+function transformNavigationBarItemProps(
+  props: NavigationBarItemProps
+): NativeNavigationBarItemProps {
+  const { modifiers, onClick, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    onButtonPressed: () => onClick?.(),
+  };
+}
+
+/**
+ * Icon slot for `NavigationBarItem`.
+ */
+function NavigationBarItemIcon(props: SlotProps) {
+  return <SlotNativeView slotName="icon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Selected icon slot for `NavigationBarItem`. Falls back to `Icon` when omitted.
+ */
+function NavigationBarItemSelectedIcon(props: SlotProps) {
+  return <SlotNativeView slotName="selectedIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Label slot for `NavigationBarItem`.
+ */
+function NavigationBarItemLabel(props: SlotProps) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A Material Design 3 navigation bar.
+ */
+export function NavigationBar(props: NavigationBarProps) {
+  const { children, ...restProps } = props;
+  return (
+    <NavigationBarNativeView {...transformNavigationBarProps(restProps)}>
+      {children}
+    </NavigationBarNativeView>
+  );
+}
+
+/**
+ * A Material Design 3 navigation bar item. Must be used inside `NavigationBar`.
+ */
+function NavigationBarItemComponent(props: NavigationBarItemProps) {
+  const { children, ...restProps } = props;
+  return (
+    <NavigationBarItemNativeView {...transformNavigationBarItemProps(restProps)}>
+      {children}
+    </NavigationBarItemNativeView>
+  );
+}
+
+NavigationBarItemComponent.Icon = NavigationBarItemIcon;
+NavigationBarItemComponent.SelectedIcon = NavigationBarItemSelectedIcon;
+NavigationBarItemComponent.Label = NavigationBarItemLabel;
+
+export { NavigationBarItemComponent as NavigationBarItem };

package/src/jetpack-compose/index.ts

@@ -41,6 +41,7 @@ export {
 export * from './ToggleButton';
 export * from './Shape';
 export * from './ModalBottomSheet';
+export * from './NavigationBar';
 export * from './Carousel';
 export {
   HorizontalPager,