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.

Reach for these when a screen is Android only and should feel like the system. Every view throws outside an Android build, including on web, so 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>
  )
}

How it works

Each One.Android view renders a Fabric node carrying a Compose node type; nested nodes form one Compose tree on the Android side. A node inside a Compose tree styles through composeStyle, which maps to Compose modifiers, while style applies only at the root of the tree and throws when nested. Leaves throw when given children. A root with no explicit height measures its content natively and resizes to fit.

Controls keep their value in a native model with an event count and a revision, like the iOS controls: native edits report up, JavaScript acknowledges, and raising revision with a new value resets the control from the outside. TextField and SyncSwitch bind NativeState handles so keystrokes and flips converge without a React render.

Shared props

Every node takes these. Nodes also take accessibilityLabel, accessibilityState, accessibilityValue, and testID.

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.

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

Column stacks children vertically, Row horizontally, and Box layers them. FlowRow wraps children across rows. Spacer is a gap: with composeStyle={{ weight: 1 }} it takes the free space in a Row or Column; with width or height it is fixed. Any other direct child takes a positive weight the same way.

import { One } from 'one'

function Header() {
  return (
    <One.Android.Row verticalAlignment="centerVertically" spacing={8}>
      <One.Android.Text text="Title" />
      <One.Android.Spacer composeStyle={{ weight: 1 }} />
      <One.Android.Text text="End" />
    </One.Android.Row>
  )
}

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.

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.

Text

import { One } from 'one'

function Headline() {
  return <One.Android.Text text="Hello" fontSize={20} fontWeight="bold" maxLines={1} />
}

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

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

import { One } from 'one'

function HomeIcon() {
  return <One.Android.Icon name="home" size={24} />
}

Props	Type	Description
`name (required)`ComposeIconNameThe Material Symbol name.	ComposeIconName	The Material Symbol name.
`size`numberThe size in dp.	number	The size in dp.
`filled`booleanUses the filled icon font.	boolean	Uses the filled icon font.

Buttons

Button shows a label with an optional leading icon.

import { One } from 'one'

function SaveButton({ save }: { save: () => void }) {
  return <One.Android.Button label="Save" icon="save" variant="tonal" onPress={save} />
}

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.

import { One } from 'one'

function EditButton({ edit }: { edit: () => void }) {
  return (
    <One.Android.IconButton onClick={edit}>
      <One.Android.Icon name="edit" />
    </One.Android.IconButton>
  )
}

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, and expanded shows or hides its text.

import { One } from 'one'

function AddButton({ add }: { add: () => void }) {
  return (
    <One.Android.FloatingActionButton onClick={add}>
      <One.Android.FloatingActionButton.Icon>
        <One.Android.Icon name="add" />
      </One.Android.FloatingActionButton.Icon>
    </One.Android.FloatingActionButton>
  )
}

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	Type	Description
`expanded`booleanShows or hides the text.	boolean	Shows or hides the text.

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

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

function Favorite() {
  const [on, setOn] = useState(false)

  return (
    <One.Android.ToggleButton checked={on} onCheckedChange={setOn}>
      <One.Android.Text text="Favorite" />
    </One.Android.ToggleButton>
  )
}

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.

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

function SizeRow() {
  const [size, setSize] = useState('small')

  return (
    <One.Android.SingleChoiceSegmentedButtonRow>
      <One.Android.SegmentedButton selected={size === 'small'} onClick={() => setSize('small')}>
        <One.Android.Text text="Small" />
      </One.Android.SegmentedButton>
      <One.Android.SegmentedButton selected={size === 'large'} onClick={() => setSize('large')}>
        <One.Android.Text text="Large" />
      </One.Android.SegmentedButton>
    </One.Android.SingleChoiceSegmentedButtonRow>
  )
}

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

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

function AirplaneMode() {
  const [on, setOn] = useState(false)

  return <One.Android.Switch label="Airplane mode" isOn={on} onIsOnChange={setOn} />
}

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.

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

