fix(voip): set explicit snaps for NewMediaCall bottom sheet

[diegolmello]

Summary

• Add portraitSnaps: ['60%'], landscapeSnaps: ['90%'], enableContentPanningGesture: false, and fullContainer: true to both showActionSheetRef call sites for NewMediaCall
• Fixes the bottom sheet rendering at incorrect height, cutting off the "New call" title, helper text, and Call button
• Matches the existing StartACallActionSheet (VideoConf) pattern

Changes

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx — explicit snaps when opening from sidebar/room
• app/views/NewMessageView/Item.tsx — explicit snaps when opening from contact list

Test plan

• Android: Open "New call" from sidebar — title, search, helper text, and Call button all visible
• Android: Select a peer — chip + enabled Call button visible
• Android: Rotate to landscape — sheet expands to ~90%
• iOS: Same checks as above
• Unit tests pass (NewMediaCall|useNewMediaCall|Item — 85 tests, 16 suites)

Summary by CodeRabbit

• Improvements
  • Optimized media call interface display across different screen orientations
  • Enhanced gesture controls for improved interaction with media call dialogs

[coderabbitai]

Walkthrough

Two components are updated to configure the action sheet with portrait/landscape snap points, disabled content panning gesture, and full container mode when displaying new media call interface.

Changes

Cohort / File(s)	Summary
Action Sheet Configuration Updates app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx, app/views/NewMessageView/Item.tsx	Both files now pass additional configuration to showActionSheetRef: portraitSnaps: ['60%'], landscapeSnaps: ['90%'], enableContentPanningGesture: false, and fullContainer: true

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: setting explicit snap points for the NewMediaCall bottom sheet. It is concise, specific, and directly reflects what the changeset accomplishes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx (1)

23-26: Extract snap/config literals into shared typed constants.

Line 23 to Line 26 introduce magic values that are duplicated in another call site. Please move these into a shared typed config (prefer enum/constants) and spread it into showActionSheetRef to prevent drift.

Proposed refactor

+// app/lib/constants/newMediaCallSheet.ts
+export enum NewMediaCallSheetSnap {
+	Portrait = '60%',
+	Landscape = '90%'
+}
+
+export const NEW_MEDIA_CALL_SHEET_OPTIONS = {
+	portraitSnaps: [NewMediaCallSheetSnap.Portrait],
+	landscapeSnaps: [NewMediaCallSheetSnap.Landscape],
+	enableContentPanningGesture: false,
+	fullContainer: true
+} as const;

 import { NewMediaCall } from '../../../containers/NewMediaCall';
 import { showActionSheetRef } from '../../../containers/ActionSheet';
+import { NEW_MEDIA_CALL_SHEET_OPTIONS } from '../../../lib/constants/newMediaCallSheet';
 ...
 		showActionSheetRef({
 			children: <NewMediaCall />,
-			portraitSnaps: ['60%'],
-			landscapeSnaps: ['90%'],
-			enableContentPanningGesture: false,
-			fullContainer: true
+			...NEW_MEDIA_CALL_SHEET_OPTIONS
 		});

As per coding guidelines, "**/*.{ts,tsx}: Use enums for sets of related constants rather than magic strings or numbers".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx` around lines 23 - 26, The
hook currently passes duplicated magic config values (portraitSnaps,
landscapeSnaps, enableContentPanningGesture, fullContainer) directly into
showActionSheetRef; extract these into a shared, typed constant or enum (e.g.,
export const DEFAULT_ACTION_SHEET_CONFIG or an enum for snap presets) and
replace the inline object with a spread of that constant when calling
showActionSheetRef to avoid drift and enforce types across call sites; update
any other call site using the same literals to import and reuse the new
constant/enum and ensure the hook (useNewMediaCall) references the shared symbol
instead of hardcoded values.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx`:
- Around line 23-26: The hook currently passes duplicated magic config values
(portraitSnaps, landscapeSnaps, enableContentPanningGesture, fullContainer)
directly into showActionSheetRef; extract these into a shared, typed constant or
enum (e.g., export const DEFAULT_ACTION_SHEET_CONFIG or an enum for snap
presets) and replace the inline object with a spread of that constant when
calling showActionSheetRef to avoid drift and enforce types across call sites;
update any other call site using the same literals to import and reuse the new
constant/enum and ensure the hook (useNewMediaCall) references the shared symbol
instead of hardcoded values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 47e0b90d-1b15-4161-8609-49df15ff80f9

📥 Commits

Reviewing files that changed from the base of the PR and between db9ea02 and 7e3bb2c.

📒 Files selected for processing (2)

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
• app/views/NewMessageView/Item.tsx

📜 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,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Configure Prettier with tabs, single quotes, 130 character width, no trailing commas, arrow parens avoid, and bracket same line

Files:

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
• app/views/NewMessageView/Item.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Use ESLint with @rocket.chat/eslint-config base configuration including React, React Native, TypeScript, and Jest plugins

Files:

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
• app/views/NewMessageView/Item.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use TypeScript with strict mode enabled and configure baseUrl to app/ for import resolution

**/*.{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

Files:

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
• app/views/NewMessageView/Item.tsx

**/*.{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/useNewMediaCall/useNewMediaCall.tsx
• app/views/NewMessageView/Item.tsx

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

📄 CodeRabbit inference engine (CLAUDE.md)

Place screen components in app/views/ directory

Files:

• app/views/NewMessageView/Item.tsx

🧠 Learnings (3)

📓 Common learnings

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6970
File: .maestro/tests/room/share-message.yaml:77-79
Timestamp: 2026-03-17T19:15:30.463Z
Learning: In `.maestro/tests/room/share-message.yaml` (Rocket.Chat React Native), the `tapOn: point: 5%,10%` step is intentional: it taps the empty area above the bottom sheet and keyboard to dismiss both simultaneously. Using `action-sheet-handle` instead would only close the sheet but not the keyboard. This pattern is acceptable when both need to be dismissed together in a single step.

📚 Learning: 2026-04-07T17:49:17.538Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-07T17:49:17.538Z
Learning: Applies to app/lib/hooks/useResponsiveLayout/**/*.{ts,tsx} : Use responsive layout with master-detail on tablets and single stack on phones via useResponsiveLayout hook

Applied to files:

• app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx

📚 Learning: 2026-03-17T19:15:30.463Z

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6970
File: .maestro/tests/room/share-message.yaml:77-79
Timestamp: 2026-03-17T19:15:30.463Z
Learning: In `.maestro/tests/room/share-message.yaml` (Rocket.Chat React Native), the `tapOn: point: 5%,10%` step is intentional: it taps the empty area above the bottom sheet and keyboard to dismiss both simultaneously. Using `action-sheet-handle` instead would only close the sheet but not the keyboard. This pattern is acceptable when both need to be dismissed together in a single step.

Applied to files:

• app/views/NewMessageView/Item.tsx

🔇 Additional comments (1)

app/views/NewMessageView/Item.tsx (1)

32-37: Good fix for bottom sheet sizing consistency.

Line 32 to Line 37 cleanly applies the same action-sheet behavior used elsewhere and directly addresses the clipped content issue described in the PR.