fix(voip): gate MediaCallHeader to authenticated inside root only by diegolmello · Pull Request #7286 · RocketChat/Rocket.Chat.ReactNative

diegolmello · 2026-04-30T18:27:56Z

Proposed changes

MediaCallHeader was mounted unconditionally at the application root, alongside the NavigationContainer. Because its no-active-call branch returned a styled empty View (height equal to the safe-area top inset, coloured surfaceNeutral) instead of null, the header occupied vertical space on every screen — including the login screen, share extension, and loading splash — producing a visible coloured strip above each of those screens' content.

Issue(s)

Part of the PR #6918 fix set — module 4, blocker B8.

How to test or reproduce

Launch the app to the login screen — no coloured strip above the login form.
Open the share extension — no coloured strip above the share-target picker.
Sign in — InsideStack screens render with their normal status-bar appearance (no regression).
Place a VoIP call — the call header appears above the room view.
Hang up — the header disappears.

Screenshots

N/A — visual regression fix; before/after comparison via manual testing on device.

Types of changes

Bugfix (non-breaking change which fixes an issue)

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

Three changes in this slice:

Root gating (app/AppContainer.tsx): <MediaCallHeader /> is now wrapped in {root === RootEnum.ROOT_INSIDE ? <MediaCallHeader /> : null} so it only mounts for the authenticated inside root.
No-call branch returns null (app/containers/MediaCallHeader/MediaCallHeader.tsx): The empty <View> placeholder is replaced with null. The View import is also removed.
Dead prop removed (app/containers/Header/index.tsx, app/containers/Header/components/HeaderContainer/index.tsx): addExtraNotchPadding was declared in the IHeaderContainer interface but never consumed in the component body; it is now removed from both the interface and the call site.

A new app/AppContainer.test.tsx asserts that MediaCallHeader is present in the inside tree and absent for all other roots (loading, outside, set-username, share extension, loading-share-extension).

Summary by CodeRabbit

Release Notes

Bug Fixes
- Media Call Header now conditionally renders based on current application state rather than always displaying
- Media Call Header no longer shows placeholder content when inactive
- Removed unnecessary layout padding in specific application states
Tests
- Added comprehensive test coverage for Media Call Header rendering behavior

Mount MediaCallHeader exclusively when the app root is ROOT_INSIDE, preventing a coloured safe-area strip from appearing on login, share extension, and loading screens. Also removes the empty-View no-call fallback (returns null instead) and cleans up the dead addExtraNotchPadding prop from the Header chain.

coderabbitai · 2026-04-30T18:28:11Z

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: 8fe929dc-fd16-4e00-867e-fd0d84960e4a

📥 Commits

Reviewing files that changed from the base of the PR and between 7ea0877 and 2fdb999.

⛔ Files ignored due to path filters (1)

app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (6)

app/AppContainer.test.tsx
app/AppContainer.tsx
app/containers/Header/components/HeaderContainer/index.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

💤 Files with no reviewable changes (1)

app/containers/Header/components/HeaderContainer/index.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/AppContainer.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.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 with strict mode enabled and baseUrl set to app/ for module imports
Support iOS 13.4+ and Android 6.0+ as minimum target platforms

Files:

app/AppContainer.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use tabs for indentation with single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses when possible
Use ESLint with @rocket.chat/eslint-config base including React, React Native, TypeScript, and Jest plugins

Files:

app/AppContainer.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

app/AppContainer.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Use AppContainer.tsx as the root navigation container that switches between authentication states

Files:

app/AppContainer.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Create reusable UI components in app/containers/ directory

Files:

app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

🧠 Learnings (12)

📓 Common learnings

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/lib/services/voip/**/*.{ts,tsx} : Implement VoIP features in app/lib/services/voip/ directory using Zustand stores for WebRTC peer-to-peer audio calls with native CallKit (iOS) and Telecom (Android) integration

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/AppContainer.tsx : Use AppContainer.tsx as the root navigation container that switches between authentication states

Applied to files:

app/AppContainer.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/containers/**/*.{ts,tsx} : Create reusable UI components in app/containers/ directory

Applied to files:

app/AppContainer.tsx
app/AppContainer.test.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/index.tsx : Set up Redux provider, theme, navigation, and notifications in app/index.tsx

Applied to files:

app/AppContainer.tsx
app/AppContainer.test.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

📚 Learning: 2026-03-10T15:21:45.098Z

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7046
File: app/containers/InAppNotification/NotifierComponent.stories.tsx:46-75
Timestamp: 2026-03-10T15:21:45.098Z
Learning: In `app/containers/InAppNotification/NotifierComponent.tsx` (React Native, Rocket.Chat), `NotifierComponent` is exported as a Redux-connected component via `connect(mapStateToProps)`. The `isMasterDetail` prop is automatically injected from `state.app.isMasterDetail` and does not need to be passed explicitly at call sites or in Storybook stories that use the default (connected) export.

Applied to files:

app/AppContainer.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/lib/services/voip/**/*.{ts,tsx} : Implement VoIP features in app/lib/services/voip/ directory using Zustand stores for WebRTC peer-to-peer audio calls with native CallKit (iOS) and Telecom (Android) integration

Applied to files:

