@expo/ui 1.0.0-canary-20250306-d9d3e02 → 1.0.0-canary-20250331-817737a

package/CHANGELOG.md

@@ -8,6 +8,10 @@
 
 ### 🎉 New features
 
+- [iOS] Add bottom sheet. ([#35455](https://github.com/expo/expo/pull/35455) by [@aleqsio](https://github.com/aleqsio))
+- [iOS] Add support for `pallete` and `inline` pickers. ([#35435](https://github.com/expo/expo/pull/35435) by [@aleqsio](https://github.com/aleqsio))
+- Add TextInput for Android. ([#35228](https://github.com/expo/expo/pull/35228) by [@aleqsio](https://github.com/aleqsio))
+- Add context menu previews. ([#35369](https://github.com/expo/expo/pull/35369) by [@aleqsio](https://github.com/aleqsio)).
 - Add TextInput for iOS. ([#35098](https://github.com/expo/expo/pull/35098) by [@aleqsio](https://github.com/aleqsio))
 - Add `disabled` button prop. ([#35115](https://github.com/expo/expo/pull/35115) by [@andrew-levy](https://github.com/andrew-levy))
 - Add Radio option to Picker Component for Android. ([#34629](https://github.com/expo/expo/pull/34629)) by [@benjaminkomen](https://github.com/benjaminkomen)
@@ -15,6 +19,7 @@
 - Adds `DateTimePicker` component. ([#34883](https://github.com/expo/expo/pull/34883) by [@alanjhughes](https://github.com/alanjhughes))
 - Add CircularProgress and LinearProgress component. ([#34907](https://github.com/expo/expo/pull/34907) by [@janicduplessis](https://github.com/janicduplessis))
 - Add Gauge component ([#35032](https://github.com/expo/expo/pull/35032) by [@jakex7](https://github.com/jakex7))
+- Add List and Label component ([#35222](https://github.com/expo/expo/pull/35222) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
 
 ### 🐛 Bug fixes
 
@@ -24,6 +29,7 @@
 
 - Drop section polyfill for Android ([#35305](https://github.com/expo/expo/pull/35305) by [@aleqsio](https://github.com/aleqsio))
 - Standardize platform key ordering in `expo-module.config.json`. ([#35003](https://github.com/expo/expo/pull/35003) by [@reichhartd](https://github.com/reichhartd))
+- Dismiss context menu when a menu item is tapped on Android ([#35365](https://github.com/expo/expo/pull/35365) by [@fobos531](https://github.com/fobos531))
 
 ## 0.0.2 — 2025-02-11
 
@@ -48,6 +54,7 @@
 - Add docs ([#34808](https://github.com/expo/expo/pull/34808) by [@aleqsio](https://github.com/aleqsio))
 - [apple] Migrate remaining `expo-module.config.json` to unified platform syntax. ([#34445](https://github.com/expo/expo/pull/34445) by [@reichhartd](https://github.com/reichhartd))
 - Rename the events for the `Switch` component. ([#34577](https://github.com/expo/expo/pull/34577) by [@behenate](https://github.com/behenate))
+- Allow lower case section titles ([#35113](https://github.com/expo/expo/pull/35113) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
 
 ## 0.0.1 — 2025-01-21
 

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -40,5 +40,9 @@ class ExpoUIModule : Module() {
     }
 
     View(ProgressView::class)
+
+    View(TextInputView::class)  {
+      Events("onValueChanged")
+    }
   }
 }

package/android/src/main/java/expo/modules/ui/PickerView.kt

@@ -161,6 +161,9 @@ class PickerView(context: Context, appContext: AppContext) : ExpoComposeView<Pic
         SegmentedComposable()
       } else if (variant == "radio") {
         RadioComposable()
+      } else {
+        // Default to segmented picker
+        SegmentedComposable()
       }
     }
   }

package/android/src/main/java/expo/modules/ui/TextInputView.kt

@@ -0,0 +1,75 @@
+package expo.modules.ui
+
+import android.content.Context
+import androidx.compose.foundation.text.KeyboardOptions
+
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoComposeView
+
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ComposeProps
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.input.KeyboardType
+import expo.modules.kotlin.views.AutoSizingComposable
+import expo.modules.kotlin.views.Direction
+import java.util.EnumSet
+
+
+data class TextInputProps(
+  val defaultValue: MutableState<String> = mutableStateOf(""),
+  val placeholder: MutableState<String> = mutableStateOf(""),
+  val multiline: MutableState<Boolean> = mutableStateOf(false),
+  val numberOfLines: MutableState<Int?> = mutableStateOf(null),
+  val keyboardType: MutableState<String> = mutableStateOf("default"),
+  val autocorrection: MutableState<Boolean> = mutableStateOf(true),
+) : ComposeProps
+
+fun String.keyboardType(): KeyboardType {
+  return when (this) {
+    "default" -> KeyboardType.Text
+    "numeric" -> KeyboardType.Number
+    "email-address" -> KeyboardType.Email
+    "phone-pad" -> KeyboardType.Phone
+    "decimal-pad" -> KeyboardType.Decimal
+    "password" -> KeyboardType.Password
+    "ascii-capable" -> KeyboardType.Ascii
+    "url" -> KeyboardType.Uri
+    "number-password" -> KeyboardType.NumberPassword
+    else -> KeyboardType.Text
+  }
+}
+
+class TextInputView(context: Context, appContext: AppContext) : ExpoComposeView<TextInputProps>(context, appContext) {
+  override val props = TextInputProps()
+  private val onValueChanged by EventDispatcher()
+
+  init {
+    setContent {
+      var value by remember { props.defaultValue }
+      AutoSizingComposable(shadowNodeProxy, axis = EnumSet.of(Direction.VERTICAL)) {
+        TextField(
+          value = value,
+          onValueChange = {
+            value = it
+            onValueChanged(mapOf("value" to it))
+          },
+          placeholder = { Text(props.placeholder.value) },
+          maxLines = if (props.multiline.value) props.numberOfLines.value ?: Int.MAX_VALUE else 1,
+          singleLine = !props.multiline.value,
+          keyboardOptions = KeyboardOptions.Default.copy(
+            keyboardType = props.keyboardType.value.keyboardType(),
+            autoCorrectEnabled = props.autocorrection.value,
+          ),
+        )
+      }
+    }
+  }
+}

package/android/src/main/java/expo/modules/ui/menu/ContextMenu.kt

@@ -20,6 +20,7 @@ import expo.modules.kotlin.views.ExpoComposeView
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.unit.dp
@@ -47,7 +48,7 @@ private fun SectionTitle(text: String) {
 }
 
 @Composable
-fun FlatMenu(elements: Array<ContextMenuElement>, sectionTitle: String?, dispatchers: ContextMenuDispatchers) {
+fun FlatMenu(elements: Array<ContextMenuElement>, sectionTitle: String?, dispatchers: ContextMenuDispatchers, expanded: MutableState<Boolean>) {
   sectionTitle?.takeIf { !it.isEmpty() }?.let {
     SectionTitle(it)
   }
@@ -68,6 +69,7 @@ fun FlatMenu(elements: Array<ContextMenuElement>, sectionTitle: String?, dispatc
         text = { Text(it.text) },
         onClick = {
           dispatchers.buttonPressed(ContextMenuButtonPressedEvent(id))
+          expanded.value = false
         }
       )
     }
@@ -95,13 +97,14 @@ fun FlatMenu(elements: Array<ContextMenuElement>, sectionTitle: String?, dispatc
           dispatchers.switchCheckedChanged(
             ContextMenuSwitchValueChangeEvent(!it.value, id)
           )
+          expanded.value = false
         }
       )
     }
 
     element.submenu?.let {
       HorizontalDivider()
-      FlatMenu(it.elements, it.button.text, dispatchers)
+      FlatMenu(it.elements, it.button.text, dispatchers, expanded)
     }
   }
 }
@@ -163,7 +166,8 @@ class ContextMenu(context: Context, appContext: AppContext) : ExpoComposeView<Co
               dispatchers = ContextMenuDispatchers(
                 buttonPressed = onContextMenuButtonPressed,
                 switchCheckedChanged = onContextMenuSwitchValueChanged
-              )
+              ),
+              expanded = expanded
             )
           }
         }

package/build/components/BottomSheet/index.d.ts

@@ -0,0 +1,9 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type BottomSheetProps = {
+    style?: StyleProp<ViewStyle>;
+    children: any;
+    isOpened: boolean;
+    onIsOpenedChange: (isOpened: boolean) => void;
+};
+export declare function BottomSheet({ children }: BottomSheetProps): any;
+//# sourceMappingURL=index.d.ts.map

package/build/components/BottomSheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/BottomSheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,OAEzD"}

package/build/components/BottomSheet/index.ios.d.ts

@@ -0,0 +1,11 @@
+import { NativeSyntheticEvent } from 'react-native';
+import { BottomSheetProps } from '.';
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsOpenedChange'> & {
+    onIsOpenedChange: (event: NativeSyntheticEvent<{
+        isOpened: boolean;
+    }>) => void;
+};
+export declare function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps;
+export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.ios.d.ts.map

package/build/components/BottomSheet/index.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/BottomSheet/index.ios.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,oBAAoB,EAAQ,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAG;IACzE,gBAAgB,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAChF,CAAC;AAOF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,gBAAgB,GAAG,sBAAsB,CAOzF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAUlD"}

package/build/components/Button/index.d.ts

@@ -48,7 +48,7 @@ export type ButtonProps = {
     onPress?: () => void;
     /**
      * A string describing the system image to display in the button.
-     * Uses SF Symbols on iOS and Material Icons on Android.
+     * Uses Material Icons on Android and SF Symbols on iOS.
      */
     systemImage?: {
         ios?: string;

package/build/components/ContextMenu/index.android.d.ts

@@ -0,0 +1,23 @@
+import { ContextMenuProps } from '.';
+export declare function Submenu(): import("react").JSX.Element;
+export declare function Items(): import("react").JSX.Element;
+export declare namespace Items {
+    var tag: string;
+}
+export declare function Trigger(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare namespace Trigger {
+    var tag: string;
+}
+export declare function Preview(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+declare namespace ContextMenu {
+    var Trigger: typeof import("./index.android").Trigger;
+    var Preview: typeof import("./index.android").Preview;
+    var Items: typeof import("./index.android").Items;
+}
+export { ContextMenu };
+//# sourceMappingURL=index.android.d.ts.map

package/build/components/ContextMenu/index.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.android.d.ts","sourceRoot":"","sources":["../../../components/ContextMenu/index.android.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAkC,MAAM,GAAG,CAAC;AAQrE,wBAAgB,OAAO,gCAEtB;AAED,wBAAgB,KAAK,gCAEpB;yBAFe,KAAK;;;AAKrB,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BAE3D;yBAFe,OAAO;;;AAKvB,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BAE3D;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAmC3C;kBAnCQ,WAAW;;;;;AAyCpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/build/components/ContextMenu/index.d.ts

@@ -1,24 +1,17 @@
 import { ReactElement, ReactNode } from 'react';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { MenuElement } from './utils';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
 type SubmenuElement = ReactElement<ButtonProps> | ReactElement<SwitchProps> | ReactElement<PickerProps> | ReactElement<SubmenuProps>;
-type ContentChildren = SubmenuElement | SubmenuElement[];
-/**
- * @hidden
- */
 export type ContextMenuContentProps = {
-    children: ContentChildren;
+    children: SubmenuElement | SubmenuElement[];
 };
 /**
  * @hidden
  */
-export type EventHandlers = {
-    [key: string]: {
-        [key: string]: (event: NativeSyntheticEvent<any>) => void;
-    };
-};
+export type EventHandlers = Record<string, Record<string, (event: NativeSyntheticEvent<any>) => void>>;
 /**
  * @hidden
  */
@@ -35,12 +28,6 @@ export type ActivationMethod = 'singlePress' | 'longPress';
  * Props of the `ContextMenu` component.
  */
 export type ContextMenuProps = {
-    /**
-     * Items visible inside the context menu. The items should be wrapped in a `React.Fragment`.
-     * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
-     * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
-     */
-    Items: React.ReactElement<ContextMenuContentProps>;
     /**
      * Determines how the context menu will be activated.
      *
@@ -70,17 +57,59 @@ export type SubmenuProps = {
     /**
      * The button that will be used to expand the submenu. On Android the `text` prop of the `Button` will be used as a section title.
      */
-    button: React.ReactElement<ButtonProps>;
+    button: ReactElement<ButtonProps>;
     /**
      * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
      */
-    children: React.ReactNode;
+    children: ReactNode;
+};
+/**
+ * @hidden
+ */
+export type NativeMenuProps = ContextMenuProps & {
+    elements: MenuElement[];
+    onContextMenuButtonPressed: (event: NativeSyntheticEvent<{
+        contextMenuElementID: string;
+    }>) => void;
+    onContextMenuSwitchValueChanged: (event: NativeSyntheticEvent<{
+        contextMenuElementID: string;
+        value: boolean;
+    }>) => void;
+    onContextMenuPickerOptionSelected: (event: NativeSyntheticEvent<{
+        index: number;
+        label: string;
+        contextMenuElementID: string;
+    }>) => void;
 };
 /**
  * The `Submenu` component is used to create a nested context menu. Submenus can be infinitely nested.
  * Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple titled sections.
  */
 export declare function Submenu(props: SubmenuProps): import("react").JSX.Element;
+/**
+ * Items visible inside the context menu. Pass input components as immidiate children of the tag.
+ * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
+ * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
+ */
+export declare function Items(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare namespace Items {
+    var tag: string;
+}
+/**
+ * The component visible all the time that triggers the menu when tapped or long-pressed.
+ */
+export declare function Trigger(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The component visible above the menu when it is opened.
+ * @platform ios
+ */
+export declare function Preview(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
 /**
  * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
  *
@@ -90,6 +119,11 @@ export declare function Submenu(props: SubmenuProps): import("react").JSX.Elemen
  * - Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple sections. The `title` prop of the `Button`, which opens the submenu on iOS will be used as a section title.
  * - Android does not support showing a `Picker` element in the context menu.
  */
-export declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
-export {};
+declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+declare namespace ContextMenu {
+    var Trigger: typeof import(".").Trigger;
+    var Preview: typeof import(".").Preview;
+    var Items: typeof import(".").Items;
+}
+export { ContextMenu };
 //# sourceMappingURL=index.d.ts.map

package/build/components/ContextMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ContextMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,KAAK,cAAc,GACf,YAAY,CAAC,WAAW,CAAC,GACzB,YAAY,CAAC,WAAW,CAAC,GACzB,YAAY,CAAC,WAAW,CAAC,GACzB,YAAY,CAAC,YAAY,CAAC,CAAC;AAE/B,KAAK,eAAe,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC3D,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IAAE,oBAAoB,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,WAAW,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IACxC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AA2BF;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAE1C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAwBlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ContextMenu/index.tsx"],"names":[],"mappings":"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"}

package/build/components/DatePicker/index.d.ts

@@ -8,12 +8,12 @@ type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
  */
 export type DatePickerProps = {
     /**
-     * The intial date to display on the picker.
+     * The initial date to display on the picker.
      */
     initialDate?: string | null;
     /**
      * A title displayed on the picker on iOS.
-     * @platform iOS
+     * @platform ios
      */
     title?: string;
     /**
@@ -22,7 +22,7 @@ export type DatePickerProps = {
     onDateSelected?: (date: Date) => void;
     /**
      * The variant of the picker, which determines its appearance and behavior.
-     * @platform iOS
+     * @platform ios
      * @default 'automatic'
      */
     iosVariant?: IOSVariant;
@@ -35,15 +35,15 @@ export type DatePickerProps = {
     /**
      * Show to button to toggle between variants on Android.
      * @platform android
-     * @default 'true'
+     * @default true
      */
     showVariantToggle?: boolean;
     /**
      * The components that the picker should display.
-     * On iOS, you can have a picker that selects both date and time.
      * On Android, you can have a picker that selects just the date or just the time.
      * `dateAndTime` is only available on iOS and will result in a date picker on Android.
-     * @default ['date']
+     * On iOS, you can have a picker that selects both date and time.
+     * @default 'date'
      */
     displayedComponents?: DisplayedComponents;
     /**

package/build/components/Label/index.d.ts

@@ -0,0 +1,28 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type LabelProps = {
+    /**
+     * The title text to be displayed in the label.
+     */
+    title?: string;
+    /**
+     * The name of the SFSymbol to be displayed in the label.
+     */
+    systemImage?: string;
+    /**
+     * The color of the label icon.
+     */
+    color?: string;
+    /**
+     * Additional styles to apply to the label.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export declare function Label(props: LabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build/components/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/build/components/Label/index.ios.d.ts

@@ -0,0 +1,10 @@
+import { LabelProps } from '.';
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export declare function Label(props: LabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.ios.d.ts.map

package/build/components/Label/index.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/Label/index.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAI/B;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/build/components/List/index.d.ts

@@ -0,0 +1,87 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewEvent } from '../../src/types';
+export type ListStyle = 'automatic' | 'plain' | 'inset' | 'insetGrouped' | 'grouped' | 'sidebar';
+export interface ListProps {
+    /**
+     * Custom style for the container wrapping the list.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * One of the predefined ListStyle types in SwiftUI.
+     * @default 'automatic'
+     */
+    listStyle?: ListStyle;
+    /**
+     * Allows the selection of list items.
+     * @default false
+     */
+    selectEnabled?: boolean;
+    /**
+     * Enables reordering of list items.
+     * @default false
+     */
+    moveEnabled?: boolean;
+    /**
+     * Allows the deletion of list items.
+     * @default false
+     */
+    deleteEnabled?: boolean;
+    /**
+     * Makes the list scrollable.
+     * @default true
+     * @platform ios 16.0+
+     */
+    scrollEnabled?: boolean;
+    /**
+     * Enables SwiftUI edit mode.
+     * @default false
+     */
+    editModeEnabled?: boolean;
+    /**
+     * The children elements to be rendered inside the list.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback triggered when an item is deleted from the list.
+     */
+    onDeleteItem?: (index: number) => void;
+    /**
+     * Callback triggered when an item is moved in the list.
+     */
+    onMoveItem?: (from: number, to: number) => void;
+    /**
+     * Callback triggered when the selection changes in a list.
+     */
+    onSelectionChange?: (selection: number[]) => void;
+}
+/**
+ * DeleteItemEvent represents an event triggered when an item is deleted from the list.
+ */
+type DeleteItemEvent = ViewEvent<'onDeleteItem', {
+    index: number;
+}>;
+/**
+ * MoveItemEvent represents an event triggered when an item is moved in the list.
+ */
+type MoveItemEvent = ViewEvent<'onMoveItem', {
+    from: number;
+    to: number;
+}>;
+/**
+ * SelectItemEvent represents an event triggered when the selection changes in a list.
+ */
+type SelectItemEvent = ViewEvent<'onSelectionChange', {
+    selection: number[];
+}>;
+export type NativeListProps = Omit<ListProps, 'onDeleteItem' | 'onMoveItem' | 'onSelectionChange'> & DeleteItemEvent & MoveItemEvent & SelectItemEvent & {
+    children: React.ReactNode;
+};
+/**
+ * A list component that renders its children using a native SwiftUI list.
+ * @param {ListProps} props - The properties for the list component.
+ * @returns {JSX.Element | null} The rendered list with its children or null if the platform is unsupported.
+ * @platform ios
+ */
+export declare function List({ children }: ListProps): import("react").ReactNode;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACpE;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC3E;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,mBAAmB,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE/E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,mBAAmB,CAAC,GAChG,eAAe,GACf,aAAa,GACb,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,6BAE3C"}

package/build/components/List/index.ios.d.ts

@@ -0,0 +1,9 @@
+import { ListProps } from '.';
+/**
+ * A list component that renders its children using a native SwiftUI list.
+ * @param {ListProps} props - The properties for the list component.
+ * @returns {JSX.Element | null} The rendered list with its children or null if the platform is unsupported.
+ * @platform ios
+ */
+export declare function List(props: ListProps): import("react").JSX.Element | null;
+//# sourceMappingURL=index.ios.d.ts.map

package/build/components/List/index.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/List/index.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAmB,MAAM,GAAG,CAAC;AAc/C;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sCAYpC"}

package/build/components/Picker/index.d.ts

@@ -30,8 +30,8 @@ export type PickerProps = {
      */
     selectedIndex: number | null;
     /**
-     * A label displayed on the picker when in `menu` variant inside a form section on iOS.
-     * @platform iOS
+     * A label displayed on the picker when in `'menu'` variant inside a form section on iOS.
+     * @platform ios
      */
     label?: string;
     /**
@@ -45,10 +45,10 @@ export type PickerProps = {
     }) => void;
     /**
      * The variant of the picker, which determines its appearance and behavior.
-     * The 'wheel' and 'menu' variants are iOS only, the 'radio' variant is Android only.
+     * The `'wheel'`, `'inline'`, `'palette'` and `'menu'` variants are iOS only, the `'radio'` variant is Android only. The `'inline'` variant can only be used inside sections or lists. The `'palette'` variant displays differently inside menus.
      * @default 'segmented'
      */
-    variant?: 'wheel' | 'segmented' | 'menu' | 'radio';
+    variant?: 'wheel' | 'segmented' | 'menu' | 'radio' | 'inline' | 'palette';
     /**
      * Optional style to apply to the picker component.
      */
@@ -59,11 +59,14 @@ export type PickerProps = {
      */
     elementColors?: PickerElementColors;
     /**
-     * Picker color. On iOS it only applies to the `menu` variant.
+     * Picker color. On iOS it only applies to the `'menu'` variant.
      */
     color?: string;
 };
 type NativePickerProps = PickerProps;
+/**
+ * @hidden
+ */
 export declare function transformPickerProps(props: PickerProps): NativePickerProps;
 /**
  * Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.

package/build/components/Picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACtF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AAErC,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAa1E;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACtF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1E;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AAErC;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAa1E;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/build/components/Progress/index.d.ts

@@ -13,7 +13,7 @@ export type ProgressProps = {
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * The current progress value of the slider. This is a number between 0 and 1.
+     * The current progress value of the slider. This is a number between `0` and `1`.
      */
     progress?: number | null;
     /**