refactor: extract RoomFooter and RoomMessageActions components from RoomView

[diegolmello]

Proposed changes

Extracts the two remaining inline JSX blocks of RoomView — the footer (renderFooter) and the message-action sheets (renderActions) — into dedicated, compiled child components:

• components/RoomFooter.tsx — selects room, joined, loading, joinRoom, resumeRoom from the room store and renders every footer variant (composer, join/take-it CTA, resume when on-hold, read-only, blocked, federation notice, air-gapped restriction). Only instance-specific values remain props (composer ref, insets padding, federation flags, readOnly).
• components/RoomMessageActions.tsx — selects room from the store, guards until the room is loaded, and renders MessageActions + MessageErrorActions, receiving the action-sheet refs and action-init handlers as props.

RoomView drops both render functions, the getFederatedFooterDescription helper, and the now-unused imports, rendering the two components in their place. Each component re-renders only when its selected store slice changes instead of being rebuilt on every RoomView render.

Behavior is unchanged — all footer branches and action sheets render and act exactly as before.

Issue(s)

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

How to test or reproduce

Open a room and confirm the footer renders correctly across states: normal composer, preview/join CTA, livechat "take it", on-hold resume, read-only room, blocked DM, federated-room notice, and an air-gapped read-only workspace. Confirm long-pressing a message opens the action sheet and each action (edit/reply/quote/react/etc.) works, and that failed-message error actions still open.

Screenshots

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

Targets native-34-roomview-hooks (PR #7482), not develop — this is one step of the RoomView class→hooks decomposition and stacks on that branch. Both components are compiled via the 'use memo' directive (annotation mode). readOnly is deliberately kept as a prop rather than moved into the store to keep the change behavior-neutral.

Summary by CodeRabbit

• New Features
  • Added room footer messaging and actions for joining, resuming, read-only, blocked, air-gapped, and federated rooms.
  • Added message actions for editing, replying, quoting, reacting, and handling message errors.
• Refactor
  • Streamlined the room view by separating footer and message-action behavior into dedicated components.

[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: 7bdece58-a949-4d16-9465-231f00d12e5b

📥 Commits

Reviewing files that changed from the base of the PR and between d32fd36 and 41077ee.

📒 Files selected for processing (4)

• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/index.ts
• app/views/RoomView/index.tsx

📜 Recent review details

🧰 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/views/RoomView/components/index.ts
• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.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

**/*.{ts,tsx}: Use TypeScript in strict mode, with imports resolved from the app/ baseUrl
Follow the repository's TypeScript/React Native code style enforced by Prettier: tabs, single quotes, 130-character width, no trailing commas, omit arrow-function parens when possible, and keep brackets on the same line

Files:

• app/views/RoomView/components/index.ts
• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Use the project's ESLint setup (@rocket.chat/eslint-config with React, React Native, TypeScript, and Jest plugins) for code quality and style compliance

Files:

• app/views/RoomView/components/index.ts
• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.tsx

app/views/**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Place screen components under app/views/

Files:

• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.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/views/RoomView/components/index.ts
• app/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.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/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.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/views/RoomView/components/RoomMessageActions.tsx
• app/views/RoomView/components/RoomFooter.tsx
• app/views/RoomView/index.tsx

🔇 Additional comments (7)

app/views/RoomView/components/RoomFooter.tsx (2)

44-55: LGTM!

Also applies to: 57-131

---

39-40: 🎯 Functional Correctness

No issue here useRoomLifecycle already stores both callbacks on roomStore, so the footer selectors are defined and the join/resume buttons still work.

			> Likely an incorrect or invalid review comment.

app/views/RoomView/components/RoomMessageActions.tsx (2)

1-17: LGTM!

Also applies to: 19-38, 56-64

---

41-55: 🎯 Functional Correctness

isMasterDetail is injected by the wrapped MessageActions component RoomMessageActions does not need to pass it; MessageActions receives it via withMasterDetail(...) and connect(...).

			> Likely an incorrect or invalid review comment.

app/views/RoomView/components/index.ts (1)

4-5: LGTM!

app/views/RoomView/index.tsx (2)

629-650: LGTM!

---

269-269: 🎯 Functional Correctness

joinRoom/resumeRoom are already written to roomStore, so RoomFooter can read them from the store.

			> Likely an incorrect or invalid review comment.

---

Walkthrough

RoomView footer and message-action rendering are extracted into dedicated components. The new components preserve room-state conditions, composer rendering, message actions, error actions, refs, and existing RoomView wiring.

Changes

RoomView component extraction

Layer / File(s)	Summary
Room footer states app/views/RoomView/components/RoomFooter.tsx	Adds RoomFooter with conditional rendering for missing rooms, held rooms, previews, read-only states, blocked rooms, federated rooms, and the message composer fallback.
Message action component app/views/RoomView/components/RoomMessageActions.tsx	Adds RoomMessageActions to render message and error actions while forwarding action refs and handlers.
RoomView integration app/views/RoomView/components/index.ts, app/views/RoomView/index.tsx	Exports the new components, removes duplicated local rendering helpers, and wires the extracted components into the existing RoomView JSX.
Estimated code review effort: 3 (Moderate)	~20 minutes

Possibly related PRs

• RocketChat/Rocket.Chat.ReactNative#7157: Both changes update RoomView footer rendering and bottom-padding behavior.

Suggested labels: type: chore

Suggested reviewers: Rohit3523

🚥 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 clearly describes the main change: extracting RoomFooter and RoomMessageActions from RoomView.
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.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)

• NATIVE-34: Request failed with status code 401
• TICKET-014: 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.}