@expo/ui 0.2.0-alpha.0 → 0.2.0-alpha.2

package/src/swift-ui/ContextMenu/utils.ts

@@ -1,16 +1,11 @@
 import { Children, isValidElement, ReactElement, ReactNode } from 'react';
 import { NativeSyntheticEvent } from 'react-native';
 
-import { ContextMenuElementBase, EventHandlers, Submenu, SubmenuProps } from './index';
-import {
-  Button,
-  ButtonPrimitive,
-  ButtonProps,
-  NativeButtonProps,
-  transformButtonProps,
-} from '../Button';
-import { Picker, PickerPrimitive, PickerProps } from '../Picker';
-import { Switch, SwitchPrimitive, SwitchProps } from '../Switch';
+import { type ContextMenuElementBase, type EventHandlers } from './types';
+import { Button, transformButtonProps, type ButtonProps, type NativeButtonProps } from '../Button';
+import { Picker, type PickerProps } from '../Picker';
+import { Switch, type SwitchProps } from '../Switch';
+import { Submenu, type SubmenuProps } from './Submenu';
 
 // We use this slightly odd typing for the elements to make unpacking the elements easier on the native side
 type ButtonMenuElement = {
@@ -57,17 +52,17 @@ function processChildElement(
 
   const uuid = expo.uuidv4();
 
-  if (child.type === Button || child.type === ButtonPrimitive) {
+  if (child.type === Button) {
     // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
     return createButtonElement(uuid, child.props, eventHandlersMap);
   }
 
-  if (child.type === Switch || child.type === SwitchPrimitive) {
+  if (child.type === Switch) {
     // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
     return createSwitchElement(uuid, child.props, eventHandlersMap);
   }
 
-  if (child.type === Picker || child.type === PickerPrimitive) {
+  if (child.type === Picker) {
     // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
     return createPickerElement(uuid, child.props, eventHandlersMap);
   }

package/src/swift-ui/DatePicker/index.tsx

@@ -1,8 +1,8 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle, StyleSheet, PixelRatio } from 'react-native';
 
-import { ViewEvent } from '../../types';
-import { Host } from '../Host';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type IOSVariant = 'wheel' | 'automatic' | 'graphical' | 'compact';
 
@@ -37,18 +37,17 @@ export type DateTimePickerProps = {
    * The tint color to use on the picker elements.
    */
   color?: string;
-};
+} & CommonViewModifierProps;
 
 type NativeDatePickerProps = Omit<DateTimePickerProps, 'variant' | 'onDateSelected'> & {
   variant?: IOSVariant;
 } & ViewEvent<'onDateSelected', { date: Date }>;
 
-/**
- * @hidden
- */
-export function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
-  const { variant, ...rest } = props;
+function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
+  const { variant, modifiers, ...rest } = props;
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...rest,
     onDateSelected: ({ nativeEvent: { date } }) => {
       props?.onDateSelected?.(new Date(date));
@@ -57,43 +56,14 @@ export function transformDateTimePickerProps(props: DateTimePickerProps): Native
   };
 }
 
-function transformDateTimePickerStyle(
-  style: StyleProp<ViewStyle> | undefined
-): StyleProp<ViewStyle> {
-  const { minWidth, minHeight, ...restStyle } = StyleSheet.flatten(style) || {};
-
-  // On Android, the picker’s minWidth and minHeight must be 12dp.
-  // Otherwise, the picker will crash the app.
-  const minSize = PixelRatio.getPixelSizeForLayoutSize(12);
-
-  // However, when users pass the minWidth and minHeight props, we trust that they know what they are doing.
-  const parsedMinWidth = minWidth ? minSize : undefined;
-  const parsedMinHeight = minHeight ? minSize : undefined;
-
-  return [restStyle, { minWidth: parsedMinWidth, minHeight: parsedMinHeight }];
-}
-
 const DatePickerNativeView: React.ComponentType<NativeDatePickerProps> = requireNativeView(
   'ExpoUI',
   'DateTimePickerView'
 );
 
-/**
- * `<DateTimePicker>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function DateTimePickerPrimitive(props: DateTimePickerProps) {
-  return <DatePickerNativeView {...transformDateTimePickerProps(props)} />;
-}
-
 /**
  * Renders a `DateTimePicker` component.
  */
-export function DateTimePicker(props: DateTimePickerProps & { style?: StyleProp<ViewStyle> }) {
-  const transformedStyle = transformDateTimePickerStyle(props.style);
-  return (
-    <Host style={transformedStyle} matchContents>
-      <DateTimePickerPrimitive {...props} />
-    </Host>
-  );
+export function DateTimePicker(props: DateTimePickerProps) {
+  return <DatePickerNativeView {...transformDateTimePickerProps(props)} />;
 }

package/src/{swift-ui-primitives/DisclosureGroup.tsx → swift-ui/DisclosureGroup/index.tsx}

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
 
-import { type CommonViewModifierProps } from './types';
-import { type ViewEvent } from '../types';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export interface DisclosureGroupProps extends CommonViewModifierProps {
   label: string;
@@ -18,18 +19,23 @@ export interface DisclosureGroupProps extends CommonViewModifierProps {
 
 type StateChangeEvent = ViewEvent<'onStateChange', { isExpanded: boolean }>;
 
-export type NativeDisclosureGroupProps = Omit<DisclosureGroupProps, 'onStateChange'> &
-  StateChangeEvent;
+type NativeDisclosureGroupProps = Omit<DisclosureGroupProps, 'onStateChange'> & StateChangeEvent;
 
 const DisclosureGroupNativeView: React.ComponentType<NativeDisclosureGroupProps> =
   requireNativeView('ExpoUI', 'DisclosureGroupView');
 
 export function DisclosureGroup(props: DisclosureGroupProps) {
-  const { onStateChange, ...rest } = props;
+  const { onStateChange, modifiers, ...rest } = props;
 
   function handleStateChange(event: { nativeEvent: { isExpanded: boolean } }) {
     onStateChange?.(event.nativeEvent.isExpanded);
   }
 
-  return <DisclosureGroupNativeView {...rest} onStateChange={handleStateChange} />;
+  const transformedProps = {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...rest,
+  };
+
+  return <DisclosureGroupNativeView {...transformedProps} onStateChange={handleStateChange} />;
 }

package/src/swift-ui/Form/index.tsx

@@ -0,0 +1,30 @@
+import { requireNativeView } from 'expo';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface FormProps extends CommonViewModifierProps {
+  children: React.ReactNode;
+
+  /**
+   * Makes the form scrollable.
+   * @default true
+   * @platform ios 16.0+
+   */
+  scrollEnabled?: boolean;
+}
+
+const FormNativeView: React.ComponentType<FormProps> = requireNativeView('ExpoUI', 'FormView');
+
+function transformFormProps(props: FormProps): FormProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+export function Form(props: FormProps) {
+  return <FormNativeView {...transformFormProps(props)} />;
+}

package/src/swift-ui/Gauge/index.tsx

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
-import { ColorValue, Platform, StyleProp, ViewStyle } from 'react-native';
+import { ColorValue } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 /**
  * The type of `Gauge`.
@@ -57,33 +58,21 @@ export type GaugeProps = {
    * Color (or array of colors for gradient) of the `Gauge`.
    */
   color?: ColorValue | ColorValue[];
-};
-
-let GaugeNativeView: React.ComponentType<GaugeProps> | null;
-
-if (Platform.OS === 'ios') {
-  GaugeNativeView = requireNativeView('ExpoUI', 'GaugeView');
-}
+} & CommonViewModifierProps;
 
-/**
- * `<Gauge>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function GaugePrimitive({ type = 'default', ...props }: GaugeProps) {
-  if (!GaugeNativeView) {
-    return null;
-  }
-  return <GaugeNativeView type={type} {...props} />;
-}
+const GaugeNativeView: React.ComponentType<GaugeProps> = requireNativeView('ExpoUI', 'GaugeView');
 
 /**
  * Renders a native `Gauge` component.
  * @platform ios
  */
-export function Gauge(props: GaugeProps & { style?: StyleProp<ViewStyle> }) {
+export function Gauge({ type = 'default', modifiers, ...props }: GaugeProps) {
   return (
-    <Host style={props.style} matchContents>
-      <GaugePrimitive {...props} />
-    </Host>
+    <GaugeNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      type={type}
+      {...props}
+    />
   );
 }

package/src/swift-ui/Host/index.tsx

@@ -2,6 +2,9 @@ import { requireNativeView } from 'expo';
 import { useState } from 'react';
 import { StyleProp, ViewStyle, type ColorSchemeName } from 'react-native';
 
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
 export type HostProps = {
   /**
    * When true, the host view will update its size in the React Native view tree to match the content's layout from SwiftUI.
@@ -29,7 +32,7 @@ export type HostProps = {
 
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
-};
+} & CommonViewModifierProps;
 
 const HostNativeView: React.ComponentType<HostProps> = requireNativeView('ExpoUI', 'HostView');
 
@@ -37,11 +40,13 @@ const HostNativeView: React.ComponentType<HostProps> = requireNativeView('ExpoUI
  * A hosting component for SwiftUI views.
  */
 export function Host(props: HostProps) {
-  const { matchContents, onLayoutContent, style, ...restProps } = props;
+  const { matchContents, onLayoutContent, style, modifiers, ...restProps } = props;
   const [containerStyle, setContainerStyle] = useState<ViewStyle | null>(null);
 
   return (
     <HostNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       style={[style, containerStyle]}
       onLayoutContent={(e) => {
         onLayoutContent?.(e);

package/src/{swift-ui-primitives/Image.tsx → swift-ui/Image/index.tsx}

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
 
-import { ViewEvent } from '../types';
-import { type CommonViewModifierProps } from './types';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export interface ImageProps extends CommonViewModifierProps {
   /**
@@ -32,8 +33,10 @@ type TapEvent = ViewEvent<'onTap', object> & {
 type NativeImageProps = Omit<ImageProps, 'onPress'> | TapEvent;
 
 function transformNativeProps(props: ImageProps): NativeImageProps {
-  const { onPress, ...restProps } = props;
+  const { onPress, modifiers, ...restProps } = props;
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     ...(onPress ? { useTapGesture: true, onTap: () => onPress() } : null),
   };

package/src/swift-ui/Label/index.tsx

@@ -1,7 +1,7 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type LabelProps = {
   /**
@@ -18,18 +18,10 @@ export type LabelProps = {
    * The color of the label icon.
    */
   color?: string;
-};
+} & CommonViewModifierProps;
 
 const LabelNativeView: React.ComponentType<LabelProps> = requireNativeView('ExpoUI', 'LabelView');
 
-/**
- * `<Label>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function LabelPrimitive(props: LabelProps) {
-  return <LabelNativeView {...props} />;
-}
-
 /**
  * Renders a native label view, which could be used in a list or section.
  *
@@ -37,10 +29,13 @@ export function LabelPrimitive(props: LabelProps) {
  * @returns {JSX.Element} The rendered native Label component.
  * @platform ios
  */
-export function Label(props: LabelProps & { style?: StyleProp<ViewStyle> }) {
+export function Label(props: LabelProps) {
+  const { modifiers, ...restProps } = props;
   return (
-    <Host style={props.style} matchContents>
-      <LabelPrimitive {...props} />
-    </Host>
+    <LabelNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
   );
 }

package/src/{swift-ui-primitives/Layout.tsx → swift-ui/Layout/index.tsx}

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
 
-import { type CommonViewModifierProps } from './types';
-import { ViewEvent } from '../types';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 type TapEvent = ViewEvent<'onTap', object> & {
   useTapGesture?: boolean;
@@ -20,8 +21,10 @@ interface StackBaseProps extends CommonViewModifierProps {
 export type NativeStackProps = Omit<StackBaseProps, 'onPress'> | TapEvent;
 
 function transformNativeProps(props: StackBaseProps): NativeStackProps {
-  const { onPress, ...restProps } = props;
+  const { onPress, modifiers, ...restProps } = props;
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     ...(onPress ? { useTapGesture: true, onTap: () => onPress() } : null),
   };
@@ -73,7 +76,17 @@ const GroupNativeView: React.ComponentType<NativeGroupProps> = requireNativeView
   'GroupView'
 );
 
+function transformGroupProps(props: GroupProps): NativeGroupProps {
+  const { onPress, modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    ...(onPress ? { useTapGesture: true, onTap: () => onPress() } : null),
+  };
+}
+
 export function Group(props: GroupProps) {
-  return <GroupNativeView {...transformNativeProps(props)} />;
+  return <GroupNativeView {...transformGroupProps(props)} />;
 }
 //#endregion

package/src/swift-ui/List/index.tsx

@@ -1,15 +1,20 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../types';
-import { Host } from '../Host';
+import { type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
-const ListNativeView: React.ComponentType<NativeListProps> | null =
-  requireNativeView<NativeListProps>('ExpoUI', 'ListView');
+const ListNativeView: React.ComponentType<NativeListProps> = requireNativeView<NativeListProps>(
+  'ExpoUI',
+  'ListView'
+);
 
 function transformListProps(props: Omit<ListProps, 'children'>): Omit<NativeListProps, 'children'> {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     onDeleteItem: ({ nativeEvent: { index } }) => props?.onDeleteItem?.(index),
     onMoveItem: ({ nativeEvent: { from, to } }) => props?.onMoveItem?.(from, to),
     onSelectionChange: ({ nativeEvent: { selection } }) => props?.onSelectionChange?.(selection),
@@ -18,7 +23,7 @@ function transformListProps(props: Omit<ListProps, 'children'>): Omit<NativeList
 
 export type ListStyle = 'automatic' | 'plain' | 'inset' | 'insetGrouped' | 'grouped' | 'sidebar';
 
-export interface ListProps {
+export interface ListProps extends CommonViewModifierProps {
   /**
    * One of the predefined ListStyle types in SwiftUI.
    * @default 'automatic'
@@ -90,37 +95,20 @@ type MoveItemEvent = ViewEvent<'onMoveItem', { from: number; to: number }>;
  */
 type SelectItemEvent = ViewEvent<'onSelectionChange', { selection: number[] }>;
 
-export type NativeListProps = Omit<ListProps, 'onDeleteItem' | 'onMoveItem' | 'onSelectionChange'> &
+type NativeListProps = Omit<ListProps, 'onDeleteItem' | 'onMoveItem' | 'onSelectionChange'> &
   DeleteItemEvent &
   MoveItemEvent &
   SelectItemEvent & {
     children: React.ReactNode;
   };
 
-/**
- * `<List>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function ListPrimitive(props: ListProps) {
-  const { children, ...nativeProps } = props;
-
-  if (!ListNativeView) {
-    return null;
-  }
-
-  return <ListNativeView {...transformListProps(nativeProps)}>{children}</ListNativeView>;
-}
-
 /**
  * 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 function List(props: ListProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={[props.style, { flex: 1 }]} matchContents>
-      <ListPrimitive {...props} />
-    </Host>
-  );
+export function List(props: ListProps) {
+  const { children, ...nativeProps } = props;
+  return <ListNativeView {...transformListProps(nativeProps)}>{children}</ListNativeView>;
 }

package/src/swift-ui/Picker/index.tsx

@@ -1,7 +1,7 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type PickerProps = {
   /**
@@ -30,7 +30,7 @@ export type PickerProps = {
    * Picker color. On iOS it only applies to the `'menu'` variant.
    */
   color?: string;
-};
+} & CommonViewModifierProps;
 
 const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
   'ExpoUI',
@@ -39,32 +39,20 @@ const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
 
 type NativePickerProps = PickerProps;
 
-/**
- * @hidden
- */
-export function transformPickerProps(props: PickerProps): NativePickerProps {
+function transformPickerProps(props: PickerProps): NativePickerProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     variant: props.variant ?? 'segmented',
     color: props.color,
   };
 }
 
-/**
- * `<Picker>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function PickerPrimitive(props: PickerProps) {
-  return <PickerNativeView {...transformPickerProps(props)} />;
-}
-
 /**
  * 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.
  */
-export function Picker(props: PickerProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <PickerPrimitive {...props} />
-    </Host>
-  );
+export function Picker(props: PickerProps) {
+  return <PickerNativeView {...transformPickerProps(props)} />;
 }

package/src/swift-ui/Progress/index.tsx

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
-import { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { ColorValue } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type CircularProgressProps = {
   /**
@@ -12,7 +13,7 @@ export type CircularProgressProps = {
    * Progress color.
    */
   color?: ColorValue;
-};
+} & CommonViewModifierProps;
 
 export type LinearProgressProps = {
   /**
@@ -23,7 +24,7 @@ export type LinearProgressProps = {
    * Progress color.
    */
   color?: ColorValue;
-};
+} & CommonViewModifierProps;
 
 type NativeProgressProps =
   | CircularProgressProps
@@ -36,40 +37,32 @@ const NativeProgressView: React.ComponentType<NativeProgressProps> = requireNati
   'ProgressView'
 );
 
-/**
- * `<CircularProgress>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function CircularProgressPrimitive(props: CircularProgressProps) {
-  return <NativeProgressView {...props} variant="circular" />;
-}
-
-/**
- * `<LinearProgress>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function LinearProgressPrimitive(props: LinearProgressProps) {
-  return <NativeProgressView {...props} variant="linear" />;
-}
-
 /**
  * Renders a `CircularProgress` component.
  */
-export function CircularProgress(props: CircularProgressProps & { style?: StyleProp<ViewStyle> }) {
+export function CircularProgress(props: CircularProgressProps) {
+  const { modifiers, ...restProps } = props;
   return (
-    <Host style={props.style} matchContents>
-      <CircularProgressPrimitive {...props} />
-    </Host>
+    <NativeProgressView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      variant="circular"
+    />
   );
 }
 
 /**
  * Renders a `LinearProgress` component.
  */
-export function LinearProgress(props: LinearProgressProps & { style?: StyleProp<ViewStyle> }) {
+export function LinearProgress(props: LinearProgressProps) {
+  const { modifiers, ...restProps } = props;
   return (
-    <Host style={props.style} matchContents>
-      <LinearProgressPrimitive {...props} />
-    </Host>
+    <NativeProgressView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      variant="linear"
+    />
   );
 }

package/src/swift-ui/Section/index.tsx

@@ -1,38 +1,33 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type SectionProps = {
   /**
    * On iOS, section titles are usually capitalized for consistency with platform conventions.
    */
   title?: string;
-  children: any;
-};
+  children: React.ReactNode;
+} & CommonViewModifierProps;
 
 const SectionNativeView: React.ComponentType<SectionProps> = requireNativeView(
   'ExpoUI',
   'SectionView'
 );
 
-/**
- * `<Section>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function SectionPrimitive(props: SectionProps) {
-  return <SectionNativeView {...props} />;
-}
-
 /**
  * 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(props: SectionProps & { style?: StyleProp<ViewStyle> }) {
+export function Section(props: SectionProps) {
+  const { modifiers, ...restProps } = props;
   return (
-    <Host style={props.style} matchContents>
-      <SectionPrimitive {...props} />
-    </Host>
+    <SectionNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
   );
 }