@expo/ui 55.0.0-preview.6 → 55.0.0

package/src/jetpack-compose/RNHostView/index.tsx

@@ -0,0 +1,56 @@
+import { requireNativeView } from 'expo';
+import React from 'react';
+
+import { ExpoModifier } from '../../types';
+import { PrimitiveBaseProps } from '../layout';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+interface RNHostProps extends PrimitiveBaseProps {
+  /**
+   * When true, the RNHost will update its size in the Jetpack Compose view tree to match the children's size.
+   * When false, the RNHost will use the size of the parent Jetpack Compose View.
+   * Can be only set once on mount.
+   * @default false
+   */
+  matchContents?: boolean;
+  /**
+   * The RN View to be hosted.
+   */
+  children: React.ReactElement;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+
+  /**
+   * When true, the RNHost will enable vertical scrolling.
+   * @see Official [Jetpack Compose documentation](androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)
+   */
+  verticalScrollEnabled?: boolean;
+}
+
+type NativeRNHostProps = RNHostProps;
+const NativeRNHostView: React.ComponentType<NativeRNHostProps> = requireNativeView(
+  'ExpoUI',
+  'RNHostView'
+);
+
+function transformProps(props: RNHostProps): NativeRNHostProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+export function RNHostView(props: RNHostProps) {
+  return (
+    <NativeRNHostView
+      {...transformProps(props)}
+      // `matchContents` can only be used once on mount
+      // So we force unmount when it changes to prevent unexpected layout
+      key={props.matchContents ? 'matchContents' : 'noMatchContents'}
+    />
+  );
+}

package/src/jetpack-compose/RadioButton/index.tsx

