@spec activity_indicator(keyword() | map()) :: map()

Returns an :activity_indicator leaf node. Displays a circular loading spinner.

Props:

• :size — :small or :large (default: :small)
• :color — spinner color (default: theme primary)
• :animating — whether spinner is animating (default: true)

@spec button(keyword() | map()) :: map()

Returns a :button leaf node. A simple platform button.

Props:

• :title — button label (required)
• :on_tap — {pid, tag} tuple; fired when button is pressed
• :color — button color (use :background for theme-aware coloring)
• :disabled — boolean, disables the button (default: false)

@spec camera_preview(keyword() | map()) :: map()

Returns a :camera_preview component node. Renders a live camera feed inline.

Call Dala.Camera.start_preview/2 before mounting this component, and Dala.Camera.stop_preview/1 when done.

Props:

• :facing — :back (default) or :front
• :width, :height — dimensions in dp/pts; omit to fill parent

@spec image(keyword() | map()) :: map()

Returns an :image leaf node. Displays an image from a URL or local asset.

Props:

• :src — URL or local asset name (required)
• :resize_mode — :cover (default), :contain, :stretch, :repeat
• :width, :height — dimensions in dp/pts; omit to auto-size
• :corner_radius — optional rounded corners

@spec list(keyword() | map()) :: map()

Returns a :list node. A data-driven list (FlatList equivalent).

Leverages Dala.List for rendering. Requires an :id prop to identify the list for selection events and custom renderers.

Props:

• :data — enumerable of items to render (mapped to :items)
• :id — atom identifier for the list (required for selection events)
• :on_end_reached — {pid, tag} tuple; fired when list reaches end
• :scroll — boolean, enables scrolling (default: true)

For custom item rendering, register a renderer via Dala.List.put_renderer/3 in mount/3.

Examples

Dala.UI.list(id: :my_list, data: assigns.items)

# With custom renderer in mount/3:
# Dala.List.put_renderer(socket, :my_list, fn item -> ... end)

@spec modal(keyword() | map(), list()) :: map()

Returns a :modal container node. Presents content above the enclosing view.

Props:

• :visible — boolean, controls whether modal is shown (default: false)
• :on_dismiss — {pid, tag} tuple; fired when user dismisses modal
• :presentation_style — :full_screen (default) or :page_sheet

@spec native_view(module(), keyword() | map()) :: map()

Returns a :native_view node that renders a platform-native component.

module must implement the Dala.Component behaviour and be registered on the native side via dalaNativeViewRegistry. The :id must be unique per screen — a duplicate raises at render time.

All other props are passed to mount/2 and update/2 on the component.

Example

Dala.UI.native_view(MyApp.ChartComponent, id: :revenue_chart, data: @points)

@spec pressable(keyword() | map(), list()) :: map()

Returns a :pressable container node. A pressable wrapper (Pressable equivalent).

Props:

• :on_press — {pid, tag} tuple; fired when pressed
• :on_long_press — {pid, tag} tuple; fired on long press

@spec progress_bar(keyword() | map()) :: map()

Returns a :progress_bar leaf node. Displays a progress bar.

Props:

• :progress — float 0.0 to 1.0, current progress (default: 0.0)
• :indeterminate — boolean, shows indeterminate spinner (default: false)
• :color — progress bar color

@spec refresh_control(keyword() | map()) :: map()

Returns a :refresh_control leaf node. Adds pull-to-refresh to ScrollView.

Attach as a child of :scroll node. The scroll node handles the refresh gesture.

Props:

• :on_refresh — {pid, tag} tuple; fired when user pulls to refresh
• :refreshing — boolean, true while refresh is in progress
• :tint_color — color of the refresh spinner

@spec safe_area(list()) :: map()

Returns a :safe_area container node. Applies safe area insets (SafeAreaView equivalent).

Renders children within the safe area boundaries (avoiding notches, status bar, etc.).

@spec scroll(keyword() | map(), list()) :: map()

Returns a :scroll container node. A scrollable view (ScrollView equivalent).

Props:

• :horizontal — boolean, enables horizontal scrolling (default: false)
• :on_end_reached — {pid, tag} tuple; fired when scroll reaches bottom/end
• :on_scroll — {pid, tag} tuple; fired during scrolling with scroll position

@spec status_bar(keyword() | map()) :: map()

Returns a :status_bar leaf node. Controls the status bar appearance.

Props:

• :bar_style — :default (dark text) or :light_content (light text)
• :hidden — boolean, hides the status bar (default: false)

@spec switch(keyword() | map()) :: map()

Returns a :switch leaf node. A boolean toggle switch.

Props:

• :value — boolean, on/off state (default: false)
• :on_toggle — {pid, tag} tuple; fires {:toggle, tag, new_value} to handler
• :track_color — color when switch is on
• :thumb_color — color of the draggable thumb

@spec text(keyword() | map()) :: map()

Returns a :text leaf node.

Props

• :text — the string to display (required)
• :text_color — color value passed to set_text_color/2 in the NIF
• :text_size — font size in sp passed to set_text_size/2 in the NIF

Examples

Dala.UI.text(text: "Hello")
#=> %{type: :text, props: %{text: "Hello"}, children: []}

Dala.UI.text(text: "Hello", text_color: "#ffffff", text_size: 18)
#=> %{type: :text, props: %{text: "Hello", text_color: "#ffffff", text_size: 18}, children: []}

@spec webview(keyword() | map()) :: map()

Returns a :webview component node. Renders a native web view inline.

The JS bridge is injected automatically — the page can call window.dala.send(data) to deliver messages to handle_info({:webview, :message, data}, socket), and Elixir can push to JS via Dala.WebView.post_message/2.

Props:

• :url — URL to load (required)
• :allow — list of URL prefixes that navigation is permitted to (default: allow all). Blocked attempts arrive as {:webview, :blocked, url} in handle_info.
• :show_url — show a native URL label above the WebView (default: false)
• :title — static title label above the WebView; overrides :show_url
• :width, :height — dimensions in dp/pts; omit to fill parent