regression: custom emoji rendering as raw shortname in reaction bar and emoji picker

[OtavioStasiak]

Proposed changes

Long-pressing a message showed the raw shortname (:clap:) in the reactions top bar when a custom emoji had the same name as a built-in one. The same issue happened in the emoji picker's Frequently Used tab.

This regression was introduced by #7462, where useShortnameToUnicode started returning the shortname when a custom emoji owns that name. These components were still deciding custom vs. built-in based only on the item's type.

This PR resolves string shortnames against the custom emoji map and renders CustomEmoji when needed. It also fixes the Header testID/accessibilityLabel for custom emojis and adds unit tests.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1542

How to test or reproduce

Screenshots

Before	After

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

Summary by CodeRabbit

• New Features

  • Custom emojis now render as images wherever supported, including emoji pickers and message action headers.
  • When no matching custom emoji is available, the interface continues to display the standard Unicode emoji fallback.

• Tests

  • Added coverage verifying custom emoji rendering and Unicode fallback behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: ebe20d12-50df-4ada-a39d-e967b537b90c

📥 Commits

Reviewing files that changed from the base of the PR and between c3bf3e0 and 0e6410a.

📒 Files selected for processing (3)

• app/containers/EmojiPicker/Emoji.test.tsx
• app/containers/EmojiPicker/Emoji.tsx
• app/containers/MessageActions/Header.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📜 Recent review details

⏰ Context from checks skipped due to timeout. (4)

• GitHub Check: E2E Build iOS / ios-build
• GitHub Check: E2E Build Android / android-build
• GitHub Check: Build iOS / Hold
• GitHub Check: Build Android / Hold

🧰 Additional context used

📓 Path-based instructions (3)

Format JavaScript and TypeScript code with Oxfmt using the repository configuration: tabs, single quotes, 130-character width, no trailing commas, omitted arrow-function parentheses where possible, and same-line brackets.

📄 CodeRabbit inference engine (CLAUDE.md)

Files:

• app/containers/MessageActions/Header.tsx
• app/containers/EmojiPicker/Emoji.test.tsx
• app/containers/EmojiPicker/Emoji.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...

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• app/containers/MessageActions/Header.tsx
• app/containers/EmojiPicker/Emoji.test.tsx
• app/containers/EmojiPicker/Emoji.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 str...

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• app/containers/MessageActions/Header.tsx
• app/containers/EmojiPicker/Emoji.test.tsx
• app/containers/EmojiPicker/Emoji.tsx

🧠 Learnings (1)

📚 Learning: 2026-06-25T18:37:25.526Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.test.tsx:16-22
Timestamp: 2026-06-25T18:37:25.526Z
Learning: In Rocket.Chat ReactNative tests that mock selectors for `useAppSelector`, don’t require the mocked selector input to be typed as `IApplicationState` when the fixture only includes a partial Redux state slice (e.g., only `server` and `settings`). Requiring the full `IApplicationState` type in that scenario forces unsafe `as IApplicationState` casts and undermines type-safety. For these narrowly scoped selector-mock fixtures, use a less strict type (e.g., `any`) to keep the mock focused on the slice under test.

Applied to files:

• app/containers/EmojiPicker/Emoji.test.tsx

🔇 Additional comments (3)

app/containers/EmojiPicker/Emoji.tsx (1)

5-5: LGTM!

Also applies to: 12-13, 15-16, 18-18

app/containers/EmojiPicker/Emoji.test.tsx (1)

1-24: LGTM!

app/containers/MessageActions/Header.tsx (1)

8-8: LGTM!

Also applies to: 70-72, 75-77, 80-81, 83-83

---

Walkthrough

The change resolves string emoji names through custom emoji lookup in the emoji picker and message action headers. Unicode rendering remains the fallback when no custom emoji matches. Tests cover both custom and Unicode rendering.

Changes

Emoji rendering

Layer / File(s)	Summary
Emoji picker resolution app/containers/EmojiPicker/Emoji.tsx, app/containers/EmojiPicker/Emoji.test.tsx	The picker renders matching custom emoji data and falls back to Unicode text. Tests cover both paths.
Message header resolution app/containers/MessageActions/Header.tsx	Message action headers resolve string names, use normalized accessibility identifiers, and render custom or Unicode emoji accordingly.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested labels: type: bug

Suggested reviewers: diegolmello

Merge Risk: ⚪ Minimal · up to 0e641

Custom emoji names now render correctly while unmatched names retain Unicode fallback behavior. No actionable merge risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the regression fixed in custom emoji rendering for the reaction bar and emoji picker.

Warning

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

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.}