@@ -0,0 +1,48 @@
+import { requireNativeView } from 'expo';
+
+import { type ExpoModifier, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type RadioButtonProps = {
+  /**
+   * Whether the radio button is selected.
+   */
+  selected: boolean;
+  /**
+   * Callback that is called when the radio button is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> & {
+  nativeClickable: boolean;
+} & ViewEvent<'onNativeClick', void>;
+
+const RadioButtonNativeView: React.ComponentType<NativeRadioButtonProps> = requireNativeView(
+  'ExpoUI',
+  'RadioButtonView'
+);
+
+function transformProps(props: RadioButtonProps): NativeRadioButtonProps {
+  const { modifiers, onClick, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    nativeClickable: onClick != null,
+    onNativeClick: () => {
+      onClick?.();
+    },
+  };
+}
+
+/**
+ * A Material Design radio button.
+ */
+export function RadioButton(props: RadioButtonProps) {
+  return <RadioButtonNativeView {...transformProps(props)} />;
+}

package/src/jetpack-compose/SearchBar/index.tsx

@@ -0,0 +1,96 @@
+import { requireNativeView } from 'expo';
+
+import { type ExpoModifier, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SearchBarProps = {
+  /**
+   * Callback function that is called when the search text is submitted.
+   */
+  onSearch?: (searchText: string) => void;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+
+  /**
+   * The children of the component.
+   */
+  children?: React.ReactNode;
+};
+
+type PlaceholderProps = {
+  /**
+   * The children of the component.
+   */
+  children: React.ReactNode;
+};
+
+type ExpandedFullScreenSearchBarProps = {
+  /**
+   * The children of the component.
+   */
+  children: React.ReactNode;
+};
+
+type NativeSearchBarProps = Omit<SearchBarProps, 'onSearch'> &
+  ViewEvent<'onSearch', { value: string }>;
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SearchBarNativeView: React.ComponentType<NativeSearchBarProps> = requireNativeView(
+  'ExpoUI',
+  'SearchBarView'
+);
+
+// Internal slot marker component - not exported
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Placeholder component for SearchBar.
+ * This component marks its children to be rendered in the placeholder slot.
+ */
+export function SearchBarPlaceholder(props: PlaceholderProps) {
+  return <SlotNativeView slotName="placeholder">{props.children}</SlotNativeView>;
+}
+
+/**
+ * ExpandedFullScreenSearchBar component for SearchBar.
+ * This component marks its children to be rendered in the expanded full-screen search bar.
+ */
+export function ExpandedFullScreenSearchBar(props: ExpandedFullScreenSearchBarProps) {
+  return <SlotNativeView slotName="expandedFullScreenSearchBar">{props.children}</SlotNativeView>;
+}
+
+function transformSearchBarProps(props: SearchBarProps): NativeSearchBarProps {
+  const { modifiers, onSearch, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    onSearch: (event) => {
+      onSearch?.(event.nativeEvent.value);
+    },
+  };
+}
+
+/**
+ * Renders a `SearchBar` component.
+ */
+function SearchBar(props: SearchBarProps) {
+  return (
+    <SearchBarNativeView {...transformSearchBarProps(props)}>{props.children}</SearchBarNativeView>
+  );
+}
+
+SearchBar.Placeholder = SearchBarPlaceholder;
+SearchBar.ExpandedFullScreenSearchBar = ExpandedFullScreenSearchBar;
+
+export { SearchBar };

package/src/jetpack-compose/Shape/index.tsx

@@ -2,8 +2,38 @@ import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
-type ShapeType = 'star' | 'pillStar' | 'pill' | 'circle' | 'rectangle' | 'polygon';
+type ShapeType =
+  | 'star'
+  | 'pillStar'
+  | 'pill'
+  | 'circle'
+  | 'rectangle'
+  | 'polygon'
+  | 'roundedCorner';
+
+/**
+ * Corner radii for RoundedCorner shape.
+ */
+export type CornerRadii = {
+  /**
+   * Top-start corner radius in dp.
+   */
+  topStart?: number;
+  /**
+   * Top-end corner radius in dp.
+   */
+  topEnd?: number;
+  /**
+   * Bottom-start corner radius in dp.
+   */
+  bottomStart?: number;
+  /**
+   * Bottom-end corner radius in dp.
+   */
+  bottomEnd?: number;
+};
 
 export type ShapeProps = {
   /**
@@ -31,6 +61,10 @@ export type ShapeProps = {
    * @default 1.0
    */
   radius?: number;
+  /**
+   * Corner radii for RoundedCorner shape. Values are in dp.
+   */
+  cornerRadii?: CornerRadii;
   /** Color of the shape */
   color?: ColorValue;
   /**
@@ -46,7 +80,13 @@ type NativeShapeProps = Omit<ShapeProps, 'modifiers'> & {
 
 export type ShapeRecordProps = Pick<
   NativeShapeProps,
-  'cornerRounding' | 'smoothing' | 'verticesCount' | 'innerRadius' | 'radius' | 'type'
+  | 'cornerRounding'
+  | 'smoothing'
+  | 'verticesCount'
+  | 'innerRadius'
+  | 'radius'
+  | 'cornerRadii'
+  | 'type'
 >;
 
 const ShapeNativeView: React.ComponentType<NativeShapeProps> = requireNativeView(
@@ -54,48 +94,49 @@ const ShapeNativeView: React.ComponentType<NativeShapeProps> = requireNativeView
   'ShapeView'
 );
 
+function transformProps(props: ShapeProps): Omit<NativeShapeProps, 'type'> {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 export type ShapeJSXElement = React.ReactElement<NativeShapeProps> & {
   __expo_shape_jsx_element_marker: true;
 };
 
 function Star(props: ShapeProps) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="star" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="star" />) as ShapeJSXElement;
 }
 
 function PillStar(props: ShapeProps) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="pillStar" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="pillStar" />) as ShapeJSXElement;
 }
 
 function Pill(props: Pick<ShapeProps, 'smoothing' | 'color' | 'modifiers'>) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="pill" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="pill" />) as ShapeJSXElement;
 }
 
 function Circle(props: Pick<ShapeProps, 'radius' | 'verticesCount' | 'color' | 'modifiers'>) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="circle" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="circle" />) as ShapeJSXElement;
 }
 
 function Rectangle(
   props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'color' | 'modifiers'>
 ) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="rectangle" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="rectangle" />) as ShapeJSXElement;
 }
 
 function Polygon(
   props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'verticesCount' | 'color' | 'modifiers'>
 ) {
-  return (
-    <ShapeNativeView {...props} modifiers={props?.modifiers} type="polygon" />
-  ) as ShapeJSXElement;
+  return (<ShapeNativeView {...transformProps(props)} type="polygon" />) as ShapeJSXElement;
+}
+
+function RoundedCorner(props: Pick<ShapeProps, 'cornerRadii' | 'color' | 'modifiers'>) {
+  return (<ShapeNativeView {...transformProps(props)} type="roundedCorner" />) as ShapeJSXElement;
 }
 
 export const Shape = {
@@ -105,12 +146,14 @@ export const Shape = {
   Circle,
   Rectangle,
   Polygon,
+  RoundedCorner,
 };
 
 export function parseJSXShape(shape: ShapeJSXElement): ShapeRecordProps;
 export function parseJSXShape(shape?: ShapeJSXElement): ShapeRecordProps | undefined;
 export function parseJSXShape(shape?: ShapeJSXElement): ShapeRecordProps | undefined {
   if (!shape) return undefined;
-  const { cornerRounding, smoothing, verticesCount, innerRadius, radius, type } = shape.props;
-  return { cornerRounding, smoothing, verticesCount, innerRadius, radius, type };
+  const { cornerRounding, smoothing, verticesCount, innerRadius, radius, cornerRadii, type } =
+    shape.props;
+  return { cornerRounding, smoothing, verticesCount, innerRadius, radius, cornerRadii, type };
 }

package/src/jetpack-compose/Slider/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
 import { ExpoModifier, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * Colors for slider's core elements.
@@ -64,12 +65,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,

package/src/jetpack-compose/Spacer/index.tsx

@@ -0,0 +1,43 @@
+import { requireNativeView } from 'expo';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SpacerProps = {
+  /**
+   * Modifiers for the component. Use weight() modifier to make the spacer flexible.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeSpacerProps = SpacerProps;
+const SpacerNativeView: React.ComponentType<SpacerProps> = requireNativeView(
+  'ExpoUI',
+  'SpacerView'
+);
+
+function transformProps(props: SpacerProps): NativeSpacerProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+/**
+ * A spacer component that fills available space.
+ * Use with the weight() modifier to create flexible spacing in Row or Column layouts.
+ *
+ * @example
+ * ```tsx
+ * <Row>
+ *   <Text>Left</Text>
+ *   <Spacer modifiers={[weight(1)]} />
+ *   <Text>Right</Text>
+ * </Row>
+ * ```
+ */
+export function Spacer(props: SpacerProps) {
+  return <SpacerNativeView {...transformProps(props)} />;
+}

package/src/jetpack-compose/Surface/index.tsx

@@ -0,0 +1,66 @@
+import { requireNativeView } from 'expo';
+import React from 'react';
+import { type ColorValue } from 'react-native';
+
+import { type ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SurfaceProps = {
+  /**
+   * The content to display inside the surface.
+   */
+  children?: React.ReactNode;
+  /**
+   * The background color of the surface.
+   * Defaults to `MaterialTheme.colorScheme.surface`.
+   */
+  color?: ColorValue;
+  /**
+   * The color of the content inside the surface.
+   * Defaults to `contentColorFor(color)`.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The tonal elevation of the surface, which affects its background color
+   * based on the color scheme. Value in dp.
+   *
+   * @default 0
+   */
+  tonalElevation?: number;
+  /**
+   * The shadow elevation of the surface. Value in dp.
+   *
+   * @default 0
+   */
+  shadowElevation?: number;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeSurfaceProps = SurfaceProps;
+
+const SurfaceNativeView: React.ComponentType<NativeSurfaceProps> = requireNativeView(
+  'ExpoUI',
+  'SurfaceView'
+);
+
+function transformProps(props: SurfaceProps): NativeSurfaceProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+/**
+ * A Material Design surface container. Surface is responsible for:
+ * - Clipping content to the shape
+ * - Applying background color based on tonal elevation
+ * - Providing content color to its children
+ */
+export function Surface(props: SurfaceProps) {
+  return <SurfaceNativeView {...transformProps(props)} />;
+}

package/src/jetpack-compose/Switch/index.tsx

@@ -2,6 +2,8 @@ import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, type ColorValue } from 'react-native';
 
 import { ExpoModifier } from '../../types';
+import { ExpoUIModule } from '../ExpoUIModule';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 // @docsMissing
 /**
@@ -58,6 +60,12 @@ export type SwitchProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
+
+  /**
+   * Children containing ThumbContent slot.
+   * @platform android
+   */
+  children?: React.ReactNode;
 } & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
 
 export type SwitchSwitchVariantProps = {
@@ -87,11 +95,33 @@ type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
   onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
 };
 
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+type ThumbContentProps = {
+  children: React.ReactNode;
+};
+
 const SwitchNativeView: React.ComponentType<NativeSwitchProps> = requireNativeView(
   'ExpoUI',
   'SwitchView'
 );
 
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Custom content to be displayed inside the switch thumb.
+ * @platform android
+ */
+export function SwitchThumbContent(props: ThumbContentProps) {
+  return <SlotNativeView slotName="thumbContent">{props.children}</SlotNativeView>;
+}
+
 function getElementColors(props: SwitchProps) {
   if (props.variant === 'button') {
     return undefined;
@@ -110,21 +140,26 @@ function getElementColors(props: SwitchProps) {
   return props.elementColors;
 }
 
-/**
- * @hidden
- */
-export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
+function transformSwitchProps(props: SwitchProps): Omit<NativeSwitchProps, 'children'> {
+  const { modifiers, children, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     variant: props.variant ?? 'switch',
     elementColors: getElementColors(props),
     color: props.color,
     onValueChange: ({ nativeEvent: { value } }) => {
       props?.onValueChange?.(value);
     },
-  } as NativeSwitchProps;
+  } as Omit<NativeSwitchProps, 'children'>;
 }
 
-export function Switch(props: SwitchProps) {
-  return <SwitchNativeView {...transformSwitchProps(props)} />;
+function SwitchComponent(props: SwitchProps) {
+  return <SwitchNativeView {...transformSwitchProps(props)}>{props.children}</SwitchNativeView>;
 }
+
+SwitchComponent.ThumbContent = SwitchThumbContent;
+SwitchComponent.DefaultIconSize = ExpoUIModule.SwitchDefaultIconSize;
+
+export { SwitchComponent as Switch };