app/AppContainer.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

📚 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/AppContainer.tsx
app/containers/MediaCallHeader/MediaCallHeader.test.tsx
app/AppContainer.test.tsx
app/containers/Header/index.tsx
app/containers/MediaCallHeader/MediaCallHeader.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/lib/store/**/*.{ts,tsx} : Configure Redux middleware (saga, app state, internet state) in app/lib/store/ directory

Applied to files:

app/AppContainer.test.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/sagas/**/*.{ts,tsx} : Implement side effects and Redux-Saga middleware in app/sagas/ directory

Applied to files:

app/AppContainer.test.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to {app/sagas/videoConf.ts,app/lib/methods/videoConf.ts} : Implement video conferencing in app/sagas/videoConf.ts and app/lib/methods/videoConf.ts using Redux actions, reducers, and sagas for server-managed Jitsi integration

Applied to files:

app/AppContainer.test.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/lib/hooks/useResponsiveLayout/**/*.{ts,tsx} : Implement responsive layouts using useResponsiveLayout hook to switch between master-detail on tablets and single stack on phones

Applied to files:

app/containers/Header/index.tsx

📚 Learning: 2026-04-22T22:57:58.545Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Use React 19 with React Native 0.79 and Expo 53

Applied to files:

app/containers/MediaCallHeader/MediaCallHeader.tsx

🔇 Additional comments (5)

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

48-48: Dead prop cleanup is correctly reflected at the HeaderContainer call site.

This update keeps the container invocation minimal and aligned with the interface cleanup.

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

53-55: No-call branch now cleanly avoids rendering layout artifacts.

Returning null here is consistent with the intended behavior change and removes the empty placeholder path.

app/AppContainer.tsx (1)

56-56: Root-based MediaCallHeader gating is implemented correctly.

Mounting the header only for RootEnum.ROOT_INSIDE matches the auth-boundary intent.

app/containers/MediaCallHeader/MediaCallHeader.test.tsx (1)

82-105: No-call and pre-bind test expectations are correctly updated.

Using queryByTestId with absence checks now accurately validates the null render path.

app/AppContainer.test.tsx (1)

78-113: Gating test matrix is solid and aligned with the behavior change.

The suite validates both positive (ROOT_INSIDE) and negative root states, giving good regression coverage for header mounting.

Walkthrough

The changes modify conditional rendering of MediaCallHeader based on root state and simplify header layout logic by removing notch padding calculations. MediaCallHeader now returns null instead of rendering a placeholder when no call exists, and the header container no longer receives the addExtraNotchPadding prop.

Changes

Cohort / File(s)	Summary
AppContainer `app/AppContainer.test.tsx`, `app/AppContainer.tsx`	Added test coverage for conditional `MediaCallHeader` rendering based on `RootEnum` values. Modified `AppContainer` to mount `MediaCallHeader` only for `RootEnum.ROOT_INSIDE`.
Header Components `app/containers/Header/components/HeaderContainer/index.tsx`, `app/containers/Header/index.tsx`	Removed `addExtraNotchPadding` prop from `IHeaderContainer` interface and eliminated `isRoomViewMasterDetail` computation logic; simplified `HeaderContainer` JSX to pass only essential props.
MediaCallHeader `app/containers/MediaCallHeader/MediaCallHeader.tsx`, `app/containers/MediaCallHeader/MediaCallHeader.test.tsx`	Modified component to return `null` instead of rendering empty placeholder when call is falsy. Updated test expectations to assert absence of header elements in empty state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 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 change: gating MediaCallHeader to render only when authenticated inside the root, which is the primary objective across all 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.}

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

_{Review rate limit: 2/8 reviews remaining, refill in 40 minutes and 52 seconds.}

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

diegolmello · 2026-04-30T20:15:58Z

 	return (
 		<>
-			<MediaCallHeader />
+			{root === RootEnum.ROOT_INSIDE ? <MediaCallHeader /> : null}


Header gets rendered behind status bar.

diegolmello had a problem deploying to approve_e2e_testing April 30, 2026 18:28 — with GitHub Actions Failure

coderabbitai Bot added the type: bug label Apr 30, 2026

diegolmello had a problem deploying to official_ios_build April 30, 2026 18:31 — with GitHub Actions Failure

diegolmello requested a deployment to experimental_ios_build April 30, 2026 18:31 — with GitHub Actions Waiting

diegolmello had a problem deploying to experimental_android_build April 30, 2026 18:31 — with GitHub Actions Failure

diegolmello had a problem deploying to official_android_build April 30, 2026 18:31 — with GitHub Actions Failure

diegolmello commented Apr 30, 2026

View reviewed changes

diegolmello closed this Apr 30, 2026

diegolmello deleted the fix/voip-pr6918-06-app-shell-call-header-gating branch April 30, 2026 20:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(voip): gate MediaCallHeader to authenticated inside root only#7286

fix(voip): gate MediaCallHeader to authenticated inside root only#7286
diegolmello wants to merge 1 commit into
feat.voip-lib-newfrom
fix/voip-pr6918-06-app-shell-call-header-gating

diegolmello commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

diegolmello Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

diegolmello commented Apr 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Uh oh!

diegolmello Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

diegolmello commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading