Android Compose

Jetpack Compose views under One.Android

Jetpack Compose views under One.Android, drawn by Material 3.

Layout nodes such as Column, Row, Box, cards, chips, and icon buttons take Compose children.
Leaves such as Text, Icon, Button, Switch, TextField, and Slider take none.
Controls are controlled: a value, a change callback, and a revision for external resets.
Every view throws outside an Android build, including on web. Keep them in an Android branch or an .android.tsx file.

Usage

import { useState } from 'react'
import { One } from 'one'

export function Settings() {
  const [on, setOn] = useState(true)

  return (
    <One.Android.Card composeStyle={{ padding: 16 }}>
      <One.Android.Switch label="Airplane mode" isOn={on} onIsOnChange={setOn} />
    </One.Android.Card>
  )
}

Shared props

Every node takes these. A node inside a Compose tree styles through composeStyle; style applies only at the root of the tree.

Props	Type	Description
`children`ReactNodeCompose children, on layout nodes.	ReactNode	Compose children, on layout nodes.
`accessibilityRole`ComposeAccessibilityRolebutton, switch, checkbox, radio, header, text, adjustable, alert, or progressbar.	ComposeAccessibilityRole	button, switch, checkbox, radio, header, text, adjustable, alert, or progressbar.
`style`StyleProp<ViewStyle>React Native style, at the root of a Compose tree only.	StyleProp<ViewStyle>	React Native style, at the root of a Compose tree only.
`composeStyle`ComposeStyleCompose modifiers. See below.	ComposeStyle	Compose modifiers. See below.

Nodes also take accessibilityLabel, accessibilityState, accessibilityValue, and testID.

ComposeStyle	Type	Description
`backgroundColor`ColorValueThe fill behind the node.	ColorValue	The fill behind the node.
`foregroundColor`ColorValueThe content color, such as an icon tint.	ColorValue	The content color, such as an icon tint.
`padding`numberPadding on every side, in dp.	number	Padding on every side, in dp.
`paddingTop`numberTop padding, in dp.	number	Top padding, in dp.
`paddingRight`numberRight padding, in dp.	number	Right padding, in dp.
`paddingBottom`numberBottom padding, in dp.	number	Bottom padding, in dp.
`paddingLeft`numberLeft padding, in dp.	number	Left padding, in dp.
`width`numberA fixed width, in dp.	number	A fixed width, in dp.
`height`numberA fixed height, in dp.	number	A fixed height, in dp.
`fillMaxWidth`booleanFills the parent width.	boolean	Fills the parent width.
`fillMaxHeight`booleanFills the parent height.	boolean	Fills the parent height.
`weight`numberA share of the free space in a Row or Column.	number	A share of the free space in a Row or Column.
`cornerRadius`numberRounds the node, in dp.	number	Rounds the node, in dp.
`opacity`numberFrom 0 to 1.	number	From 0 to 1.
`borderColor`ColorValueThe border color.	ColorValue	The border color.
`borderWidth`numberThe border width, in dp.	number	The border width, in dp.

Column, Row, Box

One.Android.Column stacks children vertically, Row horizontally, and Box layers them.

Column	Type	Description
`horizontalAlignment`ComposeHorizontalAlignment = "start"start, centerHorizontally, or end.	ComposeHorizontalAlignment = "start"	start, centerHorizontally, or end.
`verticalArrangement`ComposeVerticalArrangement = "top"top, center, bottom, spaceBetween, spaceAround, or spaceEvenly.	ComposeVerticalArrangement = "top"	top, center, bottom, spaceBetween, spaceAround, or spaceEvenly.
`spacing`numberThe gap between children, in dp.	number	The gap between children, in dp.

Row	Type	Description
`verticalAlignment`ComposeVerticalAlignment = "top"top, centerVertically, or bottom.	ComposeVerticalAlignment = "top"	top, centerVertically, or bottom.
`horizontalArrangement`ComposeHorizontalArrangement = "start"start, center, end, spaceBetween, spaceAround, or spaceEvenly.	ComposeHorizontalArrangement = "start"	start, center, end, spaceBetween, spaceAround, or spaceEvenly.
`spacing`numberThe gap between children, in dp.	number	The gap between children, in dp.

Box	Type	Description
`contentAlignment`ComposeContentAlignmentWhere children sit: topStart through bottomEnd, or top, bottom, start, end.	ComposeContentAlignment	Where children sit: topStart through bottomEnd, or top, bottom, start, end.

One.Android.FlowRow wraps children across rows.

FlowRow	Type	Description
`horizontalArrangement`ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }> = "start"A Row arrangement, or a fixed gap in dp.	ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }> = "start"	A Row arrangement, or a fixed gap in dp.
`verticalArrangement`ComposeVerticalArrangement \| Readonly<{ spacedBy: number }> = "top"A Column arrangement, or a fixed gap between rows in dp.	ComposeVerticalArrangement \| Readonly<{ spacedBy: number }> = "top"	A Column arrangement, or a fixed gap between rows in dp.

One.Android.Spacer takes the shared props only. As a direct child of a Row or Column with composeStyle={{ weight: 1 }} it takes the free space; with width or height it is a fixed gap. Any other direct child takes a positive weight the same way.

Text

Props	Type	Description
`text (required)`stringThe text.	string	The text.
`fontSize`numberThe size in sp. The theme body size when unset.	number	The size in sp. The theme body size when unset.
`fontWeight`ComposeFontWeightthin, extraLight, light, normal, medium, semiBold, bold, extraBold, or black.	ComposeFontWeight	thin, extraLight, light, normal, medium, semiBold, bold, extraBold, or black.
`textAlign`ComposeTextAlignunspecified, left, right, center, justify, start, or end.	ComposeTextAlign	unspecified, left, right, center, justify, start, or end.
`maxLines`numberThe most lines shown.	number	The most lines shown.

Icon

One.Android.Icon draws a Material Symbol. See Android Icons. For an icon on every platform, use One.UI.Icon.

Buttons

One.Android.Button shows a label with an optional leading icon.

Button	Type	Description
`label (required)`stringThe title.	string	The title.
`onPress`() => voidRuns when tapped.	() => void	Runs when tapped.
`variant`ComposeButtonVariant = "filled"filled, tonal, elevated, outlined, or text.	ComposeButtonVariant = "filled"	filled, tonal, elevated, outlined, or text.
`tone`ComposeButtonTone = "default"default, or danger for the error colors.	ComposeButtonTone = "default"	default, or danger for the error colors.
`icon`ComposeIconNameA Material Symbol before the label.	ComposeIconName	A Material Symbol before the label.
`iconFilled`boolean = falseUses the filled icon font.	boolean = false	Uses the filled icon font.
`disabled`boolean = falseDims the button and ignores taps.	boolean = false	Dims the button and ignores taps.

IconButton, FilledIconButton, FilledTonalIconButton, and OutlinedIconButton wrap an Icon child.

IconButton	Type	Description
`children (required)`ReactNodeThe Icon.	ReactNode	The Icon.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.
`enabled`booleanfalse dims the button and ignores taps.	boolean	false dims the button and ignores taps.
`colors`ComposeIconButtonColorsContainer and content colors, enabled and disabled.	ComposeIconButtonColors	Container and content colors, enabled and disabled.

FloatingActionButton, SmallFloatingActionButton, and LargeFloatingActionButton take an Icon in their .Icon slot. ExtendedFloatingActionButton also takes Text in .Text.

FloatingActionButton	Type	Description
`children (required)`ReactNodeThe .Icon and, when extended, .Text slots.	ReactNode	The .Icon and, when extended, .Text slots.
`containerColor`ColorValueThe button color. The theme when unset.	ColorValue	The button color. The theme when unset.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.

ExtendedFloatingActionButton adds expanded, which shows or hides its text.

ToggleButton, IconToggleButton, FilledIconToggleButton, and OutlinedIconToggleButton are the Material 3 toggles.

ToggleButton	Type	Description
`children (required)`ReactNodeThe content, such as an Icon.	ReactNode	The content, such as an Icon.
`checked (required)`booleanWhether the toggle is on.	boolean	Whether the toggle is on.
`onCheckedChange`(checked: boolean) => voidA tap, with the new value.	(checked: boolean) => void	A tap, with the new value.
`enabled`boolean = truefalse dims the toggle and ignores taps.	boolean = true	false dims the toggle and ignores taps.
`colors`ComposeToggleButtonColorsContainer and content colors, normal, checked, and disabled.	ComposeToggleButtonColors	Container and content colors, normal, checked, and disabled.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

Segmented buttons

SingleChoiceSegmentedButtonRow and MultiChoiceSegmentedButtonRow hold SegmentedButton children. In a single choice row, pass selected and onClick; in a multiple choice row, pass checked and onCheckedChange.

SegmentedButton	Type	Description
`children (required)`ReactNodeThe segment label.	ReactNode	The segment label.
`selected`booleanWhether the segment is chosen, in a single choice row.	boolean	Whether the segment is chosen, in a single choice row.
`onClick`() => voidA tap, in a single choice row.	() => void	A tap, in a single choice row.
`checked`booleanWhether the segment is on, in a multiple choice row.	boolean	Whether the segment is on, in a multiple choice row.
`onCheckedChange`(checked: boolean) => voidA tap, in a multiple choice row.	(checked: boolean) => void	A tap, in a multiple choice row.
`enabled`boolean = truefalse dims the segment and ignores taps.	boolean = true	false dims the segment and ignores taps.
`colors`ComposeSegmentedButtonColorsBorder, content, and container colors, active, inactive, and disabled.	ComposeSegmentedButtonColors	Border, content, and container colors, active, inactive, and disabled.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

Switch

Props	Type	Description
`isOn (required)`booleanWhether the switch is on.	boolean	Whether the switch is on.
`onIsOnChange (required)`(value: boolean) => voidA flip, with the new value.	(value: boolean) => void	A flip, with the new value.
`label`string = ""Text before the switch. The whole row toggles.	string = ""	Text before the switch. The whole row toggles.
`disabled`boolean = falseDims the switch and ignores taps.	boolean = false	Dims the switch and ignores taps.
`colors`ComposeSwitchColorsThumb, track, border, and icon colors for each state.	ComposeSwitchColors	Thumb, track, border, and icon colors for each state.
`revision`number = 0Increase with a new isOn to reset it from outside.	number = 0	Increase with a new isOn to reset it from outside.

Checkbox, RadioButton

Without a callback, each is read only. Omitted colors use the Material theme.

Checkbox	Type	Description
`value (required)`booleanWhether the box is checked.	boolean	Whether the box is checked.
`onCheckedChange`(value: boolean) => voidA tap, with the new value.	(value: boolean) => void	A tap, with the new value.
`disabled`boolean = falseDims the box and ignores taps.	boolean = false	Dims the box and ignores taps.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`colors`Readonly<{ checkedColor?: ColorValue disabledCheckedColor?: ColorValue uncheckedColor?: ColorValue disabledUncheckedColor?: ColorValue checkmarkColor?: ColorValue }>Box and checkmark colors.	Readonly<{ checkedColor?: ColorValue disabledCheckedColor?: ColorValue uncheckedColor?: ColorValue disabledUncheckedColor?: ColorValue checkmarkColor?: ColorValue }>	Box and checkmark colors.

RadioButton	Type	Description
`selected (required)`booleanWhether the button is chosen.	boolean	Whether the button is chosen.
`onClick`() => voidA tap. Set selected yourself.	() => void	A tap. Set selected yourself.
`disabled`boolean = falseDims the button and ignores taps.	boolean = false	Dims the button and ignores taps.
`colors`Readonly<{ selectedColor?: ColorValue unselectedColor?: ColorValue disabledSelectedColor?: ColorValue disabledUnselectedColor?: ColorValue }>Ring and dot colors.	Readonly<{ selectedColor?: ColorValue unselectedColor?: ColorValue disabledSelectedColor?: ColorValue disabledUnselectedColor?: ColorValue }>	Ring and dot colors.

Cards, Surface

Card, ElevatedCard, and OutlinedCard wrap children in the Material 3 card surfaces. ElevatedCard takes no border. Without one, Card has no border and OutlinedCard uses the theme outline.

Card	Type	Description
`colors`ComposeCardColors{ containerColor, contentColor }.	ComposeCardColors	{ containerColor, contentColor }.
`elevation`numberThe shadow depth in dp. Zero or more.	number	The shadow depth in dp. Zero or more.
`border`ComposeCardBorder{ width, color }, width in dp, 1 by default.	ComposeCardBorder	{ width, color }, width in dp, 1 by default.

One.Android.Surface is a Material 3 surface. Round it with composeStyle.cornerRadius. With onClick it is clickable, with selected and onClick selectable, and with checked and onCheckedChange toggleable.

Surface	Type	Description
`color`ColorValueThe surface color.	ColorValue	The surface color.
`contentColor`ColorValueThe color of content on it.	ColorValue	The color of content on it.
`tonalElevation`numberTints the surface by depth, in dp.	number	Tints the surface by depth, in dp.
`shadowElevation`numberThe shadow depth, in dp.	number	The shadow depth, in dp.
`border`ComposeCardBorder{ width, color }.	ComposeCardBorder	{ width, color }.
`enabled`boolean = truefalse ignores taps.	boolean = true	false ignores taps.
`selected`booleanMakes it selectable, with onClick.	boolean	Makes it selectable, with onClick.
`checked`booleanMakes it toggleable, with onCheckedChange.	boolean	Makes it toggleable, with onCheckedChange.
`onClick`() => voidRuns when tapped.	() => void	Runs when tapped.
`onCheckedChange`(checked: boolean) => voidA tap, with the new checked value.	(checked: boolean) => void	A tap, with the new checked value.
`revision`number = 0Increase with a new checked to reset it from outside.	number = 0	Increase with a new checked to reset it from outside.

ListItem

One.Android.ListItem is a Material 3 row. Put Compose content in its .HeadlineContent slot, and optionally .OverlineContent, .SupportingContent, .LeadingContent, and .TrailingContent.

Props	Type	Description
`colors`ComposeListItemColorsContainer and per slot content colors.	ComposeListItemColors	Container and per slot content colors.
`tonalElevation`numberTints the row by depth, in dp.	number	Tints the row by depth, in dp.
`shadowElevation`numberThe shadow depth, in dp.	number	The shadow depth, in dp.

Dividers

HorizontalDivider and VerticalDivider draw Material 3 lines. Give a vertical divider a height through its parent or composeStyle.

Props	Type	Description
`thickness`numberThe line width in dp.	number	The line width in dp.
`color`ColorValueThe line color. The theme when unset.	ColorValue	The line color. The theme when unset.

Badges

One.Android.Badge is a dot, or a count when it has Compose children. One.Android.BadgedBox puts a Badge from its .Badge slot at the top end of its content; with no slot it shows a dot.

Badge	Type	Description
`containerColor`ColorValueThe badge color.	ColorValue	The badge color.
`contentColor`ColorValueThe count color.	ColorValue	The count color.

Chips

AssistChip, FilterChip, InputChip, and SuggestionChip are the Material 3 chips. Each takes its label in a .Label slot. AssistChip and FilterChip also have .LeadingIcon and .TrailingIcon, InputChip has .Avatar and .TrailingIcon, and SuggestionChip has .Icon.

Every chip takes enabled, onClick, elevation in dp, border ({ width, color }), and colors. A tap calls onClick; set the next selected yourself.

FilterChip	Type	Description
`selected (required)`booleanWhether the filter is on.	boolean	Whether the filter is on.
`colors`ComposeFilterChipColorsContainer, label, and icon colors, normal and selected.	ComposeFilterChipColors	Container, label, and icon colors, normal and selected.

InputChip	Type	Description
`selected`boolean = falseWhether the chip is selected.	boolean = false	Whether the chip is selected.
`colors`ComposeInputChipColorsContainer, label, and icon colors, normal and selected.	ComposeInputChipColors	Container, label, and icon colors, normal and selected.

AssistChip colors are containerColor, labelColor, leadingIconContentColor, and trailingIconContentColor. SuggestionChip colors are containerColor, labelColor, and iconContentColor.

TextField

One.Android.TextField edits text, a string or a native state handle from useNativeState. For a field on every platform, use One.UI.TextInput.

Props	Type	Description
`text (required)`string \| NativeState<string>The text, or a native state handle.	string \| NativeState<string>	The text, or a native state handle.
`onTextChange (required)`(value: string) => voidAn edit, with the new text.	(value: string) => void	An edit, with the new text.
`revision`number = 0Increase with a new text to reset it from outside.	number = 0	Increase with a new text to reset it from outside.
`label`stringThe floating label.	string	The floating label.
`placeholder`stringShown while empty.	string	Shown while empty.
`disabled`boolean = falseDims the field and blocks editing.	boolean = false	Dims the field and blocks editing.
`variant`ComposeTextFieldVariant = "filled"filled or outlined.	ComposeTextFieldVariant = "filled"	filled or outlined.
`keyboardType`ComposeTextFieldKeyboardType = "default"default, number, decimal, email, password, phone, or url.	ComposeTextFieldKeyboardType = "default"	default, number, decimal, email, password, phone, or url.
`secureText`boolean = falseHides the text.	boolean = false	Hides the text.
`focused`booleanWhether the field has focus, controlled.	boolean	Whether the field has focus, controlled.
`focusRevision`number = 0Increase with a new focused to apply it.	number = 0	Increase with a new focused to apply it.
`onFocusChange`(focused: boolean) => voidFocus moved.	(focused: boolean) => void	Focus moved.
`imeAction`ComposeTextFieldImeActionThe keyboard action: default, none, go, search, send, previous, next, or done.	ComposeTextFieldImeAction	The keyboard action: default, none, go, search, send, previous, next, or done.
`onSubmit`() => voidThe keyboard action key was pressed.	() => void	The keyboard action key was pressed.
`maxLength`numberThe most characters allowed.	number	The most characters allowed.
`multiline`boolean = falseAllows line breaks.	boolean = false	Allows line breaks.
`capitalization`ComposeTextFieldCapitalizationnone, characters, words, or sentences.	ComposeTextFieldCapitalization	none, characters, words, or sentences.
`autoCorrect`booleanWhether the keyboard corrects words.	boolean	Whether the keyboard corrects words.
`textAlign`ComposeTextAlignHow the text aligns.	ComposeTextAlign	How the text aligns.

Slider

Props	Type	Description
`value (required)`numberThe current value.	number	The current value.
`onValueChange (required)`(value: number) => voidA drag, with the new value.	(value: number) => void	A drag, with the new value.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`minimumValue`number = 0The low end of the track.	number = 0	The low end of the track.
`maximumValue`number = 1The high end of the track.	number = 1	The high end of the track.
`lowerLimit`numberThe lowest the thumb may go. The track still spans the full range.	number	The lowest the thumb may go. The track still spans the full range.
`upperLimit`numberThe highest the thumb may go.	number	The highest the thumb may go.
`step`number = 0The increment. 0 is continuous.	number = 0	The increment. 0 is continuous.
`disabled`boolean = falseDims the slider and ignores drags.	boolean = false	Dims the slider and ignores drags.
`colors`Readonly<{ thumbColor?: ColorValue activeTrackColor?: ColorValue inactiveTrackColor?: ColorValue activeTickColor?: ColorValue inactiveTickColor?: ColorValue }>Thumb, track, and tick colors.	Readonly<{ thumbColor?: ColorValue activeTrackColor?: ColorValue inactiveTrackColor?: ColorValue activeTickColor?: ColorValue inactiveTickColor?: ColorValue }>	Thumb, track, and tick colors.

