MessageComposer: mount the emoji searchbar only when it's visible

[diegolmello]

Proposed changes

EmojiSearchbar was always mounted inside the message composer and hid itself with an internal early return null. So on every room open it mounted, ran its hooks, and triggered a frequently-used-emoji database read — despite being hidden until the user opens emoji search.

This gates the mount on showEmojiSearchbar, threads the flag from MessageComposer through MessageComposerContent, and removes the now-dead internal null guard. The searchbar now mounts only when it becomes visible, avoiding a render and an async DB read on every room open.

Issue(s)

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

How to test or reproduce

1. Open a room: the emoji searchbar is not present (no visible behavior change).
2. Tap the emoji button → "search" to open the emoji searchbar: it appears, shows frequently-used emoji, search works, and the back chevron closes it.
3. Pick an emoji from the searchbar: it inserts as before and the "frequently used" list updates.

Screenshots

N/A — no visual change.

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

Summary by CodeRabbit

• Refactor
  • Improved emoji searchbar visibility control by refactoring how it's managed within the message composer component hierarchy. The emoji searchbar rendering behavior is now coordinated at a higher component level for better state management.

[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: 88494946-7c95-44d2-ab59-74a3d632e63c

📥 Commits

Reviewing files that changed from the base of the PR and between 876124f and b001242.

📒 Files selected for processing (3)

• app/containers/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (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/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.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 numbers

Use TypeScript with strict mode enabled

Files:

• app/containers/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.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/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Enforce ESLint rules from @rocket.chat/eslint-config with React, React Native, TypeScript, and Jest plugins

Files:

• app/containers/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.tsx

app/containers/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Place reusable UI components in 'app/containers/' directory

Files:

• app/containers/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.tsx

🧠 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/containers/MessageComposer/MessageComposer.tsx
• app/containers/MessageComposer/components/MessageComposerContent.tsx
• app/containers/MessageComposer/components/EmojiSearchbar.tsx

🔇 Additional comments (3)

app/containers/MessageComposer/components/MessageComposerContent.tsx (1)

20-20: LGTM!

Also applies to: 28-28, 51-51

app/containers/MessageComposer/MessageComposer.tsx (1)

249-249: LGTM!

app/containers/MessageComposer/components/EmojiSearchbar.tsx (1)

21-21: LGTM!

Also applies to: 26-26

---

Walkthrough

The showEmojiSearchbar visibility flag is moved from an internal render guard inside EmojiSearchbar to a prop-driven conditional in MessageComposerContent. MessageComposer now threads the state value down as a prop, and EmojiSearchbar always renders its UI unconditionally.

Changes

EmojiSearchbar Visibility Refactor

Layer / File(s)	Summary
New prop contract, conditional render, and MessageComposer wiring app/containers/MessageComposer/components/MessageComposerContent.tsx, app/containers/MessageComposer/MessageComposer.tsx	MessageComposerContentProps gains showEmojiSearchbar: boolean; MessageComposerContent destructures it and wraps EmojiSearchbar in a conditional; MessageComposer passes the current state value down as that prop.
EmojiSearchbar internal guard removal app/containers/MessageComposer/components/EmojiSearchbar.tsx	EmojiSearchbar no longer reads showEmojiSearchbar from useEmojiKeyboard and removes the early-return null guard, narrowing the return type from ReactElement | null to ReactElement.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: chore

Suggested reviewers

• OtavioStasiak

🚥 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 directly and accurately summarizes the main objective: deferring EmojiSearchbar mounting until it becomes visible, which matches the core change across all three modified files.
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.}

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• NATIVE-1292: Request failed with status code 401

---

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