@expo/ui 1.0.0-canary-20250306-d9d3e02 → 1.0.0-canary-20250320-7a205d3

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

@@ -1,5 +1,8 @@
 import { StyleProp, ViewStyle } from 'react-native';
 import { ViewEvent } from '../../src/types';
+/**
+ * @hidden Not used anywhere yet.
+ */
 export type TextInputRole = 'default' | 'cancel' | 'destructive';
 /**
  * Props for the TextInput component.
@@ -30,6 +33,27 @@ export type TextInputProps = {
     numberOfLines?: number;
     /**
      * Determines which keyboard to open, e.g., numeric.
+     *
+     * Types that work on both platforms:
+     * - default
+     * - numeric
+     * - email-address
+     * - phone-pad
+     * - decimal-pad
+     * - ascii-capable
+     * - url
+     *
+     * Types that only work on Android:
+     * - password
+     * - password-numeric
+     *
+     * Types that only work on iOS:
+     * - numbers-and-punctuation
+     * - name-phone-pad
+     * - twitter
+     * - web-search
+     * - ascii-capable-number-pad
+     *
      * @default default
      */
     keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'ascii-capable-number-pad';
@@ -41,7 +65,6 @@ export type TextInputProps = {
 };
 export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText'> & {} & ViewEvent<'onValueChanged', {
     value: string;
-    eventIndex: number;
 }>;
 export declare function TextInput(props: TextInputProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/TextInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EACT,SAAS,GACT,eAAe,GACf,SAAS,GACT,WAAW,GACX,eAAe,GACf,yBAAyB,GACzB,KAAK,GACL,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,YAAY,GACZ,0BAA0B,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,SAAS,CACpF,gBAAgB,EAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CACtC,CAAC;AAiBJ,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/TextInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,YAAY,CAAC,EACT,SAAS,GACT,eAAe,GACf,SAAS,GACT,WAAW,GACX,eAAe,GACf,yBAAyB,GACzB,KAAK,GACL,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,YAAY,GACZ,0BAA0B,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,SAAS,CACpF,gBAAgB,EAChB;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAClB,CAAC;AAoBJ,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C"}

package/build/src/types.d.ts

@@ -1,9 +1,9 @@
-export type * from '../components/Switch';
-export type * from '../components/Picker';
 export type * from '../components/Button';
 export type * from '../components/ContextMenu';
+export type * from '../components/Picker';
 export type * from '../components/Section';
 export type * from '../components/Slider';
+export type * from '../components/Switch';
 /**
  * @hidden
  */

package/build/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,uBAAuB,CAAC;AAC3C,mBAAmB,sBAAsB,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,MAAM,CACvD,IAAI,EACJ,IAAI,SAAS,MAAM,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GACpD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAC7B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,uBAAuB,CAAC;AAC3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,MAAM,CACvD,IAAI,EACJ,IAAI,SAAS,MAAM,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GACpD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAC7B,CAAC"}

package/components/BottomSheet/index.ios.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+import { Dimensions, NativeSyntheticEvent, View } from 'react-native';
+
+import { BottomSheetProps } from '.';
+
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsOpenedChange'> & {
+  onIsOpenedChange: (event: NativeSyntheticEvent<{ isOpened: boolean }>) => void;
+};
+
+const BottomSheetNativeView: React.ComponentType<NativeBottomSheetProps> = requireNativeView(
+  'ExpoUI',
+  'BottomSheetView'
+);
+
+export function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
+  return {
+    ...props,
+    onIsOpenedChange: ({ nativeEvent: { isOpened } }) => {
+      props?.onIsOpenedChange?.(isOpened);
+    },
+  };
+}
+
+export function BottomSheet(props: BottomSheetProps) {
+  const { width } = Dimensions.get('window');
+  return (
+    <View>
+      <BottomSheetNativeView
+        style={{ position: 'absolute', width }}
+        {...transformBottomSheetProps(props)}
+      />
+    </View>
+  );
+}

package/components/BottomSheet/index.tsx