DatePicker, TimePicker

One.Android.DatePicker is the Material 3 calendar and One.Android.TimePicker is the clock dial. Both are controlled by a Date. DatePicker changes the calendar day in the device time zone and keeps the time of day. TimePicker changes the hour and minute, keeps the day, and sets seconds to zero.

const [when, setWhen] = useState(() => new Date())

<One.Android.DatePicker
  selection={when}
  onSelectionChange={setWhen}
  minimumDate={new Date(2026, 0, 1)}
/>
<One.Android.TimePicker selection={when} onSelectionChange={setWhen} is24Hour />

DatePicker	Type	Description
`selection (required)`DateThe selected day.	Date	The selected day.
`onSelectionChange (required)`(value: Date) => voidA tapped or typed day, with the time of day kept.	(value: Date) => void	A tapped or typed day, with the time of day kept.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`minimumDate`DateThe earliest selectable day. Earlier days and years are disabled.	Date	The earliest selectable day. Earlier days and years are disabled.
`maximumDate`DateThe latest selectable day.	Date	The latest selectable day.
`variant`'picker' \| 'input' = 'picker'The calendar grid or a text field.	'picker' \| 'input' = 'picker'	The calendar grid or a text field.
`showModeToggle`boolean = trueShows the button that switches variant.	boolean = true	Shows the button that switches variant.
`color`ColorValueTints the title, headline, selected day, and today border.	ColorValue	Tints the title, headline, selected day, and today border.
`colors`ComposeDatePickerColorsPer-element colors; these win over color.	ComposeDatePickerColors	Per-element colors; these win over color.

TimePicker	Type	Description
`selection (required)`DateThe selected time of day.	Date	The selected time of day.
`onSelectionChange (required)`(value: Date) => voidA new hour or minute, with the day kept.	(value: Date) => void	A new hour or minute, with the day kept.
`revision`number = 0Increase with a new value to reset it from outside.	number = 0	Increase with a new value to reset it from outside.
`is24Hour`booleanA 24 hour clock. Defaults to the device setting.	boolean	A 24 hour clock. Defaults to the device setting.
`variant`'picker' \| 'input' = 'picker'The clock dial or hour and minute fields.	'picker' \| 'input' = 'picker'	The clock dial or hour and minute fields.
`color`ColorValueTints the selector, selected field, and dial.	ColorValue	Tints the selector, selected field, and dial.
`colors`ComposeTimePickerColorsPer-element colors; these win over color.	ComposeTimePickerColors	Per-element colors; these win over color.

DatePickerDialog and TimePickerDialog take the same props without onSelectionChange and revision. Each opening starts from selection; the confirm button reports the chosen value.

DatePickerDialog, TimePickerDialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`onConfirm (required)`(value: Date) => voidThe confirm button, with the chosen value.	(value: Date) => void	The confirm button, with the chosen value.
`onDismiss (required)`() => voidDismissed by the button, a tap outside, or back.	() => void	Dismissed by the button, a tap outside, or back.
`confirmLabel`stringThe confirm button title. Defaults to the system OK.	string	The confirm button title. Defaults to the system OK.
`dismissLabel`stringThe dismiss button title. Defaults to the system Cancel.	string	The dismiss button title. Defaults to the system Cancel.

AlertDialog, Dialog

One.Android.AlertDialog shows a confirmation while visible is true. One.Android.Dialog shows its children in a dialog window.

AlertDialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`title`stringThe headline.	string	The headline.
`message`stringThe body text.	string	The body text.
`confirmLabel (required)`stringThe confirm button title.	string	The confirm button title.
`dismissLabel`stringThe dismiss button title. No button when unset.	string	The dismiss button title. No button when unset.
`onConfirm (required)`() => voidThe confirm button was tapped.	() => void	The confirm button was tapped.
`onDismiss (required)`() => voidDismissed by the button, a tap outside, or back.	() => void	Dismissed by the button, a tap outside, or back.

Dialog	Type	Description
`visible (required)`booleanWhether the dialog shows.	boolean	Whether the dialog shows.
`onDismiss (required)`() => voidA tap outside or back asked to close it.	() => void	A tap outside or back asked to close it.

Progress and loading

ProgressIndicator is circular unless variant says otherwise. LinearProgressIndicator, CircularProgressIndicator, LinearWavyProgressIndicator, and CircularWavyProgressIndicator fix the variant. Leave progress unset for an indeterminate indicator.

ProgressIndicator	Type	Description
`variant`ComposeProgressVariant = "circular"linear, circular, linearWavy, or circularWavy.	ComposeProgressVariant = "circular"	linear, circular, linearWavy, or circularWavy.
`progress`number \| nullFrom 0 to 1. Unset spins.	number \| null	From 0 to 1. Unset spins.
`color`ColorValueThe indicator color.	ColorValue	The indicator color.
`trackColor`ColorValueThe track color.	ColorValue	The track color.
`strokeCap`ComposeProgressStrokeCapround, butt, or square. Linear and circular.	ComposeProgressStrokeCap	round, butt, or square. Linear and circular.
`gapSize`numberThe gap between indicator and track, in dp.	number	The gap between indicator and track, in dp.
`strokeWidth`numberThe line width, in dp. Circular.	number	The line width, in dp. Circular.
`drawStopIndicator`ComposeProgressStopIndicatorThe end dot of a determinate linear bar: { color, strokeCap, stopSize }.	ComposeProgressStopIndicator	The end dot of a determinate linear bar: { color, strokeCap, stopSize }.
`stopSize`numberThe end dot size, in dp. Linear wavy.	number	The end dot size, in dp. Linear wavy.
`amplitude`numberThe wave height. Wavy.	number	The wave height. Wavy.
`wavelength`numberThe wave length, in dp. Wavy.	number	The wave length, in dp. Wavy.
`waveSpeed`numberHow fast the wave moves. Wavy.	number	How fast the wave moves. Wavy.

LoadingIndicator and ContainedLoadingIndicator are the Material 3 expressive loading shapes, with progress and color; the contained one adds containerColor.

