RocketChat / RocketChat/Rocket.Chat.ReactNative

feature: Add "Mark as Read" action button to push notifications

Open
#6,842 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🎉 feature
Dominant language
TypeScript
Stars
2.4k
Forks
1.5k
Avg merge
1d 18h
Merged PRs (30d)
90

Description

Feature Description

Add a "Mark as Read" quick action button to push notifications, similar to WhatsApp, Telegram, and Slack messaging apps. This would allow users to mark messages/rooms as read directly from the notification without opening the app.

Proposed Behavior:
  • When a user receives a chat notification, they would see action buttons including:

    • Reply (already exists)
    • Mark as Read (NEW)
  • Tapping "Mark as Read" would:

    • Call the subscriptions.read API endpoint
    • Clear the unread badge for that room
    • Remove the notification from the notification tray
    • Update the room's read status on the server

This feature would work in both foreground and background states.

Motivation and Use Case
User Pain Points:
  1. Notification Overload: Users often receive many notifications during busy periods and want a quick way to triage them without opening each conversation
  2. Workflow Interruption: Currently, users must open the app and navigate to each room just to mark messages as read, which disrupts their current task
  3. Mobile UX Expectations: Modern messaging apps (WhatsApp, Telegram, Slack, Microsoft Teams) all provide this functionality, making it a standard user expectation
Benefits:

Faster notification management - One tap vs opening app → navigating to room → going back
Reduced app opens - Better battery life and performance
Better focus - Users can clear notifications without context switching
Cleaner notification tray - Reduces notification fatigue
Professional UX - Matches expectations from other enterprise chat apps

Implementation Ideas

Technical Implementation Plan:

Phase 1: iOS (Easier to implement)

  1. Add Notification Action (app/lib/notifications/push.ts)
const markAsReadAction = new NotificationAction(
  'MARK_AS_READ_ACTION', 
  'background',  // Can execute in background
  I18n.t('Mark_as_read'), 
  false  // Doesn't require text input
);

const notificationCategory = new NotificationCategory('MESSAGE', [
  notificationAction,    // Existing Reply action
  markAsReadAction       // NEW action
]);

  1. Add Native Handler (ios/ReplyNotification.swift)

    • Add handler similar to existing REPLY_ACTION
    • Extract rid from notification payload
    • Call subscriptions.read API endpoint
    • Handle success/failure cases
  2. API Integration

    • Endpoint: POST subscriptions.read (already exists!)
    • Parameters: { rid: string, readThreads?: boolean }
    • Auth: Use existing RocketChat helper class

Phase 2: Android

Android requires custom notification channel configuration:

  • Create notification action in Java/Kotlin
  • Wire up to existing API methods
  • Handle background execution

API Requirements:

Good news: The required API already exists!

  • Endpoint: subscriptions.read (available since RC 0.61.0)
  • Current usage: Already used in app/lib/methods/readMessages.ts
  • No server changes needed

API Flow:
Notification Action → Extract rid → POST subscriptions.read { rid } → Update local DB → Clear notification

Edge Cases to Handle:

  1. Network Unavailable:

    • Queue action for retry when connection restored
    • Or show brief error notification
  2. Expired Auth Token:

    • Attempt token refresh
    • Gracefully fail if user needs to re-login
  3. Multiple Notifications from Same Room:

    • Mark all as read when action is triggered on any one
  4. Encrypted Rooms:

    • Works the same way (marks as read, doesn't affect encryption)
Is this feature available in the API or web version?

Available in API

Rocket.Chat Server Version

Any version >= 0.61.0 (subscriptions.read API available)

Rocket.Chat App Version

4.68.0

Device Name

All iOS and Android devices

OS Version

iOS 13+ / Android 7.0+ (notification actions support)

Additional Context
Image

This is the feature i am talking about !!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with app/lib/notifications/push.ts and ios/ReplyNotification.swift, then inspect the existing REPLY_ACTION handler and app/lib/methods/readMessages.ts for the subscriptions.read API usage. Trace how notification payloads provide rid and how foreground and background actions are handled on both platforms. Done means a Mark as Read action calls subscriptions.read, clears the room notification and unread state, and works in foreground and background.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, ios, react-native, swift, typescript
Domain
mobile, mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.