ContactActivityPanel

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-contact-activity-panel

pnpm add @shopify/flash-list @tanstack/react-query react-native-reanimated react-native-gesture-handler

The panel stacks these regions:

1. Header (contact, showHeader, headerActions).
2. Category tabs (All / Communication / Tasks / Updates) with counts, plus a filter button that opens the grouped type filter in an action sheet.
3. Summary row: last contacted, next activity, open task count, the Ask Docy button (renderAiAssistant) and the + Add menu (addActions + onAddActivity).
4. Upcoming tasks and meetings. Task checkboxes call onToggleUpcomingTask.
5. Timeline: calendar day groups (Today, Yesterday, This week, Last week, This month, Last month, Earlier this year, Last year, Older) on a continuous rail. Communication types render as cards (title, preview, time range, attachment and reply counts, participant avatars). Tasks and updates render as one-line rows with an attachment marker. The list is virtualised with FlashList.
6. Detail sheet (large action sheet): type chip, time range and full timestamp, a Details block of the activity's own metadata (call direction / duration, meeting location, email recipients, task status / priority / due date, …), participants, body, summary, key points, follow-ups (onToggleFollowUp), document cards (image thumbnails, per-type icons, tap to open), related records, a reaction row, the reply thread for comments, the primary action and Delete.

The Add menu emits onAddActivity(type). Pass renderAddForm as well and the panel opens your form for the picked type in its own sheet — typically a LogActivityForm scoped with activityTypes={[type]}. Call close() after a successful submit. With a single addActions entry the trigger skips the menu and opens the form directly.

Timestamps

Timeline timestamps count up while the event is recent and become a date once it isn't: now → 5m → 3h → 2d → 3w → 21 Sep → 21 Sep 2025. The units are translation keys (ui.contactActivity.time.*) and the absolute form uses the device locale.

Connect it to Docyrus with useDocyrusContactActivity, which is also re-exported from this component.

Usage

import { ContactActivityPanel, useDocyrusContactActivity } from '@/components/docyrus-native/contact-activity-panel';

function ContactTimeline({ client, contact, meId }) {
  const [logType, setLogType] = useState<string | null>(null);
  const { panelProps } = useDocyrusContactActivity({
    client,
    appSlug: 'base',
    dataSourceSlug: 'contact',
    recordId: contact.id,
    relationSlug: 'contact',
    currentUserId: meId
  });

  return (
    <ContactActivityPanel
      {...panelProps}
      contact={{ name: contact.name, org: contact.company }}
      addActions={[
        { type: 'call', label: 'Log call', icon: 'fal phone' },
        { type: 'meeting', label: 'Log meeting', icon: 'fal calendar' },
        { type: 'task', label: 'New task', icon: 'fal square-check' }
      ]}
      onAddActivity={setLogType} />
  );
}

Without maxHeight the panel is flex-1 and fills its parent, so give the parent a bounded height (a screen, or a sized View). Do not nest it in a vertical ScrollView. Pass maxHeight for a fixed-height panel.

Replies and reactions

For comment activities the detail sheet loads replies with onLoadReplies(activityId) and renders them with the team-chat PostCard / PostComposer (as on web): @ mentions, emoji, attachments and — with dataSources + onSearchEntity — entity links. Submitting calls onCreateComment({ content, parent_id, attachments, linked_entities, mentioned_user_ids, hashtags }). parent_id is the raw comment id taken from metadata.__sourceId. Own replies can be deleted after confirmation (onDeleteComment).

With onToggleReaction, the sheet shows reaction chips for the activity and for each reply. Tap the smiley / + button, or long-press a reply, to pick one of the preset emoji (or More for the full EmojiPicker). targetId is the reply id, or the activity's metadata.__sourceId (falling back to its id).

Editing replies is not offered (the panel has no update callback — same as web).

API Reference

ContactActivityPanelProps

ContactActivity

ActivityType: call, meeting, email, chat, sms, whatsapp, linkedin, note, comment (communication, rendered as cards), task (tasks), status_update, status, file, form, record, trace, record_create, record_update (updates). task, file and form rows open the detail sheet; other update rows are inert.

UpcomingActivity

RelationshipSummary

ContactActivityContact

AddActivityAction

ActivityRelatedEntity

AddFormContext

ChatUser / ChatPost / CreatePostPayload

Components

Exports

Type Exports

Translation Keys

Breaking changes