Introduction

React Native Jetpack Compose provides native Android UI components built directly on Jetpack Compose and Material 3. These components integrate seamlessly with React Native’s New Architecture (Fabric) for optimal performance.

Features

Native Performance: Components render directly through Jetpack Compose, not via bridge calls
Material 3 Design: Full Material You theming with dynamic colors on Android 12+
New Architecture: Built for Fabric with codegen-generated type-safe bindings
TypeScript Support: Complete type definitions for all components and props
Controlled Components: Standard React patterns with value/onChange props

Available Components

Component	Description
TextField	Material 3 text input with labels, icons, and validation
Picker	Dropdown picker for option selection
SheetPicker	Searchable picker with bottom sheet modal
DatePicker	Date selection with calendar dialog
DateRangePicker	Date range selection
TimePicker	Time selection with dial or keyboard input
TimeRangePicker	Time range selection
ModalBottomSheet	Draggable bottom sheet container

Requirements

React Native 0.76.0 or later (New Architecture required)
Android API level 24 (Android 7.0) or higher
Jetpack Compose BOM 2024.02.00 or later (included)

Quick Example

import { useState } from 'react';
import { View } from 'react-native';
import { TextField, DatePicker } from '@mgcrea/react-native-jetpack-compose';

export function MyForm() {
  const [name, setName] = useState('');
  const [birthDate, setBirthDate] = useState<Date | null>(null);

  return (
    <View>
      <TextField
        label="Full Name"
        value={name}
        onChange={setName}
        placeholder="Enter your name"
      />
      <DatePicker
        label="Birth Date"
        value={birthDate}
        onConfirm={setBirthDate}
        maxDate={new Date()}
      />
    </View>
  );
}

Next Steps

Installation - Set up the library in your project
Quick Start - Build your first form
How It Works - Understand the architecture