LoadingIndicator	Type	Description
`progress`number \| nullFrom 0 to 1. Unset animates.	number \| null	From 0 to 1. Unset animates.
`color`ColorValueThe shape color.	ColorValue	The shape color.

LazyColumn, LazyRow

One.Android.LazyColumn scrolls children vertically and One.Android.LazyRow horizontally. Children become lazy items: only the visible window composes, so long lists stay cheap. Give the list a bounded height (column) or width (row) through composeStyle; items size themselves.

<One.Android.LazyColumn
  style={{ height: 320 }}
  verticalArrangement={{ spacedBy: 8 }}
  contentPadding={{ top: 8, bottom: 8 }}
>
  {items.map((item) => (
    <One.Android.Text key={item.id} text={item.title} />
  ))}
</One.Android.LazyColumn>

LazyColumn	Type	Description
`verticalArrangement`ComposeVerticalArrangement \| Readonly<{ spacedBy: number }>A preset, or { spacedBy } for a gap in dp.	ComposeVerticalArrangement \| Readonly<{ spacedBy: number }>	A preset, or { spacedBy } for a gap in dp.
`horizontalAlignment`'start' \| 'end' \| 'center' = 'start'How items sit across the column.	'start' \| 'end' \| 'center' = 'start'	How items sit across the column.
`contentPadding`ComposeLazyContentPaddingInset around the items, in dp.	ComposeLazyContentPadding	Inset around the items, in dp.

LazyRow	Type	Description
`horizontalArrangement`ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }>A preset, or { spacedBy } for a gap in dp.	ComposeHorizontalArrangement \| Readonly<{ spacedBy: number }>	A preset, or { spacedBy } for a gap in dp.
`verticalAlignment`'top' \| 'bottom' \| 'center' = 'top'How items sit across the row.	'top' \| 'bottom' \| 'center' = 'top'	How items sit across the row.
`contentPadding`ComposeLazyContentPaddingInset around the items, in dp.	ComposeLazyContentPadding	Inset around the items, in dp.

LazyContentPadding	Type	Description
`start`numberLeading inset, in dp.	number	Leading inset, in dp.
`top`numberTop inset, in dp.	number	Top inset, in dp.
`end`numberTrailing inset, in dp.	number	Trailing inset, in dp.
`bottom`numberBottom inset, in dp.	number	Bottom inset, in dp.

Image

One.Android.Image draws a bundled asset or a URI through Compose. Size it with composeStyle width and height; the bitmap scales inside those bounds.

<One.Android.Image
  source={{ uri: fileUri }}
  contentScale="crop"
  contentDescription="A mountain at sunset"
  composeStyle={{ width: 160, height: 100 }}
  onLoad={() => setLoaded(true)}
  onError={(error) => setError(error)}
/>

Image	Type	Description
`source (required)`ComposeImageSourceA bundled asset id or { uri }.	ComposeImageSource	A bundled asset id or { uri }.
`contentScale`ComposeImageContentScale = 'fit'fit, crop, fillBounds, fillWidth, fillHeight, inside, or none.	ComposeImageContentScale = 'fit'	fit, crop, fillBounds, fillWidth, fillHeight, inside, or none.
`alignment`ComposeContentAlignment = 'center'Where the image sits inside its bounds.	ComposeContentAlignment = 'center'	Where the image sits inside its bounds.
`contentDescription`string \| nullSpoken to screen readers. Null marks a decorative image.	string \| null	Spoken to screen readers. Null marks a decorative image.
`tint`ColorValueA color applied to every non-transparent pixel.	ColorValue	A color applied to every non-transparent pixel.
`alpha`numberOpacity, from 0 to 1.	number	Opacity, from 0 to 1.
`onLoad`() => voidThe image decoded and drew.	() => void	The image decoded and drew.
`onError`(message: string) => voidThe image failed to load, with the reason.	(message: string) => void	The image failed to load, with the reason.

Snackbar

One.Android.SnackbarHost shows Material 3 snackbars. Its ref exposes showSnackbar, which resolves 'actionPerformed' when the user taps the action and 'dismissed' when the snackbar times out or is dismissed. Calls queue behind the visible snackbar. A One.Android.Snackbar child styles the shown snackbars.

const host = useRef<ComposeSnackbarHostRef>(null)

<One.Android.SnackbarHost ref={host}>
  <One.Android.Snackbar containerColor="#1b1b1f" />
</One.Android.SnackbarHost>

await host.current?.showSnackbar({ message: 'File saved', actionLabel: 'Undo' })

SnackbarHost	Type	Description
`children`ReactNodeThe host content, including one Snackbar that styles the shown snackbars.	ReactNode	The host content, including one Snackbar that styles the shown snackbars.
`accessibilityRole`ComposeAccessibilityRoleThe accessibility role.	ComposeAccessibilityRole	The accessibility role.
`style`StyleProp<ViewStyle>The outer style. Nested nodes use composeStyle instead.	StyleProp<ViewStyle>	The outer style. Nested nodes use composeStyle instead.
`composeStyle`ComposeStyleCompose layout for this node.	ComposeStyle	Compose layout for this node.

Snackbar	Type	Description
`containerColor`ColorValueThe snackbar background.	ColorValue	The snackbar background.
`contentColor`ColorValueThe message text color.	ColorValue	The message text color.
`actionColor`ColorValueThe action button container color.	ColorValue	The action button container color.
`actionContentColor`ColorValueThe action button label color.	ColorValue	The action button label color.
`dismissActionContentColor`ColorValueThe dismiss icon color.	ColorValue	The dismiss icon color.
`actionOnNewLine`boolean = falsePuts a long action label under the message.	boolean = false	Puts a long action label under the message.

SnackbarShowOptions	Type	Description
`message (required)`stringThe message body.	string	The message body.
`actionLabel`stringThe action button label. No button when unset.	string	The action button label. No button when unset.
`withDismissAction`boolean = falseShows a trailing close button.	boolean = false	Shows a trailing close button.
`duration`ComposeSnackbarDurationshort, long, or indefinite. Short without an action, indefinite with one.	ComposeSnackbarDuration	short, long, or indefinite. Short without an action, indefinite with one.

ModalBottomSheet

One.Android.ModalBottomSheet presents its children in a Material 3 modal sheet. Mounting shows it; onDismissRequest fires on a swipe, back press, or scrim tap, and the parent unmounts it. The ref hides the sheet with an animation through hide, which resolves when the sheet is hidden.

