Components Overview

React Native Jetpack Compose provides 8 native Android components built on Jetpack Compose and Material 3.

Form Inputs

Component	Description
TextField	Material 3 text input with labels, icons, validation, and keyboard options
Picker	Dropdown picker using ExposedDropdownMenuBox
SheetPicker	Searchable picker with a modal bottom sheet

Date & Time

Component	Description
DatePicker	Date selection with calendar dialog
DateRangePicker	Select start and end dates
TimePicker	Time selection with dial or keyboard input
TimeRangePicker	Select start and end times

Containers

Component	Description
ModalBottomSheet	Draggable bottom sheet for custom content

Common Patterns

Importing Components

All components are exported from the main package:

import {
  TextField,
  Picker,
  SheetPicker,
  DatePicker,
  DateRangePicker,
  TimePicker,
  TimeRangePicker,
  ModalBottomSheet,
} from '@mgcrea/react-native-jetpack-compose';

Controlled Components

All input components follow the controlled component pattern:

const [value, setValue] = useState('');

<TextField value={value} onChange={setValue} />

Dialog Components

Date and time pickers show a dialog when tapped. They use a confirm/cancel pattern:

const [date, setDate] = useState<Date | null>(null);

<DatePicker
  value={date}
  onConfirm={setDate}    // User pressed OK
  onCancel={() => {}}    // User pressed Cancel
  onChange={() => {}}    // Value changed (before confirm)
/>

Styling

All components accept a style prop for container styling:

<TextField
  label="Name"
  value={name}
  onChange={setName}
  style={{ marginBottom: 16, marginHorizontal: 8 }}
/>

Material 3 theming is applied automatically based on your Android system theme.

Disabling Components

All components support a disabled prop:

<TextField disabled label="Read Only" value="Cannot edit" />
<DatePicker disabled label="No Date Selection" />
<Picker disabled label="No Selection" options={[]} />