function Options() {
  const [agreed, setAgreed] = useState(false)
  const [picked, setPicked] = useState('a')

  return (
    <>
      <One.Android.Checkbox value={agreed} onCheckedChange={setAgreed} />
      <One.Android.RadioButton selected={picked === 'a'} onClick={() => setPicked('a')} />
    </>
  )
}

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.

import { One } from 'one'

function Note() {
  return (
    <One.Android.Card elevation={2} composeStyle={{ padding: 16 }}>
      <One.Android.Text text="Hello" />
    </One.Android.Card>
  )
}

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.

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.

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

function Tile() {
  const [checked, setChecked] = useState(false)

  return (
    <One.Android.Surface checked={checked} onCheckedChange={setChecked} composeStyle={{ cornerRadius: 12 }}>
      <One.Android.Text text="Tile" />
    </One.Android.Surface>
  )
}

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

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

import { One } from 'one'

function InboxRow() {
  return (
    <One.Android.ListItem>
      <One.Android.ListItem.HeadlineContent>
        <One.Android.Text text="Hello" />
      </One.Android.ListItem.HeadlineContent>
      <One.Android.ListItem.SupportingContent>
        <One.Android.Text text="Preview" />
      </One.Android.ListItem.SupportingContent>
    </One.Android.ListItem>
  )
}

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.

import { One } from 'one'

function Split() {
  return (
    <One.Android.Column>
      <One.Android.Text text="Above" />
      <One.Android.HorizontalDivider />
      <One.Android.Text text="Below" />
    </One.Android.Column>
  )
}

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

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

import { One } from 'one'

function InboxIcon() {
  return (
    <One.Android.BadgedBox>
      <One.Android.BadgedBox.Badge>
        <One.Android.Badge>
          <One.Android.Text text="3" />
        </One.Android.Badge>
      </One.Android.BadgedBox.Badge>
      <One.Android.Icon name="home" />
    </One.Android.BadgedBox>
  )
}

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.

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

function Filters() {
  const [on, setOn] = useState(false)

  return (
    <One.Android.FilterChip selected={on} onClick={() => setOn(!on)}>
      <One.Android.FilterChip.Label>
        <One.Android.Text text="Filter" />
      </One.Android.FilterChip.Label>
    </One.Android.FilterChip>
  )
}

AssistChip	Type	Description
`colors`ComposeAssistChipColorsContainer, label, and icon colors.	ComposeAssistChipColors	Container, label, and icon colors.

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.

SuggestionChip	Type	Description
`colors`ComposeSuggestionChipColorsContainer, label, and icon colors.	ComposeSuggestionChipColors	Container, label, and icon colors.

TextField

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

import { One, useNativeState } from 'one'

function Name() {
  const name = useNativeState('')

  return (
    <One.Android.TextField
      text={name}
      onTextChange={(value) => name.set(value)}
      label="Name"
      variant="outlined"
    />
  )
}

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

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

function Volume() {
  const [value, setValue] = useState(0.5)

  return <One.Android.Slider value={value} onValueChange={setValue} step={0.1} />
}

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

