Native Components

Choose SwiftUI, Compose, or shared native components and understand their layout boundaries

Use platform components when the screen should follow that platform’s controls and layout. Use One.UI when its shared contract fits the feature. These components coexist with React Native views; their native layout systems own the content inside their hosts.

iOS components

The following families are available through One.iOS. Each reference describes its props, events, child slots, and version limits.

style controls the host’s placement in the surrounding React Native layout. swiftStyle applies SwiftUI appearance and modifiers. Native containers can host React Native content through slots. Use a finite viewport for a scrolling or filling subtree so that the native container and Yoga have a defined size. The layout reference explains the boundary options.

Plain controlled values work with React state:

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

export function Volume() {
  const [volume, setVolume] = useState(0.5)

  return (
    <One.iOS.Slider
      label="Volume"
      value={volume}
      onValueChange={setVolume}
      minimumValue={0}
      maximumValue={1}
    />
  )
}

Keep this component in an iOS branch or an .ios.tsx file. Accept a native edit by updating the controlled value in its callback. For controls whose value props accept a native state handle, you can use useNativeState instead; see TextInput and native state.

One.iOS.Tabs and NavigationStack are explicit native composition APIs. Use the router’s Tabs and Stack to navigate file routes. Routed stacks also have a header and toolbar API. The UIKit-backed toolbar, split view, and zoom transitions have separate contracts.

Android components

One.Android exposes Compose and Material components:

The Compose reference supplies the prop and slot contracts. Android menus, icons, and colors have their own pages.

A Compose root uses React Native style; its descendants use composeStyle. Supply a finite width, and either a height or a surrounding layout that bounds the root. Nested rows and columns use Compose’s alignment, arrangement, and weight rules rather than Yoga flex props.

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

export function AndroidSettings() {
  const [enabled, setEnabled] = useState(true)

  return (
    <One.Android.Column
      style={{ width: '100%', height: 180 }}
      spacing={12}
      composeStyle={{ padding: 16 }}
    >
      <One.Android.Text text="Notifications" fontSize={20} />
      <One.Android.Switch
        label="Allow notifications"
        isOn={enabled}
        onIsOnChange={setEnabled}
      />
    </One.Android.Column>
  )
}

Shared components

The One router installs its root safe-area provider. Use an additional provider only when a subtree needs its own coordinate space. Shared does not imply identical web behavior: Map renders no web view, Blur and Mask require native, and PictureInPicture renders inline on web. Consult the platform notes before selecting a shared component.