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

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

@@ -1,10 +1,10 @@
 import { requireNativeView } from 'expo';
 import { Ref } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../types';
-import { Host } from '../Host';
+import { type ViewEvent } from '../../types';
 import { TextFieldKeyboardType } from '../TextField';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 /**
  * Can be used for imperatively setting text on the SecureField component.
@@ -28,9 +28,9 @@ export type SecureFieldProps = {
    */
   onChangeText: (value: string) => void;
   keyboardType?: TextFieldKeyboardType;
-};
+} & CommonViewModifierProps;
 
-export type NativeSecureFieldProps = Omit<SecureFieldProps, 'onChangeText'> & {} & ViewEvent<
+type NativeSecureFieldProps = Omit<SecureFieldProps, 'onChangeText'> & {} & ViewEvent<
     'onValueChanged',
     { value: string }
   >;
@@ -41,12 +41,12 @@ const SecureFieldNativeView: React.ComponentType<NativeSecureFieldProps> = requi
   'SecureFieldView'
 );
 
-/**
- * @hidden
- */
 function transformSecureFieldProps(props: SecureFieldProps): NativeSecureFieldProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     onValueChanged: (event) => {
       props.onChangeText?.(event.nativeEvent.value);
     },
@@ -56,18 +56,6 @@ function transformSecureFieldProps(props: SecureFieldProps): NativeSecureFieldPr
 /**
  * Renders a `SecureField` component. Should mostly be used for embedding text inputs inside of SwiftUI lists and sections. Is an uncontrolled component.
  */
-export function SecureField(props: SecureFieldProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <SecureFieldPrimitive {...props} />
-    </Host>
-  );
-}
-
-/**
- * `<SecureField>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function SecureFieldPrimitive(props: SecureFieldProps) {
+export function SecureField(props: SecureFieldProps) {
   return <SecureFieldNativeView {...transformSecureFieldProps(props)} />;
 }

package/src/swift-ui/ShareLink/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 ShareLinkProps = {
   /**
@@ -28,21 +28,13 @@ export type ShareLinkProps = {
    * Optional children to be rendered inside the share link.
    */
   children?: React.ReactNode;
-};
+} & CommonViewModifierProps;
 
 const ShareLinkNativeView: React.ComponentType<ShareLinkProps> = requireNativeView(
   'ExpoUI',
   'ShareLinkView'
 );
 
-/**
- * `<ShareLink>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function ShareLinkPrimitive(props: ShareLinkProps) {
-  return <ShareLinkNativeView {...props} />;
-}
-
 /**
  * Renders the native ShareLink component with the provided properties.
  *
@@ -50,10 +42,13 @@ export function ShareLinkPrimitive(props: ShareLinkProps) {
  * @returns {JSX.Element} The rendered native ShareLink component.
  * @platform ios
  */
-export function ShareLink(props: ShareLinkProps & { style?: StyleProp<ViewStyle> }) {
+export function ShareLink(props: ShareLinkProps) {
+  const { modifiers, ...restProps } = props;
   return (
-    <Host style={props.style} matchContents>
-      <ShareLinkPrimitive {...props} />
-    </Host>
+    <ShareLinkNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
   );
 }

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

@@ -1,8 +1,8 @@
 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';
 
 export type SliderProps = {
   /**
@@ -33,7 +33,7 @@ export type SliderProps = {
    * Callback triggered on dragging along the slider.
    */
   onValueChange?: (value: number) => void;
-};
+} & CommonViewModifierProps;
 
 type NativeSliderProps = Omit<SliderProps, 'onValueChange'> &
   ViewEvent<'onValueChanged', { value: number }>;
@@ -43,12 +43,12 @@ const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeVi
   'SliderView'
 );
 
-/**
- * @hidden
- */
-export function transformSliderProps(props: SliderProps): NativeSliderProps {
+function transformSliderProps(props: SliderProps): NativeSliderProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     min: props.min ?? 0,
     max: props.max ?? 1,
     steps: props.steps ?? 0,
@@ -60,14 +60,6 @@ export function transformSliderProps(props: SliderProps): NativeSliderProps {
   };
 }
 
