refactor: apply useCustomEmoji#7472
Conversation
… getCustomEmoji from IMarkdownProps and MarkdownContext
…atar chains Removes the getCustomEmoji prop from every component that only threaded it toward markdown or Avatar's now-removed context provider (Attachments, Reply, Quote, CollapsibleQuote, Image, AttachedActions, AvatarContainer, AvatarWithEdit, MessageAvatar), plus stale fixtures in stories/tests. Message.stories.tsx seeds mockedStore via setCustomEmojis so its markdown- rendered attachment text still resolves custom emoji now that Markdown self-sources from Redux. Message's own getCustomEmoji prop is kept for its live non-markdown consumers (Reactions, message/Emoji).
diegolmello
had a problem deploying
to
approve_e2e_testing
GitHub Actions
Error
WalkthroughCustom emoji handling moves from per-component ChangesgetCustomEmoji removal and useCustomEmoji hook
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
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. Comment |
diegolmello
changed the title
diegolmello
changed the title
diegolmello
had a problem deploying
to
approve_e2e_testing
GitHub Actions
Error
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/lib/hooks/useCustomEmoji.ts (1)
4-4: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return type annotation.
resolveCustomEmojihas parameter types but no explicit return type; per guidelines, TypeScript functions should have explicit return type annotations.♻️ Proposed fix
-export const resolveCustomEmoji = (customEmojis: ICustomEmojis, name: string) => customEmojis[name] ?? null; +export const resolveCustomEmoji = (customEmojis: ICustomEmojis, name: string): ICustomEmoji | null => customEmojis[name] ?? null;As per coding guidelines, "Use TypeScript for type safety; add explicit type annotations to function parameters and return types."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/lib/hooks/useCustomEmoji.ts` at line 4, `resolveCustomEmoji` currently relies on inference for its return type, but the TypeScript guidelines require an explicit annotation. Update the `resolveCustomEmoji` function signature in `useCustomEmoji` to declare its return type directly, keeping the existing parameter types and null fallback behavior unchanged.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/lib/hooks/useCustomEmoji.ts`:
- Line 4: `resolveCustomEmoji` currently relies on inference for its return
type, but the TypeScript guidelines require an explicit annotation. Update the
`resolveCustomEmoji` function signature in `useCustomEmoji` to declare its
return type directly, keeping the existing parameter types and null fallback
behavior unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c2517bf3-03fb-45f7-9a55-f4ece2ab38d1
📒 Files selected for processing (2)
app/lib/hooks/useCustomEmoji.test.tsapp/lib/hooks/useCustomEmoji.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- app/lib/hooks/useCustomEmoji.test.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: ESLint and Test / run-eslint-and-test
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/hooks/useCustomEmoji.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{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 numbersUse TypeScript with strict mode enabled
Files:
app/lib/hooks/useCustomEmoji.ts
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses
Files:
app/lib/hooks/useCustomEmoji.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Enforce ESLint rules from
@rocket.chat/eslint-configwith React, React Native, TypeScript, and Jest plugins
Files:
app/lib/hooks/useCustomEmoji.ts
🧠 Learnings (1)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.
Applied to files:
app/lib/hooks/useCustomEmoji.ts
🔇 Additional comments (1)
app/lib/hooks/useCustomEmoji.ts (1)
1-5: LGTM!
… via useCustomEmoji
diegolmello
had a problem deploying
to
approve_e2e_testing
GitHub Actions
Error
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/containers/ReactionsList/ReactionsList.test.tsx (1)
92-112: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winSeed a custom emoji in this test
customEmojisis always empty here, soEmojifalls back to the shortcode text and this case never exercises the custom-render path. Dispatch a custom emoji into the test store first, then assert the custom emoji branch.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/containers/ReactionsList/ReactionsList.test.tsx` around lines 92 - 112, The test setup for ReactionsList is leaving customEmojis empty, so the Emoji component never reaches the custom-render path. Update the ReactionsList.test.tsx store setup by seeding a custom emoji entry into the mockStore state before rendering, then adjust the assertion to verify the custom emoji branch instead of the shortcode fallback; use the existing mockStore, customEmojis, and Emoji render path in ReactionsList to locate the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/containers/ReactionsList/ReactionsList.test.tsx`:
- Around line 92-112: The test setup for ReactionsList is leaving customEmojis
empty, so the Emoji component never reaches the custom-render path. Update the
ReactionsList.test.tsx store setup by seeding a custom emoji entry into the
mockStore state before rendering, then adjust the assertion to verify the custom
emoji branch instead of the shortcode fallback; use the existing mockStore,
customEmojis, and Emoji render path in ReactionsList to locate the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 13004ab2-78e3-4de0-94bc-f9c17e3fd051
📒 Files selected for processing (15)
app/containers/ReactionsList/AllTab.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/Emoji.tsxapp/containers/message/Message.stories.tsxapp/containers/message/Preview.tsxapp/containers/message/Reactions.test.tsxapp/containers/message/Reactions.tsxapp/containers/message/index.tsxapp/containers/message/interfaces.tsapp/views/MessagesView/index.tsxapp/views/RoomView/definitions.tsapp/views/RoomView/index.tsxapp/views/SearchMessagesView/index.tsx
💤 Files with no reviewable changes (2)
- app/containers/message/Message.stories.tsx
- app/views/RoomView/definitions.ts
📜 Review details
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsxapp/containers/message/interfaces.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{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 numbersUse TypeScript with strict mode enabled
Files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsxapp/containers/message/interfaces.ts
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses
Files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsxapp/containers/message/interfaces.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Enforce ESLint rules from
@rocket.chat/eslint-configwith React, React Native, TypeScript, and Jest plugins
Files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsxapp/containers/message/interfaces.ts
app/containers/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Place reusable UI components in 'app/containers/' directory
Files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/containers/message/interfaces.ts
app/views/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Place screen components in 'app/views/' directory
Files:
app/views/RoomView/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsx
🧠 Learnings (5)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.
Applied to files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsxapp/containers/message/interfaces.ts
📚 Learning: 2026-06-25T18:37:44.793Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.tsx:101-141
Timestamp: 2026-06-25T18:37:44.793Z
Learning: In the Rocket.Chat React Native codebase, do not treat passing an `async` function directly to an event prop in React/React Native UI components (e.g., `onPress={async () => ...}` in TSX) as a “floating promises” CI-blocking lint issue—this repo does not enable the ESLint `no-floating-promises` rule (while `no-void` is enforced). Only raise robustness follow-ups when there are genuinely unhandled promise paths (e.g., fire-and-forget calls like `save()` that return a Promise that is neither awaited nor handled), and prefer making sure failure paths are explicitly handled/reported rather than blocking on lint-style floating-promise concerns.
Applied to files:
app/containers/message/Preview.tsxapp/containers/message/Emoji.tsxapp/containers/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.stories.tsxapp/containers/ReactionsList/ReactionsList.test.tsxapp/containers/ReactionsList/AllTab.tsxapp/views/RoomView/index.tsxapp/containers/message/Reactions.tsxapp/containers/ReactionsList/index.tsxapp/containers/message/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsx
📚 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/message/Reactions.test.tsxapp/containers/ReactionsList/ReactionsList.test.tsx
📚 Learning: 2026-03-15T13:55:42.038Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6911
File: app/containers/markdown/Markdown.stories.tsx:104-104
Timestamp: 2026-03-15T13:55:42.038Z
Learning: In Rocket.Chat React Native, the markdown parser requires a space between the underscore wrapping italic text and a mention sigil (_ mention _ instead of _mention_). Ensure stories and tests that include italic-wrapped mentions follow this form to guarantee proper parsing. Specifically, for files like app/containers/markdown/Markdown.stories.tsx, and any test/content strings that exercise italic-mentions, use the pattern _ mention _ (with spaces) to prevent the mention from being treated as plain text. Validate any test strings or story content accordingly.
Applied to files:
app/containers/ReactionsList/ReactionsList.stories.tsx
📚 Learning: 2026-06-24T22:58:43.390Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7157
File: app/views/MessagesView/index.tsx:392-392
Timestamp: 2026-06-24T22:58:43.390Z
Learning: When wrapping a React Native component (e.g., via `withSafeAreaInsets`) ensure `hoistNonReactStatics` is only required if the wrapped component actually defines static properties/methods that consumers rely on. If the component has no statics (as in `app/views/MessagesView/index.tsx`), you can omit `hoistNonReactStatics` for this case.
Applied to files:
app/views/RoomView/index.tsxapp/views/SearchMessagesView/index.tsxapp/views/MessagesView/index.tsx
🔇 Additional comments (14)
app/containers/message/interfaces.ts (2)
107-119: 🎯 Functional CorrectnessAddresses past "Do we need this?" question — yes, it's needed.
reactionsis required here becauseMessage.tsxspreads the full props object into<Reactions {...props} />, andIMessageReactions(inReactions.tsx) expectsreactions?: IReaction[]. Without this field onIMessageInner, that prop wouldn't type-check through the spread.
6-8: LGTM!Also applies to: 18-23, 25-32, 50-73, 75-79
app/containers/ReactionsList/AllTab.tsx (1)
11-17: LGTM!Also applies to: 19-57, 59-68
app/containers/ReactionsList/ReactionsList.stories.tsx (1)
6-14: LGTM!Also applies to: 49-56, 58-65
app/containers/ReactionsList/ReactionsList.test.tsx (1)
137-143: LGTM!app/containers/ReactionsList/index.tsx (1)
11-13: LGTM!Also applies to: 51-88
app/containers/message/Emoji.tsx (1)
5-13: LGTM!app/containers/message/Reactions.test.tsx (1)
25-44: LGTM!app/containers/message/index.tsx (1)
10-10: LGTM!Also applies to: 16-65, 72-79, 353-380, 426-509
app/containers/message/Preview.tsx (1)
4-26: LGTM!app/containers/message/Reactions.tsx (1)
20-27: LGTM!Also applies to: 52-99
app/views/MessagesView/index.tsx (1)
31-31: LGTM!Also applies to: 162-179, 262-300, 372-376
app/views/RoomView/index.tsx (1)
931-939: LGTM!Also applies to: 1466-1510, 1727-1745
app/views/SearchMessagesView/index.tsx (1)
39-39: LGTM!Also applies to: 74-79, 208-211, 275-294, 341-346
diegolmello
temporarily deployed
to
approve_e2e_testing
GitHub Actions
Inactive
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/containers/ReactionsList/ReactionsList.test.tsx (1)
258-263: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winScope the ExpoImage assertion to the custom-emoji element, not the whole tree.
screen.UNSAFE_getAllByType(ExpoImage).length).toBeGreaterThan(0)checks for anyExpoImageanywhere in the rendered output. IfReactionsList/reactor avatars also render viaExpoImage, this assertion passes regardless of whether the custom emoji itself resolved and rendered correctly, weakening the regression coverage this test is meant to add foruseCustomEmoji.Consider scoping the query to the custom-emoji tab element (e.g.,
within(screen.getByTestId('tab-:custom_emoji:')).UNSAFE_getAllByType(ExpoImage)) so the assertion specifically validates the emoji resolution path.✅ Proposed fix to scope the assertion
- // Resolves against the store and renders as a custom emoji image, not the shortname text - expect(screen.UNSAFE_getAllByType(ExpoImage).length).toBeGreaterThan(0); - expect(screen.queryByText(':custom_emoji:')).toBeNull(); + // Resolves against the store and renders as a custom emoji image, not the shortname text + const emojiTab = screen.getByTestId('tab-:custom_emoji:'); + expect(within(emojiTab).UNSAFE_getAllByType(ExpoImage).length).toBeGreaterThan(0); + expect(within(emojiTab).queryByText(':custom_emoji:')).toBeNull();🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/containers/ReactionsList/ReactionsList.test.tsx` around lines 258 - 263, The test in ReactionsList.test.tsx is too broad because the ExpoImage assertion matches any image in the whole tree instead of verifying the custom emoji rendering path. Update the assertion to target the custom-emoji tab element created in ReactionsList and scope the ExpoImage lookup with within(...) so it only checks the node for :custom_emoji:. Keep the existing shortname text check, but make the image assertion specific to the custom emoji resolved by useCustomEmoji.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/containers/ReactionsList/ReactionsList.test.tsx`:
- Around line 258-263: The test in ReactionsList.test.tsx is too broad because
the ExpoImage assertion matches any image in the whole tree instead of verifying
the custom emoji rendering path. Update the assertion to target the custom-emoji
tab element created in ReactionsList and scope the ExpoImage lookup with
within(...) so it only checks the node for :custom_emoji:. Keep the existing
shortname text check, but make the image assertion specific to the custom emoji
resolved by useCustomEmoji.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d90e4122-4e2d-4e27-b6d0-7152112ec82a
📒 Files selected for processing (1)
app/containers/ReactionsList/ReactionsList.test.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: ESLint and Test / run-eslint-and-test
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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/containers/ReactionsList/ReactionsList.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{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 numbersUse TypeScript with strict mode enabled
Files:
app/containers/ReactionsList/ReactionsList.test.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses
Files:
app/containers/ReactionsList/ReactionsList.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Enforce ESLint rules from
@rocket.chat/eslint-configwith React, React Native, TypeScript, and Jest plugins
Files:
app/containers/ReactionsList/ReactionsList.test.tsx
app/containers/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Place reusable UI components in 'app/containers/' directory
Files:
app/containers/ReactionsList/ReactionsList.test.tsx
🧠 Learnings (3)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.
Applied to files:
app/containers/ReactionsList/ReactionsList.test.tsx
📚 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/ReactionsList/ReactionsList.test.tsx
📚 Learning: 2026-06-25T18:37:44.793Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.tsx:101-141
Timestamp: 2026-06-25T18:37:44.793Z
Learning: In the Rocket.Chat React Native codebase, do not treat passing an `async` function directly to an event prop in React/React Native UI components (e.g., `onPress={async () => ...}` in TSX) as a “floating promises” CI-blocking lint issue—this repo does not enable the ESLint `no-floating-promises` rule (while `no-void` is enforced). Only raise robustness follow-ups when there are genuinely unhandled promise paths (e.g., fire-and-forget calls like `save()` that return a Promise that is neither awaited nor handled), and prefer making sure failure paths are explicitly handled/reported rather than blocking on lint-style floating-promise concerns.
Applied to files:
app/containers/ReactionsList/ReactionsList.test.tsx
🔇 Additional comments (1)
app/containers/ReactionsList/ReactionsList.test.tsx (1)
5-5: LGTM!Also applies to: 109-114, 138-144, 185-193, 219-242
diegolmello
requested a deployment
to
android_build
GitHub Actions
Waiting
1 participant
Proposed changes
The markdown component tree now sources custom emoji itself instead of having a
getCustomEmojifunction threaded down through props.useCustomEmojihook (readsstate.customEmojisfrom Redux) and theresolveCustomEmojihelper, alongside a companion test.Emojicomponent callsuseCustomEmoji()directly.getCustomEmojiis removed fromIMarkdownPropsand fromMarkdownContext, andAvatar's manualMarkdownContext.Providerwrapper is deleted.getCustomEmojiprop threading from the Attachments chain (Attachments,Audio,Video,Reply,Quote,CollapsibleQuote,Image,AttachedActions), the Avatar chain, and theMessage->Contentpath.Messagekeeps its owngetCustomEmojiprop for the non-markdown consumers (Reactions, messageEmoji,ReactionsList).Issue(s)
https://rocketchat.atlassian.net/browse/NATIVE-1402
How to test or reproduce
Open a room whose messages contain custom emoji, in message bodies, replies, quotes, attachment fields, and avatars. Custom emoji render exactly as before. Behavior is preserved end to end.
Screenshots
No visual changes.
Types of changes
Checklist
Further comments
The change is behavior-preserving:
tsc --noEmit, scoped ESLint, and Prettier are clean, and the touched suites pass with zero snapshot changes. Stories and tests seed the store viasetCustomEmojisinstead of building a fakegetCustomEmojifixture.Summary by CodeRabbit