Skip to content
React Native Jetpack Compose

React Native Jetpack Compose

Features

Section titled “Features”
  • 🤖 Native Jetpack Compose - Authentic Android components with Material 3 design
  • 🔧 No Dependencies - Safe from supply chain attacks
  • ⚡ Fabric Renderer - Built for React Native’s New Architecture for optimal performance
  • 🎯 Type-Safe - Full TypeScript support with comprehensive type definitions
  • 📝 Declarative - Familiar React patterns with JSX syntax
  • 🎨 Material You - Dynamic colors, system theming, and Material Icons support
  • 📱 Android 7+ - Broad device compatibility (API level 24+)
  • 📦 Zero Config - No complex setup, just install and use

Quick Example

Section titled “Quick Example”
import { useState } from "react";
import { DatePicker, TextField, Picker } from "@mgcrea/react-native-jetpack-compose";


export function BookingForm() {
  const [name, setName] = useState("");
  const [date, setDate] = useState<Date | null>(null);
  const [room, setRoom] = useState<string | null>(null);


  return (
    <>
      <TextField label="Guest Name" value={name} onChange={setName} />
      <DatePicker label="Check-in Date" value={date} onConfirm={setDate} />
      <Picker
        label="Room Type"
        value={room}
        onChange={setRoom}
        options={[
          { value: "standard", label: "Standard Room" },
          { value: "deluxe", label: "Deluxe Suite" },
          { value: "penthouse", label: "Penthouse" },
        ]}
      />
    </>
  );
}

Available Components

Section titled “Available Components”

TextField

Material 3 text input with labels, icons, validation states, and keyboard options.

Picker

Dropdown picker using ExposedDropdownMenuBox for option selection.

SheetPicker

Searchable picker with a modal bottom sheet, ideal for long lists.

DatePicker

Date selection dialog with calendar view and input mode.

DateRangePicker

Select a start and end date with range visualization.

TimePicker

Time selection with dial or keyboard input, 12/24-hour support.

TimeRangePicker

Select a start and end time for scheduling.

ModalBottomSheet

Draggable bottom sheet container for custom content.

Next Steps

Section titled “Next Steps”

Installation

Set up React Native Jetpack Compose in your project. Get started →

Quick Start

Build your first form with native components. Quick start →