@expo/ui 55.0.0-preview.6 → 55.0.0

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

@@ -0,0 +1,274 @@
+import { requireNativeView } from 'expo';
+
+import { ExpoModifier } from '../../types';
+import { getTextFromChildren } from '../../utils';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Font weight options for text styling.
+ */
+export type TextFontWeight =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+
+/**
+ * Font style options for text styling.
+ */
+export type TextFontStyle = 'normal' | 'italic';
+
+/**
+ * Text alignment options.
+ */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+
+/**
+ * Text decoration options.
+ */
+export type TextDecoration = 'none' | 'underline' | 'lineThrough';
+
+/**
+ * Text overflow behavior options.
+ */
+export type TextOverflow = 'clip' | 'ellipsis' | 'visible';
+
+/**
+ * Material 3 Typography scale styles.
+ * Corresponds to MaterialTheme.typography in Jetpack Compose.
+ */
+export type TypographyStyle =
+  | 'displayLarge'
+  | 'displayMedium'
+  | 'displaySmall'
+  | 'headlineLarge'
+  | 'headlineMedium'
+  | 'headlineSmall'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'titleSmall'
+  | 'bodyLarge'
+  | 'bodyMedium'
+  | 'bodySmall'
+  | 'labelLarge'
+  | 'labelMedium'
+  | 'labelSmall';
+
+/**
+ * Text style properties that can be applied to text.
+ * Corresponds to Jetpack Compose's TextStyle.
+ */
+export type TextStyle = {
+  /**
+   * Material 3 Typography style to use as the base style.
+   * When specified, applies the predefined Material 3 typography style.
+   * Other properties in this style object will override specific values from the typography.
+   *
+   * @example
+   * ```tsx
+   * style={{ typography: "bodyLarge" }}
+   * style={{ typography: "headlineMedium", fontWeight: "bold" }}
+   * ```
+   */
+  typography?: TypographyStyle;
+
+  /**
+   * The font size in sp (scale-independent pixels).
+   */
+  fontSize?: number;
+
+  /**
+   * The font weight of the text.
+   */
+  fontWeight?: TextFontWeight;
+
+  /**
+   * The font style of the text.
+   */
+  fontStyle?: TextFontStyle;
+
+  /**
+   * The text alignment.
+   */
+  textAlign?: TextAlign;
+
+  /**
+   * The text decoration.
+   */
+  textDecoration?: TextDecoration;
+
+  /**
+   * The letter spacing in sp.
+   */
+  letterSpacing?: number;
+
+  /**
+   * The line height in sp.
+   */
+  lineHeight?: number;
+};
+
+export type TextProps = {
+  /**
+   * The text content to display.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * The color of the text.
+   */
+  color?: string;
+
+  /**
+   * How visual overflow should be handled.
+   * - 'clip': Clips the overflowing text to fix its container
+   * - 'ellipsis': Uses an ellipsis to indicate that the text has overflowed
+   * - 'visible': Renders overflow text outside its container
+   */
+  overflow?: TextOverflow;
+
+  /**
+   * Whether the text should break at soft line breaks.
+   * If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
+   */
+  softWrap?: boolean;
+
+  /**
+   * An optional maximum number of lines for the text to span, wrapping if necessary.
+   * If the text exceeds the given number of lines, it will be truncated according to overflow.
+   */
+  maxLines?: number;
+
+  /**
+   * The minimum height in terms of minimum number of visible lines.
+   */
+  minLines?: number;
+
+  /**
+   * Style configuration for the text.
+   * Corresponds to Jetpack Compose's TextStyle parameter.
+   */
+  style?: TextStyle;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeTextProps = Omit<TextProps, 'children' | 'style'> & {
+  text: string;
+  typography?: TypographyStyle;
+  fontSize?: number;
+  fontWeight?: TextFontWeight;
+  fontStyle?: TextFontStyle;
+  textAlign?: TextAlign;
+  textDecoration?: TextDecoration;
+  letterSpacing?: number;
+  lineHeight?: number;
+};
+
+const TextNativeView: React.ComponentType<NativeTextProps> = requireNativeView(
+  'ExpoUI',
+  'TextView'
+);
+
+function transformTextProps(props: TextProps): NativeTextProps {
+  const { children, modifiers, style, ...restProps } = props;
+
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    text: getTextFromChildren(children) ?? '',
+    // Extract typography from style (used as base style)
+    typography: style?.typography,
+    // Flatten other style properties (these override the typography style)
+    fontSize: style?.fontSize,
+    fontWeight: style?.fontWeight,
+    fontStyle: style?.fontStyle,
+    textAlign: style?.textAlign,
+    textDecoration: style?.textDecoration,
+    letterSpacing: style?.letterSpacing,
+    lineHeight: style?.lineHeight,
+  };
+}
+
+/**
+ * Renders a Text component using Jetpack Compose.
+ *
+ * The Text component provides comprehensive text styling capabilities.
+ * The API is aligned with Jetpack Compose's Text composable, where:
+ * - Top-level props (color, maxLines, etc.) match Compose's Text parameters
+ * - `style` object corresponds to TextStyle, including typography, fontSize, fontWeight, textAlign, etc.
+ * - `style.typography` applies Material 3 typography styles (like MaterialTheme.typography)
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { Text } from 'expo-ui';
+ *
+ * <Text>Hello World</Text>
+ * ```
+ *
+ * @example
+ * Using Material 3 Typography (matches Jetpack Compose MaterialTheme.typography):
+ * ```tsx
+ * <Text style={{ typography: "bodyLarge" }}>Body text</Text>
+ * <Text style={{ typography: "headlineMedium" }}>Headline</Text>
+ * <Text style={{ typography: "titleSmall" }}>Small title</Text>
+ * ```
+ *
+ * @example
+ * Typography with style overrides:
+ * ```tsx
+ * <Text
+ *   color="#007AFF"
+ *   style={{
+ *     typography: "bodyLarge",
+ *     fontWeight: "bold"  // Override the typography's font weight
+ *   }}
+ * >
+ *   Custom styled body text
+ * </Text>
+ * ```
+ *
+ * @example
+ * With custom style object (matches Jetpack Compose TextStyle):
+ * ```tsx
+ * <Text
+ *   color="#007AFF"
+ *   style={{
+ *     fontSize: 18,
+ *     fontWeight: "bold",
+ *     textAlign: "center",
+ *     letterSpacing: 1.2
+ *   }}
+ *   modifiers={[ExpoUI.padding(16)]}
+ * >
+ *   Styled text
+ * </Text>
+ * ```
+ *
+ * @example
+ * Text truncation with ellipsis:
+ * ```tsx
+ * <Text
+ *   maxLines={2}
+ *   overflow="ellipsis"
+ * >
+ *   This is a very long text that will be truncated after two lines
+ *   with an ellipsis at the end to indicate there's more content...
+ * </Text>
+ * ```
+ */
+export function Text(props: TextProps) {
+  return <TextNativeView {...transformTextProps(props)} />;
+}

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