const [open, setOpen] = useState(false)
const sheet = useRef<ComposeModalBottomSheetRef>(null)

{open ? (
  <One.Android.ModalBottomSheet onDismissRequest={() => setOpen(false)}>
    <One.Android.Text text="Sheet body" />
  </One.Android.ModalBottomSheet>
) : null}

ModalBottomSheet	Type	Description
`onDismissRequest (required)`() => voidA swipe, back press, or scrim tap asked to close it.	() => void	A swipe, back press, or scrim tap asked to close it.
`skipPartiallyExpanded`boolean = falseOpens the sheet full screen.	boolean = false	Opens the sheet full screen.
`initialFullyExpanded`boolean = falseStarts fully expanded. Ignored with skipPartiallyExpanded.	boolean = false	Starts fully expanded. Ignored with skipPartiallyExpanded.
`scrimColor`ColorValueThe overlay behind the sheet.	ColorValue	The overlay behind the sheet.
`showDragHandle`boolean = trueShows the default handle. Ignored with a DragHandle slot.	boolean = true	Shows the default handle. Ignored with a DragHandle slot.
`sheetGesturesEnabled`boolean = trueSwipe to dismiss and drag gestures.	boolean = true	Swipe to dismiss and drag gestures.
`properties`ComposeModalBottomSheetPropertiesBack press and scrim dismissal behavior.	ComposeModalBottomSheetProperties	Back press and scrim dismissal behavior.

ModalBottomSheetProperties	Type	Description
`shouldDismissOnClickOutside`boolean = trueA scrim tap calls onDismissRequest.	boolean = true	A scrim tap calls onDismissRequest.

A custom drag handle replaces the default one:

<One.Android.ModalBottomSheet onDismissRequest={close}>
  <One.Android.ModalBottomSheet.DragHandle>
    <One.Android.Text text="Grabber" />
  </One.Android.ModalBottomSheet.DragHandle>
  <One.Android.Text text="Sheet body" />
</One.Android.ModalBottomSheet>

NavigationBar

One.Android.NavigationBar is the Material 3 bottom bar. Its children are One.Android.NavigationBarItem destinations, which spread evenly across the bar. The parent owns selection: each item reports selected, and onClick moves it.

const [tab, setTab] = useState('home')

<One.Android.NavigationBar>
  <One.Android.NavigationBarItem
    selected={tab === 'home'}
    onClick={() => setTab('home')}
    label="Home"
    icon="home"
  />
  <One.Android.NavigationBarItem
    selected={tab === 'search'}
    onClick={() => setTab('search')}
    label="Search"
    icon="search"
  />
</One.Android.NavigationBar>

NavigationBar	Type	Description
`containerColor`ColorValueThe bar background.	ColorValue	The bar background.
`contentColor`ColorValueThe default icon and label color.	ColorValue	The default icon and label color.
`tonalElevation`numberThe tonal elevation, in dp.	number	The tonal elevation, in dp.

NavigationBarItem	Type	Description
`selected (required)`booleanThis destination is the current one.	boolean	This destination is the current one.
`onClick (required)`() => voidThe item was tapped.	() => void	The item was tapped.
`label`stringThe text under the icon.	string	The text under the icon.
`icon (required)`ComposeIconNameA Material Symbols icon name.	ComposeIconName	A Material Symbols icon name.
`iconFilled`boolean = falseUses the filled icon font.	boolean = false	Uses the filled icon font.
`enabled`boolean = trueA disabled item ignores taps.	boolean = true	A disabled item ignores taps.
`alwaysShowLabel`boolean = trueShows the label when unselected.	boolean = true	Shows the label when unselected.
`colors`ComposeNavigationBarItemColorsIcon, label and indicator colors.	ComposeNavigationBarItemColors	Icon, label and indicator colors.

NavigationBarItemColors	Type	Description
`selectedIconColor`ColorValueThe selected icon color.	ColorValue	The selected icon color.
`selectedTextColor`ColorValueThe selected label color.	ColorValue	The selected label color.
`indicatorColor`ColorValueThe selection pill color.	ColorValue	The selection pill color.
`unselectedIconColor`ColorValueThe unselected icon color.	ColorValue	The unselected icon color.
`unselectedTextColor`ColorValueThe unselected label color.	ColorValue	The unselected label color.
`disabledIconColor`ColorValueThe disabled icon color.	ColorValue	The disabled icon color.
`disabledTextColor`ColorValueThe disabled label color.	ColorValue	The disabled label color.

SearchBar, DockedSearchBar

One.Android.SearchBar is the Material 3 search field. query is controlled text, expanded opens the results list, and children render as the expanded content. onSearch fires when the user submits the query. Leading and trailing icons go in slots; the M3 pattern swaps the leading search icon for a back arrow while expanded. One.Android.DockedSearchBar shares the same props, and its results anchor under the field instead of taking the screen.

const [query, setQuery] = useState('')
const [expanded, setExpanded] = useState(false)

<One.Android.SearchBar
  query={query}
  onQueryChange={setQuery}
  expanded={expanded}
  onExpandedChange={setExpanded}
  placeholder="Search items"
  onSearch={(submitted) => runSearch(submitted)}
>
  <One.Android.SearchBar.LeadingIcon>
    <One.Android.Icon name="search" />
  </One.Android.SearchBar.LeadingIcon>
  {results.map((result) => (
    <One.Android.Text key={result.id} text={result.title} />
  ))}
</One.Android.SearchBar>

SearchBar, DockedSearchBar	Type	Description
`query (required)`stringThe controlled search text.	string	The controlled search text.
`onQueryChange (required)`(value: string) => voidThe text changed.	(value: string) => void	The text changed.
`revision`numberBump to force the native text to the query.	number	Bump to force the native text to the query.
`expanded (required)`booleanThe results list is open.	boolean	The results list is open.
`onExpandedChange (required)`(expanded: boolean) => voidA tap or back press asked to expand or collapse.	(expanded: boolean) => void	A tap or back press asked to expand or collapse.
`expandedRevision`numberBump to force native expansion to expanded.	number	Bump to force native expansion to expanded.
`placeholder`stringThe hint shown when the query is empty.	string	The hint shown when the query is empty.
`enabled`boolean = trueA disabled bar ignores input.	boolean = true	A disabled bar ignores input.
`onSearch`(query: string) => voidThe user submitted the query.	(query: string) => void	The user submitted the query.
`containerColor`ColorValueThe bar background.	ColorValue	The bar background.

DropdownMenu, ExposedDropdownMenuBox

