fix: ReactionsList showing empty when a user reacts to a message

[divyanshu-patil]

Proposed changes

On the client side, the reactions bottom sheet was directly reading from reaction.names to display user names. When UI_Use_Real_Name is disabled or names are not present in the payload, reaction.names could be undefined or sparse, causing the display to show blank entries instead of falling back to usernames.

This PR adds a fallback so that when reaction.names[i] is empty or not present, the component falls back to reaction.usernames[i] instead.

Issue(s)

Related to the server-side fix that was not sending names in payload even when UI_Use_Real_Name was true. This client-side change acts as a defensive fallback for cases where names are unavailable.

Related Pull request: RocketChat/Rocket.Chat#40254

How to test or reproduce

1. Open the mobile app
2. Navigate to any room with messages that have reactions
3. Long-press a reaction on any message to open the "Reactions" bottom sheet
4. Tap any emoji tab

Before: user entries appear blank when reaction.names is empty or sparse
After: falls back to displaying usernames when names are not available

Screenshots

Before

before.reactions.mp4

After

after.reactions.mp4

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

This is a companion to the server-side PR that populates reaction.names in getMessageToBroadcast. Even with that fix in place, this client-side fallback (reaction.names?.[i] || reaction.usernames[i]) is valuable as a defensive measure — for example, for older cached messages or servers that haven't yet deployed the server-side fix.

Summary by CodeRabbit

• Bug Fixes
  • Reaction name normalization updated so reaction names align with usernames by index and fall back to the corresponding username when a name is missing, preventing mismatched or undefined reaction entries.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4c2f9385-08d9-412a-b654-66edce1772bb

📥 Commits

Reviewing files that changed from the base of the PR and between fd5dc41 and d921418.

📒 Files selected for processing (1)

• app/lib/methods/helpers/normalizeMessage.ts

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Configure Prettier with tabs, single quotes, 130 character width, no trailing commas, arrow parens avoid, and bracket same line

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use ESLint with @rocket.chat/eslint-config base configuration including React, React Native, TypeScript, and Jest plugins

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use TypeScript with strict mode enabled and configure baseUrl to app/ for import resolution

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/lib/methods/helpers/normalizeMessage.ts

🧠 Learnings (1)

📓 Common learnings

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6808
File: app/containers/MessageComposer/components/ComposerInput.tsx:337-341
Timestamp: 2026-04-04T21:34:30.268Z
Learning: In Rocket.Chat React Native, the markdown composer's autocomplete insertion (ComposerInput.tsx onAutocompleteItemSelected) does NOT need to add a space between an underscore italic delimiter `_` and a `@` or `#` mention sigil. The web platform (using the same rocket.chat/message-parser) does not add such a space either, so parity with web is the correct behavior. The previous learning about "space between `_` and mention sigil" applies only to test/story file content strings, not to the composer's runtime autocomplete behavior.

🔇 Additional comments (1)

app/lib/methods/helpers/normalizeMessage.ts (1)

44-44: LGTM!

Per-index fallback correctly aligns names with usernames, addressing sparse/missing entries for cached payloads. Consumers in AllTab.tsx and ReactionsList/index.tsx rely on this index alignment, so the fix is well-placed.

---

Walkthrough

Normalize reaction names by aligning them to usernames indices: build names from msg.reactions[key].names?.[index], falling back to the corresponding username when an entry is missing, instead of assigning the entire names array or an empty fallback wholesale.

Changes

Cohort / File(s)	Summary
Reaction Normalization app/lib/methods/helpers/normalizeMessage.ts	Reworked reaction names construction to iterate over usernames and map each index to msg.reactions[key].names?.[index] with fallback to the corresponding username, replacing the previous whole-array conditional assignment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main bug fix: a missing/empty ReactionsList display issue when users react to messages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/lib/methods/helpers/normalizeMessage.ts`:
- Line 44: In normalizeMessage.ts the reactions block currently sets names with
msg.reactions[key].names || [] which misses sparse/empty entries; update it so
you iterate over (msg.reactions[key].names || []) and replace any falsy/missing
entry with a safe fallback (e.g., empty string or a default username) per entry
before assigning to names, ensuring each reaction name is a non-empty string;
locate the reactions usage in the normalizeMessage function and apply this
per-entry mapping to msg.reactions[key].names.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dfd300c7-5c4e-4fec-a574-df01e1274ec5

📥 Commits

Reviewing files that changed from the base of the PR and between 9d43512 and fd5dc41.

📒 Files selected for processing (1)

• app/lib/methods/helpers/normalizeMessage.ts

📜 Review details

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Configure Prettier with tabs, single quotes, 130 character width, no trailing commas, arrow parens avoid, and bracket same line

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use ESLint with @rocket.chat/eslint-config base configuration including React, React Native, TypeScript, and Jest plugins

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use TypeScript with strict mode enabled and configure baseUrl to app/ for import resolution

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Files:

• app/lib/methods/helpers/normalizeMessage.ts

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/lib/methods/helpers/normalizeMessage.ts