@@ -0,0 +1,12 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type BottomSheetProps = {
+  style?: StyleProp<ViewStyle>;
+  children: any;
+  isOpened: boolean;
+  onIsOpenedChange: (isOpened: boolean) => void;
+};
+
+export function BottomSheet({ children }: BottomSheetProps) {
+  return children;
+}

package/components/Button/index.tsx

@@ -69,7 +69,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/components/ContextMenu/index.android.tsx

@@ -0,0 +1,72 @@
+import { requireNativeView } from 'expo';
+import { Children, useMemo } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { ContextMenuProps, EventHandlers, NativeMenuProps } from '.';
+import { transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+export function Submenu() {
+  return <></>;
+}
+
+export function Items() {
+  return <></>;
+}
+Items.tag = 'Items';
+
+export function Trigger(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Trigger.tag = 'Trigger';
+
+export function Preview(props: { children: React.ReactNode }) {
+  return <></>;
+}
+
+function ContextMenu(props: ContextMenuProps) {
+  const eventHandlersMap: EventHandlers = {};
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
+  const processedElements = useMemo(
+    () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
+    [initialChildren]
+  );
+
+  const activationElement = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Trigger.tag ? c.props.children : null
+  );
+
+  const createEventHandler =
+    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(e);
+    };
+
+  return (
+    <MenuNativeView
+      style={props.style}
+      elements={processedElements}
+      onContextMenuButtonPressed={createEventHandler('onPress')}
+      onContextMenuSwitchValueChanged={createEventHandler('onValueChange')}
+      onContextMenuPickerOptionSelected={createEventHandler('onOptionSelected')}
+      {...props}>
+      {activationElement}
+    </MenuNativeView>
+  );
+}
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/components/ContextMenu/index.tsx

@@ -1,11 +1,26 @@
 import { requireNativeView } from 'expo';
-import { ReactElement, ReactNode, useMemo } from 'react';
+import { ComponentType, Children, ReactElement, ReactNode, useMemo } from 'react';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+import { MenuElement, transformChildrenToElementArray } from './utils';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
-import { MenuElement, transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+const MenuNativeTriggerView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuActivationElement'
+);
+
+const MenuNativePreviewView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuPreview'
+);
 
 type SubmenuElement =
   | ReactElement<ButtonProps>
@@ -13,23 +28,17 @@ type SubmenuElement =
   | 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
@@ -47,13 +56,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.
    *
@@ -87,14 +89,17 @@ 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;
 };
 
-type NativeMenuProps = ContextMenuProps & {
+/**
+ * @hidden
+ */
+export type NativeMenuProps = ContextMenuProps & {
   elements: MenuElement[];
   onContextMenuButtonPressed: (
     event: NativeSyntheticEvent<{ contextMenuElementID: string }>
@@ -114,11 +119,6 @@ type NativeMenuProps = ContextMenuProps & {
   ) => void;
 };
 
-const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
-  'ExpoUI',
-  'ContextMenu'
-);
-
 /**
  * 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.
@@ -127,6 +127,30 @@ export function Submenu(props: SubmenuProps) {
   return <></>;
 }
 
+/**
+ * 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 function Items(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Items.tag = 'Items';
+/**
+ * The component visible all the time that triggers the menu when tapped or long-pressed.
+ */
+export function Trigger(props: { children: React.ReactNode }) {
+  return <MenuNativeTriggerView {...props} />;
+}
+
+/**
+ * The component visible above the menu when it is opened.
+ * @platform ios
+ */
+export function Preview(props: { children: React.ReactNode }) {
+  return <MenuNativePreviewView {...props} />;
+}
+
 /**
  * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
  *
@@ -136,18 +160,22 @@ export function Submenu(props: SubmenuProps) {
  * - 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 function ContextMenu(props: ContextMenuProps) {
+function ContextMenu(props: ContextMenuProps) {
   const eventHandlersMap: EventHandlers = {};
-  const initialChildren = props.Items.props.children;
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
   const processedElements = useMemo(
     () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
     [initialChildren]
   );
 
   const createEventHandler =
-    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
-      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
-      handler?.(e);
+    (handlerType: string) => (event: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[event.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(event);
     };
 
   return (
@@ -161,3 +189,9 @@ export function ContextMenu(props: ContextMenuProps) {
     />
   );
 }
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/components/DatePicker/index.tsx

@@ -15,12 +15,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;
   /**
@@ -29,7 +29,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;
@@ -42,15 +42,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/components/Picker/index.tsx

@@ -33,8 +33,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;
   /**
@@ -43,10 +43,10 @@ export type PickerProps = {
   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, 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.
    */
@@ -58,7 +58,7 @@ 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;
 };
