@expo/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,160 @@
+package expo.modules.ui.menu
+
+import android.content.Context
+import android.view.GestureDetector
+import android.view.MotionEvent
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+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.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.AppContext
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.viewevent.ViewEventCallback
+
+@Composable
+private fun SectionTitle(text: String) {
+  Text(
+    text = text,
+    style = MaterialTheme.typography.labelSmall,
+    color = MaterialTheme.colorScheme.onSurfaceVariant,
+    modifier = Modifier
+      .fillMaxWidth()
+      .padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 4.dp)
+  )
+}
+
+@Composable
+fun FlatMenu(elements: Array<ContextMenuElement>, sectionTitle: String?, dispatchers: ContextMenuDispatchers) {
+  sectionTitle?.takeIf { !it.isEmpty() }?.let {
+    SectionTitle(it)
+  }
+  elements.forEachIndexed { index, element ->
+    val id = element.contextMenuElementID
+    element.button?.let {
+      DropdownMenuItem(
+        text = { Text(it.text) },
+        onClick = {
+          dispatchers.buttonPressed(ContextMenuButtonPressedEvent(id))
+        }
+      )
+    }
+
+    element.switch?.let {
+      DropdownMenuItem(
+        text = {
+          Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(it.label)
+            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
+              if (it.variant == "checkbox") {
+                Checkbox(
+                  checked = it.value,
+                  onCheckedChange = null,
+                  modifier = Modifier
+                    .padding(horizontal = 5.dp)
+                    .wrapContentSize(Alignment.CenterEnd)
+                )
+              } else {
+                Switch(
+                  checked = it.value,
+                  onCheckedChange = null,
+                  modifier = Modifier
+                    .padding(start = 5.dp)
+                    .wrapContentSize(Alignment.CenterEnd)
+                )
+              }
+            }
+          }
+        },
+        modifier = Modifier.wrapContentSize(Alignment.Center),
+        onClick = {
+          dispatchers.switchCheckedChanged(
+            ContextMenuSwitchValueChangeEvent(!it.value, id)
+          )
+        }
+      )
+    }
+
+    element.submenu?.let {
+      HorizontalDivider()
+      FlatMenu(it.elements, it.button.text, dispatchers)
+    }
+  }
+}
+
+data class ContextMenuDispatchers(
+  val buttonPressed: ViewEventCallback<ContextMenuButtonPressedEvent>,
+  val switchCheckedChanged: ViewEventCallback<ContextMenuSwitchValueChangeEvent>
+)
+
+class ContextMenu(context: Context, appContext: AppContext) : ExpoComposeView<ContextMenuProps>(context, appContext) {
+  override val props = ContextMenuProps()
+  val expanded = mutableStateOf(false)
+  val onContextMenuButtonPressed by EventDispatcher<ContextMenuButtonPressedEvent>()
+  val onContextMenuSwitchValueChanged by EventDispatcher<ContextMenuSwitchValueChangeEvent>()
+
+  val gestureDetector = GestureDetector(
+    context,
+    object : GestureDetector.SimpleOnGestureListener() {
+      override fun onDown(e: MotionEvent): Boolean {
+        if (props.activationMethod.value == ActivationMethod.SINGLE_PRESS) {
+          expanded.value = !expanded.value
+        }
+        return super.onDown(e)
+      }
+
+      override fun onLongPress(e: MotionEvent) {
+        if (props.activationMethod.value == ActivationMethod.LONG_PRESS) {
+          expanded.value = !expanded.value
+        }
+        return super.onLongPress(e)
+      }
+    }
+  )
+
+  override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
+    ev?.let {
+      gestureDetector.onTouchEvent(ev)
+    }
+    return super.dispatchTouchEvent(ev)
+  }
+
+  init {
+    setContent {
+      var elements by remember { props.elements }
+
+      return@setContent Box {
+        DropdownMenu(
+          expanded = expanded.value,
+          onDismissRequest = { expanded.value = !expanded.value }
+        ) {
+          FlatMenu(
+            elements,
+            null,
+            dispatchers = ContextMenuDispatchers(
+              buttonPressed = onContextMenuButtonPressed,
+              switchCheckedChanged = onContextMenuSwitchValueChanged
+            )
+          )
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+package expo.modules.ui.menu
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.ui.button.ButtonVariant
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.ui.ValueChangeEvent
+import expo.modules.ui.button.ButtonPressedEvent
+import java.io.Serializable
+
+enum class ActivationMethod(val value: String) : Enumerable {
+  SINGLE_PRESS("singlePress"),
+  LONG_PRESS("longPress")
+}
+
+data class Submenu(
+  @Field val elements: Array<ContextMenuElement> = emptyArray(),
+  @Field val button: ContextMenuButtonProps
+) : Record, Serializable
+
+data class ContextMenuElement(
+  @Field var button: ContextMenuButtonProps? = null,
+  @Field var switch: ContextMenuSwitchProps? = null,
+  @Field var submenu: Submenu? = null,
+  @Field var contextMenuElementID: String
+) : Record, Serializable
+
+data class ContextMenuProps(
+  val text: MutableState<String> = mutableStateOf(""),
+  val elements: MutableState<Array<ContextMenuElement>> = mutableStateOf(emptyArray()),
+  val activationMethod: MutableState<ActivationMethod> = mutableStateOf(ActivationMethod.SINGLE_PRESS)
+) : ComposeProps
+
+class ContextMenuButtonProps(
+  @Field val text: String = "",
+  @Field val variant: ButtonVariant? = ButtonVariant.DEFAULT
+) : Record, Serializable
+
+class ContextMenuSwitchProps(
+  @Field val value: Boolean = false,
+  @Field val label: String = "",
+  @Field var variant: String = ""
+) : Record, Serializable
+
+open class ContextMenuButtonPressedEvent(
+  @Field val contextMenuElementID: String
+) : ButtonPressedEvent()
+
+class ContextMenuSwitchValueChangeEvent(
+  @Field override val value: Boolean = false,
+  @Field val contextMenuElementID: String
+) : ValueChangeEvent()

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

@@ -0,0 +1,81 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewEvent } from '../../src';
+/**
+ * The role of the button.
+ * - `default` - The default button role.
+ * - `cancel` - A button that cancels the current operation.
+ * - `destructive` - A button that deletes data or performs a destructive action.
+ * @platform ios
+ */
+export type ButtonRole = 'default' | 'cancel' | 'destructive';
+/**
+ * The built-in button styles available on iOS and Android.
+ * Common styles:
+ * - `default` - The default system button style.
+ * - `bordered` - A button with a light fill. On Android equivalent to `FilledTonalButton`.
+ * - `borderless` - A button with no background or border. On Android equivalent to `TextButton`.
+ * Apple-only styles:
+ * - `borderedProminent` - A bordered button with a prominent appearance.
+ * - `plain` - A button with no border or background and a less prominent text.
+ * MacOS-only styles:
+ * - `accessoryBar` - A button style for accessory bars.
+ * - `accessoryBarAction` - A button style for accessory bar actions.
+ * - `card` - A button style for cards.
+ * - `link` - A button style for links.
+ * Android-only styles:
+ * - `outlined` - A button with an outline.
+ * - `elevated` - A filled button with a shadow.
+ *
+ * @platform android
+ * @platform ios
+ */
+export type ButtonVariant = 'default' | 'bordered' | 'plain' | 'borderedProminent' | 'borderless' | 'accessoryBar' | 'accessoryBarAction' | 'card' | 'link' | 'outlined' | 'elevated';
+export type ButtonProps = {
+    /**
+     * A callback that is called when the button is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * A string describing the system image to display in the button.
+     * @platform ios
+     */
+    systemImage?: string;
+    /**
+     * Indicated the role of the button.
+     * @platform ios
+     */
+    role?: ButtonRole;
+    /**
+     * The button variant.
+     */
+    variant?: ButtonVariant;
+    /**
+     * Additional styles to apply to the button.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The text to display inside the button.
+     */
+    children: string;
+    /**
+     * Colors for button's core elements.
+     * @platform android
+     */
+    elementColors?: {
+        containerColor?: string;
+        contentColor?: string;
+        disabledContainerColor?: string;
+        disabledContentColor?: string;
+    };
+    /**
+     * Button color.
+     */
+    color?: string;
+};
+export type NativeButtonProps = Omit<ButtonProps, 'role' | 'onPress' | 'children'> & {
+    buttonRole?: ButtonRole;
+    text: string;
+} & ViewEvent<'onButtonPressed', void>;
+export declare function transformButtonProps(props: ButtonProps): NativeButtonProps;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,aAAa,GAErB,SAAS,GACT,UAAU,GACV,OAAO,GAEP,mBAAmB,GACnB,YAAY,GAEZ,cAAc,GACd,oBAAoB,GACpB,MAAM,GACN,MAAM,GAEN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IACnF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAQvC,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAe1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAQxC"}

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

@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+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[];
+export type ContextMenuContentProps = {
+    children: ContentChildren;
+};
+export type EventHandlers = {
+    [key: string]: {
+        [key: string]: (event: NativeSyntheticEvent<any>) => void;
+    };
+};
+export type ContextMenuElementBase = {
+    contextMenuElementID: string;
+};
+/**
+ * Activation method of the context menu.
+ * - `singlePress`: The context menu is opened with a single tap. Does not isolate the content.
+ * - `longPress`: The context menu is opened with a long press. On iOS additionally Highlights the content by blurring the background.
+ */
+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.
+     *
+     * @platform ios
+     */
+    activationMethod?: ActivationMethod;
+    /**
+     * The contents of the submenu are used as an anchor for the context menu.
+     * The children will be wrapped in a pressable element, which triggers opening of the context menu.
+     */
+    children: ReactNode;
+    /**
+     * Optional styles to apply to the `ContextMenu`
+     */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Props of the `Submenu` component.
+ */
+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>;
+    /**
+     * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
+     */
+    children: React.ReactNode;
+};
+/**
+ * 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): React.JSX.Element;
+/**
+ * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
+ *
+ * There are some platform-specific differences in the behavior of the context menu:
+ * - On Android the expansion of the context menu is controlled by the (`expanded`)[#expanded] prop, iOS does not allow for manual control of the expansion state.
+ * - On iOS the context menu can be triggered by a single press or a long press. The `activationMethod` prop allows you to choose between these two options.
+ * - 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): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ContextMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAChE,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,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC;AAEF,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,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;;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,qBAE1C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAwBlD"}

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ContextMenuElementBase, EventHandlers } from './index';
+import { NativeButtonProps } from '../Button';
+import { PickerProps } from '../Picker';
+import { SwitchProps } from '../Switch';
+type ButtonMenuElement = {
+    button: NativeButtonProps;
+} & ContextMenuElementBase;
+type SwitchMenuElement = {
+    switch: SwitchProps;
+} & ContextMenuElementBase;
+type PickerMenuElement = {
+    picker: PickerProps;
+} & ContextMenuElementBase;
+type SubmenuElement = {
+    submenu: {
+        elements: MenuElement[];
+        button: NativeButtonProps;
+    };
+} & ContextMenuElementBase;
+export type MenuElement = ButtonMenuElement | SwitchMenuElement | PickerMenuElement | SubmenuElement;
+export declare function transformChildrenToElementArray(children: ReactNode, eventHandlersMap: EventHandlers): MenuElement[];
+export {};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../components/ContextMenu/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAyB,MAAM,SAAS,CAAC;AACvF,OAAO,EAAuB,iBAAiB,EAAwB,MAAM,WAAW,CAAC;AACzF,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,WAAW,EAAE,CAAC;QACxB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC;CACH,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,WAAW,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,CAAC;AAInB,wBAAgB,+BAA+B,CAC7C,QAAQ,EAAE,SAAS,EACnB,gBAAgB,EAAE,aAAa,GAC9B,WAAW,EAAE,CAIf"}

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

@@ -0,0 +1,65 @@
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Props for the Picker component.
+ */
+export type PickerProps = {
+    /**
+     * An array of options to be displayed in the picker.
+     */
+    options: string[];
+    /**
+     * The index of the currently selected option.
+     */
+    selectedIndex: number | null;
+    /**
+     * A label displayed on the picker when in `menu` variant inside a form section on iOS.
+     * @platform iOS
+     */
+    label?: string;
+    /**
+     * Callback function that is called when an option is selected.
+     */
+    onOptionSelected?: (event: {
+        nativeEvent: {
+            index: number;
+            label: string;
+        };
+    }) => void;
+    /**
+     * The variant of the picker, which determines its appearance and behavior.
+     * The 'wheel' and 'menu' variants are iOS only.
+     * @default 'segmented'
+     */
+    variant?: 'wheel' | 'segmented' | 'menu';
+    /**
+     * Optional style to apply to the picker component.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Colors for picker's core elements.
+     * @platform android
+     */
+    elementColors?: {
+        activeBorderColor?: string;
+        activeContentColor?: string;
+        inactiveBorderColor?: string;
+        inactiveContentColor?: string;
+        disabledActiveBorderColor?: string;
+        disabledActiveContentColor?: string;
+        disabledInactiveBorderColor?: string;
+        disabledInactiveContentColor?: string;
+        activeContainerColor?: string;
+        inactiveContainerColor?: string;
+        disabledActiveContainerColor?: string;
+        disabledInactiveContainerColor?: string;
+    };
+    /**
+     * Picker color. On iOS it only applies to the `menu` variant.
+     */
+    color?: string;
+};
+type NativePickerProps = PickerProps;
+export declare function transformPickerProps(props: PickerProps): NativePickerProps;
+export declare function Picker(props: PickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;;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,CAAC;IACzC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE;QACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;QACrC,4BAA4B,CAAC,EAAE,MAAM,CAAC;QACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,4BAA4B,CAAC,EAAE,MAAM,CAAC;QACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;KACzC,CAAC;IACF;;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,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type SectionProps = {
+    style?: StyleProp<ViewStyle>;
+    title: string;
+    children: any;
+};
+export declare function Section({ title, children }: {
+    title: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAkBF,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBA8BxF"}

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

@@ -0,0 +1,8 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type SectionProps = {
+    title: string;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+};
+export declare function Section(props: SectionProps): import("react").JSX.Element;
+//# sourceMappingURL=index.ios.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/Section/index.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAWF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAsC1C"}

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

@@ -0,0 +1,54 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewEvent } from '../../src';
+export type SliderProps = {
+    /**
+     * Custom styles for the slider component.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The current value of the slider.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The number of steps between the minimum and maximum values. 0 signifies infinite steps.
+     * @default 0
+     */
+    steps?: number;
+    /**
+     * The mininum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider. Updating this value does not trigger callbacks if the current value is above `max`.
+     * @default 1
+     */
+    max?: number;
+    /**
+     * Colors for slider's core elements.
+     * @platform android
+     */
+    elementColors?: {
+        thumbColor?: string;
+        activeTrackColor?: string;
+        inactiveTrackColor?: string;
+        activeTickColor?: string;
+        inactiveTickColor?: string;
+    };
+    /**
+     * Slider color.
+     */
+    color?: string;
+    /**
+     * Callback triggered on dragging along the slider.
+     */
+    onValueChange?: (value: number) => void;
+};
+type NativeSliderProps = Omit<SliderProps, 'onValueChange'> & ViewEvent<'onValueChanged', {
+    value: number;
+}>;
+export declare function transformSliderProps(props: SliderProps): NativeSliderProps;
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE;QACd,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GACzD,SAAS,CAAC,gBAAgB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAOjD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAqB1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

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

@@ -0,0 +1,101 @@
+import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+type SwitchElementColors = {
+    /**
+     * Only for switch.
+     */
+    checkedThumbColor?: string;
+    /**
+     * Only for switch.
+     */
+    checkedTrackColor?: string;
+    /**
+     * Only for switch.
+     */
+    uncheckedThumbColor?: string;
+    /**
+     * Only for switch.
+     */
+    uncheckedTrackColor?: string;
+};
+type CheckboxElementColors = {
+    /**
+     * Only for checkbox.
+     */
+    checkedColor?: string;
+    /**
+     * Only for checkbox.
+     */
+    disabledCheckedColor?: string;
+    /**
+     * Only for checkbox.
+     */
+    uncheckedColor?: string;
+    /**
+     * Only for checkbox.
+     */
+    disabledUncheckedColor?: string;
+    /**
+     * Only for checkbox.
+     */
+    checkmarkColor?: string;
+    /**
+     * Only for checkbox.
+     */
+    disabledIndeterminateColor?: string;
+};
+export type SwitchProps = {
+    /**
+     * Indicates whether the switch is checked.
+     */
+    value: boolean;
+    /**
+     * Label for the switch.
+     *
+     * > On Android the label has an effect only when the `Switch` is used inside a `ContextMenu`.
+     * @platform ios
+     */
+    label?: string;
+    /**
+     * Type of the switch component. Can be 'checkbox', 'switch', or 'button'. The 'button' style is iOS only.
+     * @default 'switch'
+     */
+    variant?: 'checkbox' | 'switch' | 'button';
+    /**
+     * Callback function that is called when the checked state changes.
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Optional style for the switch component.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Picker color. On iOS it only applies to the `menu` variant.
+     */
+    color?: string;
+} & ({
+    variant?: 'switch';
+    /**
+     * Colors for switch's core elements.
+     * @platform android
+     */
+    elementColors?: SwitchElementColors;
+} | {
+    variant: 'checkbox';
+    /**
+     * Colors for checkbox core elements.
+     * @platform android
+     */
+    elementColors?: CheckboxElementColors;
+} | {
+    variant: 'button';
+    elementColors?: undefined;
+});
+type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
+    onValueChange: (event: NativeSyntheticEvent<{
+        value: boolean;
+    }>) => void;
+};
+export declare function transformSwitchProps(props: SwitchProps): NativeSwitchProps;
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map