One.Android.DropdownMenu is the Material 3 popup menu. Put it beside its anchor in a Box; its children are One.Android.DropdownMenuItem rows. The parent owns expansion: expanded opens it, and onDismissRequest fires on an outside tap or back press. One.Android.ExposedDropdownMenuBox is the anchored text-field form: a read-only field shows value, tapping it opens the same items, and picking one usually writes the value and collapses.

const [open, setOpen] = useState(false)

<One.Android.Box>
  <One.Android.Button label="Open menu" onPress={() => setOpen(true)} />
  <One.Android.DropdownMenu expanded={open} onDismissRequest={() => setOpen(false)}>
    <One.Android.DropdownMenuItem text="Edit" onClick={() => edit()} leadingIcon="edit" />
    <One.Android.DropdownMenuItem text="Share" onClick={() => share()} leadingIcon="share" />
  </One.Android.DropdownMenu>
</One.Android.Box>

<One.Android.ExposedDropdownMenuBox
  expanded={boxOpen}
  onExpandedChange={setBoxOpen}
  value={size}
  placeholder="Size"
>
  {['Small', 'Medium', 'Large'].map((option) => (
    <One.Android.DropdownMenuItem
      key={option}
      text={option}
      onClick={() => {
        setSize(option)
        setBoxOpen(false)
      }}
    />
  ))}
</One.Android.ExposedDropdownMenuBox>

DropdownMenu	Type	Description
`expanded (required)`booleanThe menu is open.	boolean	The menu is open.
`onDismissRequest (required)`() => voidAn outside tap or back press asked to close it.	() => void	An outside tap or back press asked to close it.
`containerColor`ColorValueThe menu background.	ColorValue	The menu background.

DropdownMenuItem	Type	Description
`text (required)`stringThe row label.	string	The row label.
`onClick (required)`() => voidThe row was tapped.	() => void	The row was tapped.
`enabled`boolean = trueA disabled row ignores taps.	boolean = true	A disabled row ignores taps.
`leadingIcon`ComposeIconNameA Material Symbols icon before the label.	ComposeIconName	A Material Symbols icon before the label.
`trailingIcon`ComposeIconNameA Material Symbols icon after the label.	ComposeIconName	A Material Symbols icon after the label.
`iconFilled`boolean = falseUses the filled icon font.	boolean = false	Uses the filled icon font.
`colors`ComposeDropdownMenuItemColorsLabel and icon colors.	ComposeDropdownMenuItemColors	Label and icon colors.

DropdownMenuItemColors	Type	Description
`textColor`ColorValueThe label color.	ColorValue	The label color.
`leadingIconColor`ColorValueThe leading icon color.	ColorValue	The leading icon color.
`trailingIconColor`ColorValueThe trailing icon color.	ColorValue	The trailing icon color.
`disabledTextColor`ColorValueThe disabled label color.	ColorValue	The disabled label color.
`disabledLeadingIconColor`ColorValueThe disabled leading icon color.	ColorValue	The disabled leading icon color.
`disabledTrailingIconColor`ColorValueThe disabled trailing icon color.	ColorValue	The disabled trailing icon color.

ExposedDropdownMenuBox	Type	Description
`expanded (required)`booleanThe menu is open.	boolean	The menu is open.
`onExpandedChange (required)`(expanded: boolean) => voidA tap, outside tap, or back press asked to expand or collapse.	(expanded: boolean) => void	A tap, outside tap, or back press asked to expand or collapse.
`expandedRevision`numberBump to force native expansion to expanded.	number	Bump to force native expansion to expanded.
`value (required)`stringThe read-only text in the field.	string	The read-only text in the field.
`placeholder`stringThe hint shown when the value is empty.	string	The hint shown when the value is empty.
`enabled`boolean = trueA disabled box ignores taps.	boolean = true	A disabled box ignores taps.

PullToRefreshBox

One.Android.PullToRefreshBox wraps scrollable children with the Material 3 pull gesture and indicator. A pull past the threshold calls onRefresh; the parent keeps isRefreshing true until its reload finishes. Give the box a bounded height so its list can scroll.

const [refreshing, setRefreshing] = useState(false)

<One.Android.PullToRefreshBox
  isRefreshing={refreshing}
  onRefresh={() => void reload().finally(() => setRefreshing(false))}
  composeStyle={{ height: 320, fillMaxWidth: true }}
>
  <One.Android.LazyColumn>
    {items.map((item) => (
      <One.Android.Text key={item.id} text={item.title} />
    ))}
  </One.Android.LazyColumn>
</One.Android.PullToRefreshBox>

PullToRefreshBox	Type	Description
`isRefreshing (required)`booleanA reload is running; the indicator spins.	boolean	A reload is running; the indicator spins.
`onRefresh (required)`() => voidA pull past the threshold asked for a reload.	() => void	A pull past the threshold asked for a reload.
`enabled`boolean = trueA disabled box ignores pulls.	boolean = true	A disabled box ignores pulls.

TooltipBox

One.Android.TooltipBox shows a Material 3 tooltip on long-press over its children. A title upgrades the plain tooltip to the rich form.

<One.Android.TooltipBox text="Save the file">
  <One.Android.IconButton onClick={() => save()}>
    <One.Android.Icon name="save" />
  </One.Android.IconButton>
</One.Android.TooltipBox>

TooltipBox	Type	Description
`text (required)`stringThe tooltip body.	string	The tooltip body.
`title`stringA title, which selects the rich tooltip.	string	A title, which selects the rich tooltip.
`enabled`boolean = trueA disabled box ignores long-presses.	boolean = true	A disabled box ignores long-presses.

AnimatedVisibility

One.Android.AnimatedVisibility fades and resizes its children in and out as visible changes. enter and exit pick one transition each; unset, both use the Material fade with a vertical resize.

<One.Android.AnimatedVisibility visible={open} enter="expandVertically" exit="fade">
  <One.Android.Text text="Now you see me" />
</One.Android.AnimatedVisibility>

AnimatedVisibility	Type	Description
`visible (required)`booleanThe children are shown.	boolean	The children are shown.
`enter`ComposeAnimatedVisibilityTransitionfade, scale, slideVertically, or expandVertically.	ComposeAnimatedVisibilityTransition	fade, scale, slideVertically, or expandVertically.
`exit`ComposeAnimatedVisibilityTransitionfade, scale, slideVertically, or expandVertically. The slide and expand forms shrink on exit.	ComposeAnimatedVisibilityTransition	fade, scale, slideVertically, or expandVertically. The slide and expand forms shrink on exit.

