Gantt

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-gantt

pnpm add react-native-reanimated react-native-gesture-handler date-fns

Usage

import { GanttView, type GanttGroup } from '@/components/docyrus-native/gantt';

const groups: GanttGroup[] = [
  {
    id: 'frontend',
    name: 'Frontend',
    features: [
      {
        id: 'f1',
        name: 'Auth Flow',
        startAt: new Date(2026, 2, 1),
        endAt: new Date(2026, 2, 15),
        status: { id: 'done', name: 'Done', color: '#22c55e' }
      }
    ]
  }
];

<GanttView
  groups={groups}
  range="monthly"
  showToday
  onFeatureMove={(id, startAt, endAt) => save(id, startAt, endAt)}
  onFeaturePress={(feature) => console.log(feature.name)} />

GanttView is a monolithic adaptation of the web compound Gantt (GanttProvider, GanttSidebar*, GanttFeatureRow, GanttAddFeatureHelper, GanttCreateMarkerTrigger, …). The compound pieces are too granular for React Native, so the same capabilities are exposed as props and render props on one component.

Lanes

Features of the same group that share a lane are packed into one row — overlapping features stack into sub-rows, exactly like web GanttFeatureRow. Features without a lane get a row of their own. The sidebar shows a lane row with the lane name, its item count, and the duration of the whole lane.

const features = [
  { id: 'b1', name: 'API', startAt, endAt, status, lane: 'Sprint work' },
  { id: 'b2', name: 'Migration', startAt: later, endAt: evenLater, status, lane: 'Sprint work' }
];

Adding items and markers

Hover affordances from web become long-presses:

• Long-press an empty timeline cell → onAddItem(date, info) (web GanttAddFeatureHelper). info carries the pressed group and row (so you can put the new feature into the same lane). Presses that land on a bar are ignored.
• Long-press the timeline header → onCreateMarker(date) (web GanttCreateMarkerTrigger).
• Tap a marker label → an action sheet with Remove marker → onMarkerRemove(id) (web right-click context menu). Without onMarkerRemove the label is not interactive.

<GanttView
  groups={groups}
  markers={markers}
  onAddItem={(date, { group, row }) => createFeature(group?.id, date, row?.lane)}
  onCreateMarker={(date) => setMarkers(m => [...m, { id: uid(), date, label: 'Milestone' }])}
  onMarkerRemove={(id) => setMarkers(m => m.filter(x => x.id !== id))} />

Custom content

<GanttView
  groups={groups}
  renderFeature={(feature) => (
    <Text className="text-[10px] font-semibold text-white">{feature.name} · {feature.status.name}</Text>
  )}
  renderSidebarItem={(row) => (
    <Text className="text-xs text-foreground">{row.lane ?? row.features[0]?.name}</Text>
  )} />

Interactions

Drag and resize are enabled only when onFeatureMove is supplied and readOnly is false. readOnly also disables long-press add and marker create / remove.

API Reference

GanttGroup

GanttFeature

GanttStatus

GanttMarkerData

GanttRowData

GanttAddItemInfo

Translations

Durations use date-fns formatDistance (same as web). Marker dates use useDateFormat().formatDate when a DateFormatProvider is mounted, else MMM dd, yyyy.

Components

Type Exports