DatePicker is the Material 3 calendar and 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.

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

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

  return (
    <>
      <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.

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

function PickDay() {
  const [open, setOpen] = useState(false)
  const [day, setDay] = useState(() => new Date())

  return (
    <>
      <One.Android.Button label="Pick a day" onPress={() => setOpen(true)} />
      {open ? (
        <One.Android.DatePickerDialog
          selection={day}
          visible={open}
          onConfirm={(value) => {
            setDay(value)
            setOpen(false)
          }}
          onDismiss={() => setOpen(false)}
        />
      ) : null}
    </>
  )
}

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.

Date ranges

DateRangePicker and DateRangePickerDialog take 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 at UTC midnight. selectableDates={{ start, end }} takes optional Date bounds that the initial selection must fall within.

Both take variant (picker or input), showVariantToggle, showTitle, showHeadline (all default true), color, and elementColors with the DatePicker color keys. onDateRangeSelected({ start, end }) receives Date | null per endpoint. The inline picker reports its initial range and each change; the dialog reports only a confirmed complete range, needs onDismissRequest, and mounts to present. An incomplete selection disables confirmation.

import { One } from 'one'

function Stay() {
  return (
    <One.Android.DateRangePicker
      initialStartDate="2026-10-12"
      initialEndDate="2026-10-14"
      onDateRangeSelected={(range) => console.log(range.start, range.end)}
      style={{ height: 500 }}
    />
  )
}

DateRangePicker	Type	Description
`initialStartDate`string \| nullThe first selected day, as an ISO string.	string \| null	The first selected day, as an ISO string.
`initialEndDate`string \| nullThe last selected day. Needs a start.	string \| null	The last selected day. Needs a start.
`onDateRangeSelected`(range: ComposeDateRangeSelection) => voidThe initial range and each change.	(range: ComposeDateRangeSelection) => void	The initial range and each change.
`variant`'picker' \| 'input'The calendar or text fields.	'picker' \| 'input'	The calendar or text fields.
`showVariantToggle`booleanShows the button that switches variant.	boolean	Shows the button that switches variant.
`showTitle`booleanShows the title.	boolean	Shows the title.
`showHeadline`booleanShows the headline.	boolean	Shows the headline.
`color`ColorValueTints the picker.	ColorValue	Tints the picker.
`elementColors`ComposeDatePickerColorsPer-element colors.	ComposeDatePickerColors	Per-element colors.
`selectableDates`{ start?: Date; end?: Date }Bounds the selectable days.	{ start?: Date; end?: Date }	Bounds the selectable days.

DateRangePickerDialog	Type	Description
`confirmButtonLabel`stringThe confirm button title. Defaults to the system label.	string	The confirm button title. Defaults to the system label.
`dismissButtonLabel`stringThe dismiss button title. Defaults to the system label.	string	The dismiss button title. Defaults to the system label.
`onDismissRequest (required)`() => voidDismissed by the button, a tap outside, or back.	() => void	Dismissed by the button, a tap outside, or back.

AlertDialog, Dialog

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

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

function DeleteFile({ remove }: { remove: () => void }) {
  const [open, setOpen] = useState(false)

  return (
    <>
      <One.Android.Button label="Delete" tone="danger" onPress={() => setOpen(true)} />
      <One.Android.AlertDialog
        visible={open}
        title="Delete file?"
        message="This cannot be undone."
        confirmLabel="Delete"
        dismissLabel="Cancel"
        onConfirm={() => {
          remove()
          setOpen(false)
        }}
        onDismiss={() => setOpen(false)}
      />
    </>
  )
}

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.

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. Unlike Dialog, it takes 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>
    )
  )
}

BasicAlertDialog	Type	Description
`onDismissRequest`() => voidBack or an outside tap asked to close it.	() => void	Back or an outside tap asked to close it.
`properties`Readonly<{ dismissOnBackPress?: boolean dismissOnClickOutside?: boolean usePlatformDefaultWidth?: boolean decorFitsSystemWindows?: boolean }>Dialog behavior. Every field defaults to true.	Readonly<{ dismissOnBackPress?: boolean dismissOnClickOutside?: boolean usePlatformDefaultWidth?: boolean decorFitsSystemWindows?: boolean }>	Dialog behavior. Every field defaults to true.

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.

import { One } from 'one'

function Loading({ done }: { done: number }) {
  return (
    <>
      <One.Android.ProgressIndicator variant="linear" progress={done} />
      <One.Android.ProgressIndicator />
    </>
  )
}

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.

import { One } from 'one'

function Busy() {
  return <One.Android.LoadingIndicator color="#6750a4" />
}

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

LazyColumn scrolls children vertically and 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); items size themselves.

import { One } from 'one'