Custom dialog content

One.Android.BasicAlertDialog mounts a Material 3 dialog while it is in the React tree. Its optional onDismissRequest reports back or outside taps; remove the component to close it. children supplies the content. The properties object accepts dismissOnBackPress, dismissOnClickOutside, usePlatformDefaultWidth, and decorFitsSystemWindows, all defaulting to true. Unlike the existing Dialog, this SDK surface has no visible prop.

import { useState } from 'react'
import { One } from 'one'

function CustomDialog() {
  const [open, setOpen] = useState(true)
  return open && (
  <One.Android.BasicAlertDialog onDismissRequest={() => setOpen(false)}>
    <One.Android.Column composeStyle={{ padding: 24, backgroundColor: '#ffffff' }}>
      <One.Android.Text text="Custom dialog content" />
      <One.Android.Button label="Close" onPress={() => setOpen(false)} />
    </One.Android.Column>
  </One.Android.BasicAlertDialog>
  )
}

Material carousels

Carousel is a family of three components:

Component	Size inputs
`HorizontalCenteredHeroCarousel`	Optional `maxItemWidth`, `minSmallItemWidth`, `maxSmallItemWidth`
`HorizontalMultiBrowseCarousel`	Required `preferredItemWidth`; optional `minSmallItemWidth`, `maxSmallItemWidth`
`HorizontalUncontainedCarousel`	Required `itemWidth`

Each direct Compose child is an item. All three accept itemSpacing (dp, zero by default), contentPadding (dp or { start, top, end, bottom }), flingBehavior (singleAdvance or noSnap), and userScrollEnabled (default true). Hero and multi-browse default to single-item snapping; uncontained defaults to free scrolling. Widths must be positive, and spacing and padding must be nonnegative. Use a finite height for the carousel.

import { One } from 'one'

const items = [{ id: 'first', title: 'First item' }, { id: 'second', title: 'Second item' }]

const example = (
<One.Android.HorizontalUncontainedCarousel itemWidth={180} itemSpacing={8} style={{ height: 120 }}>
  {items.map(item => (
    <One.Android.Box key={item.id} composeStyle={{ height: 120, fillMaxWidth: true }}>
      <One.Android.Text text={item.title} />
    </One.Android.Box>
  ))}
</One.Android.HorizontalUncontainedCarousel>
)

Date ranges

DateRangePicker and DateRangePickerDialog accept optional initialStartDate and initialEndDate ISO strings. Omit both for an empty selection, or omit the end for a partial range. An end requires a start and must fall on or after it. Dates are calendar days represented at UTC midnight. selectableDates={{ start, end }} accepts optional Date bounds. Initial selections must fall within these bounds.

Both accept variant (picker or input), showVariantToggle, showTitle, showHeadline (all three booleans default to true), color, and elementColors with the existing DatePicker color keys. onDateRangeSelected({ start, end }) receives Date | null for each endpoint. The inline picker reports its initial range and each selection change. The dialog reports only a confirmed complete range. The dialog requires onDismissRequest and accepts confirmButtonLabel and dismissButtonLabel, which default to system labels. Mount and unmount the dialog to present and close it; an incomplete selection disables confirmation.

import { One } from 'one'

const setRange = (range: { start: Date | null; end: Date | null }) => console.log(range)

const example = (
<One.Android.DateRangePicker
  initialStartDate="2026-10-12"
  initialEndDate="2026-10-14"
  onDateRangeSelected={setRange}
  style={{ height: 500 }}
/>
)

HorizontalFloatingToolbar lays out Compose children in a Material toolbar. variant is standard (default) or vibrant. Its optional colors object accepts toolbarContainerColor, toolbarContentColor, fabContainerColor, and fabContentColor. Unset fields use the variant’s defaults. Put the optional FAB content inside HorizontalFloatingToolbar.FloatingActionButton, whose optional onPress receives its native click.

import { One } from 'one'

const edit = () => console.log('edit')
const add = () => console.log('add')

const example = (
<One.Android.HorizontalFloatingToolbar variant="vibrant">
  <One.Android.IconButton onClick={edit}><One.Android.Icon name="edit" /></One.Android.IconButton>
  <One.Android.HorizontalFloatingToolbar.FloatingActionButton onPress={add}>
    <One.Android.Icon name="add" />
  </One.Android.HorizontalFloatingToolbar.FloatingActionButton>
</One.Android.HorizontalFloatingToolbar>
)

Shapes

One.Android.Shape provides Star, PillStar, Pill, Circle, Rectangle, Polygon, and RoundedCorner. Shapes are leaves; give them explicit size through style at the root or composeStyle inside a Compose tree. color defaults to transparent. cornerRounding, smoothing, innerRadius, and radius are fractions from zero to one. verticesCount is an integer of at least three (default six). cornerRounding and smoothing default to zero; radius and innerRadius default to zero. Set radius={1} for a full-size circle or star. Stars use the two radii; polygons use the vertex count. Pill uses smoothing, Circle uses radius and vertex count, and Rectangle uses corner rounding and smoothing. RoundedCorner uses cornerRadii={{ topStart, topEnd, bottomStart, bottomEnd }} in dp, with omitted corners zero. Logical corners follow layout direction.

import { One } from 'one'

const example = (
<One.Android.Shape.Polygon color="#d24c30" verticesCount={5} cornerRounding={0.1} style={{ width: 80, height: 80 }} />
)

Synchronous switches

SyncSwitch accepts isOn={state} from useNativeState(false), optional enabled (default true), and optional onCheckedChangeSync. The callback must contain the 'worklet' directive. Native Compose reads and writes the shared boolean directly; all bound switches observe the same entry. The callback runs synchronously on the worklets UI runtime after a native change. Programmatic writes and disabled switches do not invoke it. The existing Switch remains the scalar isOn/onIsOnChange control.

import { One, useNativeState } from 'one'
import { useSharedValue } from 'react-native-reanimated'

function NotificationsSwitch() {
  const isOn = useNativeState(false)
  const lastChange = useSharedValue(false)
  return <One.Android.SyncSwitch isOn={isOn} onCheckedChangeSync={value => {
    'worklet'
    lastChange.value = value
  }} />
}

These APIs are Android-only and use One’s existing style and composeStyle props. Their SDK behavioral contracts are preserved; a modifiers array is not an input to One’s Compose tree. Native feature acceptance is tracked separately from adapter validation.

PreviousZoom Transitions

Menus

Edit this page on GitHub.