-export function SliderPrimitive(props: SliderProps) {
+export function Slider(props: SliderProps) {
   return <SliderNativeView {...transformSliderProps(props)} />;
 }
-
-export function Slider(props: SliderProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <SliderPrimitive {...props} />
-    </Host>
-  );
-}

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 
-import { type CommonViewModifierProps } from './types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export interface SpacerProps extends CommonViewModifierProps {
   /**
@@ -17,6 +18,15 @@ const SpacerNativeView: React.ComponentType<NativeSpacerProps> = requireNativeVi
   'SpacerView'
 );
 
+function transformSpacerProps(props: SpacerProps): NativeSpacerProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 export function Spacer(props: SpacerProps) {
-  return <SpacerNativeView {...props} />;
+  return <SpacerNativeView {...transformSpacerProps(props)} />;
 }

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

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
-import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { NativeSyntheticEvent } from 'react-native';
 
-import { Host } from '../Host';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export type SwitchProps = {
   /**
@@ -26,7 +27,8 @@ export type SwitchProps = {
    * Picker color. On iOS, it only applies to the `menu` variant.
    */
   color?: string;
-} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
+} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps) &
+  CommonViewModifierProps;
 
 export type SwitchSwitchVariantProps = {
   variant?: 'switch';
@@ -50,12 +52,12 @@ const SwitchNativeView: React.ComponentType<NativeSwitchProps> = requireNativeVi
   'SwitchView'
 );
 
-/**
- * @hidden
- */
-export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
+function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     variant: props.variant ?? 'switch',
     color: props.color,
     onValueChange: ({ nativeEvent: { value } }) => {
@@ -64,21 +66,9 @@ export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
   } as NativeSwitchProps;
 }
 
-/**
- * `<Switch>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function SwitchPrimitive(props: SwitchProps) {
-  return <SwitchNativeView {...transformSwitchProps(props)} />;
-}
-
 /**
  * Displays a native switch component.
  */
-export function Switch(props: SwitchProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <SwitchPrimitive {...props} />
-    </Host>
-  );
+export function Switch(props: SwitchProps) {
+  return <SwitchNativeView {...transformSwitchProps(props)} />;
 }

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 
-import { type CommonViewModifierProps } from './types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
 
 export interface TextProps extends CommonViewModifierProps {
   children: string;
@@ -45,8 +46,11 @@ const TextNativeView: React.ComponentType<Omit<TextProps, 'children'> & { text:
   requireNativeView('ExpoUI', 'TextView');
 
 function transformTextProps(props: TextProps): NativeTextProps {
-  const { children, ...restProps } = props;
+  const { children, modifiers, ...restProps } = props;
+
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     text: children ?? '',
   };

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

@@ -1,9 +1,9 @@
 import { requireNativeView } from 'expo';
 import { Ref } from 'react';
-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';
 
 /**
  * Determines which keyboard to open. For example, `'numeric'`.
@@ -78,7 +78,7 @@ export type TextFieldProps = {
    * @default true
    */
   autocorrection?: boolean;
-};
+} & CommonViewModifierProps;
 
 export type NativeTextFieldProps = Omit<TextFieldProps, 'onChangeText'> & {} & ViewEvent<
     'onValueChanged',
@@ -91,12 +91,12 @@ const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNa
   'TextFieldView'
 );
 
-/**
- * @hidden
- */
 function transformTextFieldProps(props: TextFieldProps): NativeTextFieldProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     onValueChanged: (event) => {
       props.onChangeText?.(event.nativeEvent.value);
     },
@@ -106,18 +106,6 @@ function transformTextFieldProps(props: TextFieldProps): NativeTextFieldProps {
 /**
  * Renders a `TextField` component. Should mostly be used for embedding text inputs inside of SwiftUI lists and sections. Is an uncontrolled component.
  */
-export function TextField(props: TextFieldProps & { style?: StyleProp<ViewStyle> }) {
-  return (
-    <Host style={props.style} matchContents>
-      <TextFieldPrimitive {...props} />
-    </Host>
-  );
-}
-
-/**
- * `<TextField>` component without a host view.
- * You should use this with a `Host` component in ancestor.
- */
-export function TextFieldPrimitive(props: TextFieldProps) {
+export function TextField(props: TextFieldProps) {
   return <TextFieldNativeView {...transformTextFieldProps(props)} />;
 }

package/src/swift-ui/index.tsx

@@ -1,17 +1,24 @@
 export * from './BottomSheet';
 export * from './Button';
 export * from './ColorPicker';
+export * from './ContentUnavailableView';
 export * from './ContextMenu';
 export * from './DatePicker';
+export * from './DisclosureGroup';
+export * from './Form';
 export * from './Gauge';
 export * from './Host';
+export * from './Image';
 export * from './Label';
+export * from './Layout';
 export * from './List';
 export * from './Picker';
 export * from './Progress';
 export * from './Section';
 export * from './ShareLink';
 export * from './Slider';
+export * from './Spacer';
 export * from './Switch';
+export * from './Text';
 export * from './TextField';
 export * from './SecureField';