function Feed({ items }: { items: { id: string; title: string }[] }) {
  return (
    <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

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

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

function Photo({ fileUri }: { fileUri: string }) {
  const [loaded, setLoaded] = useState(false)

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

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

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 Snackbar child styles the shown snackbars.

import { useRef } from 'react'
import { One, type ComposeSnackbarHostRef } from 'one'

function Saver() {
  const host = useRef<ComposeSnackbarHostRef>(null)

  async function save() {
    const result = await host.current?.showSnackbar({ message: 'File saved', actionLabel: 'Undo' })
    console.log(result)
  }

  return (
    <>
      <One.Android.Button label="Save" onPress={() => void save()} />
      {/* @ts-expect-error Android-only ref */}
      <One.Android.SnackbarHost ref={host}>
        <One.Android.Snackbar containerColor="#1b1b1f" />
      </One.Android.SnackbarHost>
    </>
  )
}

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

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.

import { useRef, useState } from 'react'
import { One, type ComposeModalBottomSheetRef } from 'one'

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

  return (
    <>
      <One.Android.Button label="Open" onPress={() => setOpen(true)} />
      {open ? (
        // @ts-expect-error Android-only ref
        <One.Android.ModalBottomSheet ref={sheet} onDismissRequest={() => setOpen(false)}>
          <One.Android.Text text="Sheet body" />
          <One.Android.Button label="Hide" onPress={() => void sheet.current?.hide()} />
        </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:

import { One } from 'one'

function HandleSheet({ close }: { close: () => void }) {
  return (
    <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

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

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

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

  return (
    <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

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. DockedSearchBar shares the same props, and its results anchor under the field instead of taking the screen.

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

function Search({ results, runSearch }: { results: { id: string; title: string }[]; runSearch: (query: string) => void }) {
  const [query, setQuery] = useState('')
  const [expanded, setExpanded] = useState(false)

  return (
    <One.Android.SearchBar
      query={query}
      onQueryChange={setQuery}
      expanded={expanded}
      onExpandedChange={setExpanded}
      placeholder="Search items"
      onSearch={runSearch}
    >
      <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

DropdownMenu is the Material 3 popup menu. Put it beside its anchor in a Box; its children are DropdownMenuItem rows. The parent owns expansion: expanded opens it, and onDismissRequest fires on an outside tap or back press. 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.

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

function Menus({ edit, share }: { edit: () => void; share: () => void }) {
  const [open, setOpen] = useState(false)
  const [boxOpen, setBoxOpen] = useState(false)
  const [size, setSize] = useState('Medium')

  return (
    <>
      <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

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.

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

function Feed({ items, reload }: { items: { id: string; title: string }[]; reload: () => Promise<void> }) {
  const [refreshing, setRefreshing] = useState(false)

  return (
    <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

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

import { One } from 'one'

function SaveTip({ save }: { save: () => void }) {
  return (
    <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

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.

import { One } from 'one'

function Reveal({ open }: { open: boolean }) {
  return (
    <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.

Material carousels

HorizontalCenteredHeroCarousel takes optional maxItemWidth, minSmallItemWidth, and maxSmallItemWidth. HorizontalMultiBrowseCarousel takes a required preferredItemWidth with optional small widths. HorizontalUncontainedCarousel takes a required itemWidth. Each direct Compose child is an item. All three take 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'

function Gallery({ items }: { items: { id: string; title: string }[] }) {
  return (
    <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>
  )
}

Carousel	Type	Description
`children (required)`ReactNodeOne item per direct Compose child.	ReactNode	One item per direct Compose child.
`itemSpacing`numberThe gap between items, in dp.	number	The gap between items, in dp.
`contentPadding`number \| ComposeLazyContentPaddingInset around the items, in dp.	number \| ComposeLazyContentPadding	Inset around the items, in dp.
`flingBehavior`'singleAdvance' \| 'noSnap'Single-item snapping or free scrolling.	'singleAdvance' \| 'noSnap'	Single-item snapping or free scrolling.
`userScrollEnabled`booleanWhether swipes scroll the carousel.	boolean	Whether swipes scroll the carousel.

HeroCarousel	Type	Description
`maxItemWidth`numberThe widest a large item may be, in dp.	number	The widest a large item may be, in dp.
`minSmallItemWidth`numberThe narrowest a small item may be, in dp.	number	The narrowest a small item may be, in dp.
`maxSmallItemWidth`numberThe widest a small item may be, in dp.	number	The widest a small item may be, in dp.

MultiBrowseCarousel	Type	Description
`preferredItemWidth (required)`numberThe item width, in dp.	number	The item width, in dp.

UncontainedCarousel	Type	Description
`itemWidth (required)`numberThe item width, in dp.	number	The item width, in dp.

HorizontalFloatingToolbar lays out Compose children in a Material toolbar. variant is standard (default) or vibrant. Put the optional FAB content inside HorizontalFloatingToolbar.FloatingActionButton.

import { One } from 'one'

function EditBar({ edit, add }: { edit: () => void; add: () => void }) {
  return (
    <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>
  )
}

HorizontalFloatingToolbar	Type	Description
`children (required)`ReactNodeThe toolbar content.	ReactNode	The toolbar content.
`variant`'standard' \| 'vibrant'The toolbar style.	'standard' \| 'vibrant'	The toolbar style.
`colors`Readonly<{ toolbarContainerColor?: ColorValue toolbarContentColor?: ColorValue fabContainerColor?: ColorValue fabContentColor?: ColorValue }>Toolbar and FAB colors. Unset fields use the variant defaults.	Readonly<{ toolbarContainerColor?: ColorValue toolbarContentColor?: ColorValue fabContainerColor?: ColorValue fabContentColor?: ColorValue }>	Toolbar and FAB colors. Unset fields use the variant defaults.

FloatingActionButton	Type	Description
`children (required)`ReactNodeThe FAB content.	ReactNode	The FAB content.
`onPress`() => voidRuns when tapped.	() => void	Runs when tapped.

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 tree. color defaults to transparent. cornerRounding, smoothing, innerRadius, and radius are fractions from zero to one, all defaulting to zero; verticesCount is an integer of at least three (default six). 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; 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'

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

Shape	Type	Description
`cornerRounding`numberCorner rounding, from 0 to 1.	number	Corner rounding, from 0 to 1.
`smoothing`numberCorner smoothing, from 0 to 1.	number	Corner smoothing, from 0 to 1.
`verticesCount`numberPolygon vertices. An integer of at least three.	number	Polygon vertices. An integer of at least three.
`innerRadius`numberThe star inner radius, from 0 to 1.	number	The star inner radius, from 0 to 1.
`radius`numberThe outer radius, from 0 to 1.	number	The outer radius, from 0 to 1.
`cornerRadii`Readonly<{ topStart?: number topEnd?: number bottomStart?: number bottomEnd?: number }>RoundedCorner radii in dp.	Readonly<{ topStart?: number topEnd?: number bottomStart?: number bottomEnd?: number }>	RoundedCorner radii in dp.
`color`ColorValueThe fill. Transparent when unset.	ColorValue	The fill. Transparent when unset.

Synchronous switches

SyncSwitch takes 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
      }}
    />
  )
}

SyncSwitch	Type	Description
`isOn (required)`NativeState<boolean>A useNativeState handle shared by every bound switch.	NativeState<boolean>	A useNativeState handle shared by every bound switch.
`enabled`booleanA disabled switch ignores taps.	boolean	A disabled switch ignores taps.
`onCheckedChangeSync`(checked: boolean) => voidA worklet that runs synchronously after a native flip.	(checked: boolean) => void	A worklet that runs synchronously after a native flip.

Platform differences

	iOS	Android	Web
Renders	Throws	Compose views	Throws
Controls	None	Native models	None

Limits and gotchas

Android only. Every view throws outside an Android build; keep them in an Android branch or an .android.tsx file.
Style at the root, composeStyle inside. A nested node with style throws, as does a leaf with children.
Controlled values reset with a revision bump. A new value alone loses to an unacknowledged native edit; increase revision in the same render.
Give scrollers bounds. Lazy lists, carousels, and the refresh box need a bounded height or width to lay out.

PreviousZoom Transitions

Menus

Edit this page on GitHub.