@@ -70,6 +70,9 @@ const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
 
 type NativePickerProps = PickerProps;
 
+/**
+ * @hidden
+ */
 export function transformPickerProps(props: PickerProps): NativePickerProps {
   return {
     ...props,

package/components/Progress/index.tsx

@@ -16,7 +16,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;
   /**

package/components/Section/index.tsx

@@ -2,10 +2,15 @@ import { StyleProp, ViewStyle } from 'react-native';
 
 export type SectionProps = {
   style?: StyleProp<ViewStyle>;
-  title: string;
+  title?: string;
   children: any;
 };
 
+/**
+ * Section component uses the native [Section](https://developer.apple.com/documentation/swiftui/section) component.
+ * It has no intrinsic dimensions, so it needs explicit height or flex set to display content (like ScrollView).
+ * @platform ios
+ */
 export function Section({ children }: SectionProps) {
   return children;
 }

package/components/Slider/index.tsx

@@ -26,12 +26,12 @@ export type SliderProps = {
    */
   value?: number;
   /**
-   * The number of steps between the minimum and maximum values. 0 signifies infinite steps.
+   * 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`.
+   * The minimum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
    * @default 0
    */
   min?: number;
@@ -63,6 +63,9 @@ const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeVi
   'SliderView'
 );
 
+/**
+ * @hidden
+ */
 export function transformSliderProps(props: SliderProps): NativeSliderProps {
   return {
     ...props,

package/components/Switch/index.tsx

@@ -1,49 +1,27 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+// @docsMissing
+/**
+ * Only for switch.
+ */
 type SwitchElementColors = {
-  /**
-   * Only for switch.
-   */
   checkedThumbColor?: string;
-  /**
-   * Only for switch.
-   */
   checkedTrackColor?: string;
-  /**
-   * Only for switch.
-   */
   uncheckedThumbColor?: string;
-  /**
-   * Only for switch.
-   */
   uncheckedTrackColor?: string;
 };
 
+// @docsMissing
+/**
+ * Only for checkbox.
+ */
 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;
 };
 
@@ -61,7 +39,7 @@ export type SwitchProps = {
   label?: string;
 
   /**
-   * Type of the switch component. Can be 'checkbox', 'switch', or 'button'. The 'button' style is iOS only.
+   * Type of the switch component. Can be `'checkbox'`, `'switch'`, or `'button'`. The `'button'` style is iOS only.
    * @default 'switch'
    */
   variant?: 'checkbox' | 'switch' | 'button';
@@ -74,31 +52,33 @@ export type SwitchProps = {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Picker color. On iOS it only applies to the `menu` variant.
+   * 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;
-    }
-);
+} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
+
+export type SwitchSwitchVariantProps = {
+  variant?: 'switch';
+  /**
+   * Colors for switch's core elements.
+   * @platform android
+   */
+  elementColors?: SwitchElementColors;
+};
+
+export type SwitchCheckboxVariantProps = {
+  variant: 'checkbox';
+  /**
+   * Colors for checkbox core elements.
+   * @platform android
+   */
+  elementColors?: CheckboxElementColors;
+};
+
+export type SwitchButtonVariantProps = {
+  variant: 'button';
+  elementColors?: undefined;
+};
 
 type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
   onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
@@ -127,6 +107,9 @@ function getElementColors(props: SwitchProps) {
   return props.elementColors;
 }
 
+/**
+ * @hidden
+ */
 export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
   return {
     ...props,