@@ -0,0 +1,55 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { ExpoModifier, ViewEvent } from '../../types';
+import { getTextFromChildren } from '../../utils';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type TextButtonProps = {
+  /**
+   * The text content to display in the button.
+   */
+  children?: string | string[] | React.JSX.Element;
+  /**
+   * The color of the button text.
+   */
+  color?: ColorValue;
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Callback that is called when the button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeTextButtonProps = Omit<TextButtonProps, 'children' | 'onPress'> & {
+  text: string;
+} & ViewEvent<'onButtonPressed', void>;
+
+const TextButtonNativeView: React.ComponentType<NativeTextButtonProps> = requireNativeView(
+  'ExpoUI',
+  'TextButtonView'
+);
+
+function transformProps(props: TextButtonProps): NativeTextButtonProps {
+  const { children, modifiers, onPress, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    text: getTextFromChildren(children) ?? '',
+    onButtonPressed: onPress,
+  };
+}
+/**
+ * A text button component that displays a clickable text label.
+ */
+export function TextButton(props: TextButtonProps) {
+  return <TextButtonNativeView {...transformProps(props)} />;
+}

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { Ref } from 'react';
 
 import { ExpoModifier, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * @hidden Not used anywhere yet.
@@ -96,12 +97,12 @@ const TextInputNativeView: React.ComponentType<NativeTextInputProps> = requireNa
   'TextInputView'
 );
 
-/**
- * @hidden
- */
 function transformTextInputProps(props: TextInputProps): NativeTextInputProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     onValueChanged: (event) => {
       props.onChangeText?.(event.nativeEvent.value);
     },

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

@@ -0,0 +1,83 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { type ExpoModifier, type ViewEvent } from '../../types';
+import { ExpoUIModule } from '../ExpoUIModule';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type ToggleButtonProps = {
+  /**
+   * Whether the toggle button is checked.
+   */
+  checked: boolean;
+  /**
+   * Text to display in the button.
+   */
+  text?: string;
+  /**
+   * The variant of the toggle button.
+   * - `'default'` - Material 3 ToggleButton
+   * - `'icon'` - Icon toggle button
+   * - `'filledIcon'` - Filled icon toggle button
+   * - `'outlinedIcon'` - Outlined icon toggle button
+   * @default 'default'
+   */
+  variant?: 'default' | 'icon' | 'filledIcon' | 'outlinedIcon';
+  /**
+   * The color of the toggle button when checked.
+   */
+  color?: ColorValue;
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Callback that is called when the checked state changes.
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+
+  /**
+   * The content to display inside the toggle button.
+   */
+  children?: React.ReactNode;
+};
+
+type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange'> &
+  ViewEvent<'onCheckedChange', { checked: boolean }>;
+
+const ToggleButtonNativeView: React.ComponentType<NativeToggleButtonProps> = requireNativeView(
+  'ExpoUI',
+  'ToggleButtonView'
+);
+
+function transformProps(props: ToggleButtonProps): Omit<NativeToggleButtonProps, 'children'> {
+  const { modifiers, onCheckedChange, children, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    onCheckedChange: onCheckedChange
+      ? ({ nativeEvent: { checked } }) => onCheckedChange(checked)
+      : undefined,
+  };
+}
+/**
+ * A toggle button component that can be toggled on and off.
+ *
+ * When `text` prop is provided, it displays the text.
+ * Otherwise, custom children can be passed to render custom content.
+ */
+function ToggleButton(props: ToggleButtonProps) {
+  const { children } = props;
+
+  return <ToggleButtonNativeView {...transformProps(props)}>{children}</ToggleButtonNativeView>;
+}
+
+ToggleButton.DefaultIconSpacing = ExpoUIModule.ToggleButtonIconSpacing;
+ToggleButton.DefaultIconSize = ExpoUIModule.ToggleButtonIconSize;
+
+export { ToggleButton };

package/src/jetpack-compose/index.ts

@@ -1,18 +1,38 @@
+import './MaterialSymbolsAssetsTransformer.fx';
+
 export * from './AlertDialog';
+export * from './BasicAlertDialog';
+export * from './Card';
 export * from './Chip';
+export * from './FilterChip';
 export * from './Button';
+export * from './Icon';
 export * from './IconButton';
 export * from './ContextMenu';
 export * from './Divider';
 export * from './Host';
+export * from './LazyColumn';
+export * from './ListItem';
+export * from './RNHostView';
 export * from './DatePicker';
 export * from './Picker';
 export * from './Progress';
 export * from './Slider';
+export * from './Spacer';
 export * from './Switch';
+export * from './TextButton';
 export * from './TextInput';
+export * from './ToggleButton';
 export * from './Shape';
-export * from './BottomSheet';
+export * from './ModalBottomSheet';
 export * from './Carousel';
+export * from './SearchBar';
+export * from './DockedSearchBar';
+export * from './HorizontalFloatingToolbar';
+export * from './PullToRefreshBox';
+export * from './RadioButton';
+export * from './Surface';
+export * from './Text';
 
 export * from './layout';
+export { ViewEvent } from '../types';

package/src/jetpack-compose/layout.tsx

@@ -1,8 +1,7 @@
 import { requireNativeView } from 'expo';
-import { ColorValue, Platform } from 'react-native';
 
 import { ExpoModifier } from '../types';
-import { getTextFromChildren } from '../utils';
+import { createViewModifierEventListener } from './modifiers/utils';
 
 export type PrimitiveBaseProps = {
   /**
@@ -17,16 +16,29 @@ export type HorizontalArrangement =
   | 'center'
   | 'spaceBetween'
   | 'spaceAround'
-  | 'spaceEvenly';
+  | 'spaceEvenly'
+  | { spacedBy: number };
 export type VerticalArrangement =
   | 'top'
   | 'bottom'
   | 'center'
   | 'spaceBetween'
   | 'spaceAround'
-  | 'spaceEvenly';
+  | 'spaceEvenly'
+  | { spacedBy: number };
 export type HorizontalAlignment = 'start' | 'end' | 'center';
 export type VerticalAlignment = 'top' | 'bottom' | 'center';
+export type ContentAlignment =
+  | 'topStart'
+  | 'topCenter'
+  | 'topEnd'
+  | 'centerStart'
+  | 'center'
+  | 'centerEnd'
+  | 'bottomStart'
+  | 'bottomCenter'
+  | 'bottomEnd';
+export type FloatingToolbarExitAlwaysScrollBehavior = 'top' | 'bottom' | 'start' | 'end';
 
 type LayoutBaseProps = {
   children?: React.ReactNode;
@@ -34,88 +46,61 @@ type LayoutBaseProps = {
   verticalArrangement?: VerticalArrangement;
   horizontalAlignment?: HorizontalAlignment;
   verticalAlignment?: VerticalAlignment;
+  contentAlignment?: ContentAlignment;
+  floatingToolbarExitAlwaysScrollBehavior?: FloatingToolbarExitAlwaysScrollBehavior;
   modifiers?: ExpoModifier[];
 } & PrimitiveBaseProps;
 
+function transformProps(props: LayoutBaseProps) {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 //#region Box Component
-export type BoxProps = Pick<LayoutBaseProps, 'children' | 'modifiers'>;
-const BoxNativeView: React.ComponentType<BoxProps> | null =
-  Platform.OS === 'android' ? requireNativeView('ExpoUI', 'BoxView') : null;
+export type BoxProps = Pick<
+  LayoutBaseProps,
+  'children' | 'modifiers' | 'contentAlignment' | 'floatingToolbarExitAlwaysScrollBehavior'
+>;
+const BoxNativeView: React.ComponentType<BoxProps> = requireNativeView('ExpoUI', 'BoxView');
+
 export function Box(props: BoxProps) {
-  if (!BoxNativeView) {
-    return null;
-  }
-  return <BoxNativeView {...props} />;
+  return <BoxNativeView {...transformProps(props)} />;
 }
 //#endregion
 
 //#region Row Component
 export type RowProps = LayoutBaseProps;
-const RowNativeView: React.ComponentType<RowProps> | null =
-  Platform.OS === 'android' ? requireNativeView('ExpoUI', 'RowView') : null;
+const RowNativeView: React.ComponentType<RowProps> = requireNativeView('ExpoUI', 'RowView');
 export function Row(props: RowProps) {
-  if (!RowNativeView) {
-    return null;
-  }
-  return <RowNativeView {...props} />;
+  return <RowNativeView {...transformProps(props)} />;
 }
 //#endregion
 
-//#region Column Component
-export type ColumnProps = LayoutBaseProps;
-const ColumnNativeView: React.ComponentType<ColumnProps> | null =
-  Platform.OS === 'android' ? requireNativeView('ExpoUI', 'ColumnView') : null;
-export function Column(props: ColumnProps) {
-  if (!ColumnNativeView) {
-    return null;
-  }
-  return <ColumnNativeView {...props} />;
+//#region FlowRow Component
+export type FlowRowProps = Pick<
+  LayoutBaseProps,
+  'children' | 'modifiers' | 'horizontalArrangement' | 'verticalArrangement'
+>;
+const FlowRowNativeView: React.ComponentType<FlowRowProps> = requireNativeView(
+  'ExpoUI',
+  'FlowRowView'
+);
+export function FlowRow(props: FlowRowProps) {
+  return <FlowRowNativeView {...transformProps(props)} />;
 }
 //#endregion
 
-//#region Text Component
-
-export type TextFontWeight =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
-
-export type TextProps = {
-  /**
-   * The children of the text.
-   * Only string and number are supported.
-   */
-  children?: React.ReactNode;
-  color?: ColorValue;
-  fontSize?: number;
-  fontWeight?: TextFontWeight;
-} & PrimitiveBaseProps;
-
-const TextNativeView: React.ComponentType<Omit<TextProps, 'children'> & { text: string }> | null =
-  Platform.OS === 'android' ? requireNativeView('ExpoUI', 'TextView') : null;
-type NativeTextProps = Omit<TextProps, 'children'> & {
-  text: string;
-};
-function transformTextProps(props: TextProps): NativeTextProps {
-  const { children, ...restProps } = props;
-  const text = getTextFromChildren(children);
-  return {
-    ...restProps,
-    text: text ?? '',
-  };
-}
-export function Text(props: TextProps) {
-  if (!TextNativeView) {
-    return null;
-  }
-  return <TextNativeView {...transformTextProps(props)} />;
+//#region Column Component
+export type ColumnProps = LayoutBaseProps;
+const ColumnNativeView: React.ComponentType<ColumnProps> = requireNativeView(
+  'ExpoUI',
+  'ColumnView'
+);
+export function Column(props: ColumnProps) {
+  return <ColumnNativeView {...transformProps(props)} />;
 }
 //#endregion

package/src/jetpack-compose/modifiers/createModifier.ts

@@ -0,0 +1,27 @@
+/**
+ * Base interface for all view modifiers.
+ * All modifiers must have a type field and can include arbitrary parameters.
+ */
+export interface ModifierConfig {
+  $type: string;
+  [key: string]: any;
+  eventListener?: (args: any) => void;
+}
+
+/**
+ * Factory function to create modifier configuration objects.
+ */
+export function createModifier(type: string, params: Record<string, any> = {}): ModifierConfig {
+  return { $type: type, ...params };
+}
+
+/**
+ * Creates a modifier with an event listener.
+ */
+export function createModifierWithEventListener(
+  type: string,
+  eventListener: (args: any) => void,
+  params: Record<string, any> = {}
+): ModifierConfig {
+  return { $type: type, ...params, eventListener };
+}