fix: render list separators consistently by snapping row heights to the pixel grid by diegolmello · Pull Request #7449 · RocketChat/Rocket.Chat.ReactNative

diegolmello · 2026-06-26T19:19:56Z

Proposed changes

Some lists intermittently failed to render the 1px row separator, and others rendered it with non-uniform thickness. Reported on RoomsListView and the MessageActions action sheet, but the defect affected most shared list-row components.

Root cause: when a row's rendered height in DP does not land on the device physical-pixel grid, the hairline separator anti-aliases below visibility on some rows and across multiple physical pixels on others. As cumulative row offsets drift fractionally, each successive separator lands at a different sub-pixel phase, so some vanish and some thicken.

Fix: snap each row container height to the pixel grid with PixelRatio.roundToNearestPixel(height * fontScale), so every separator sits at an integer physical-pixel offset and renders as a crisp, uniform hairline. The snap is a no-op where the height was already integer-px and corrective otherwise, so it is always safe. Applied to every shared list-row component:

RoomItem and RoomsListView, via the useResponsiveLayout row-height single source of truth
ActionSheet Item, via a new useActionSheetItemHeight hook (covers MessageActions)
List.Item, DirectoryItem, UserItem, ServerItem, ServersHistoryItem, DepartmentItemFilter

Also fixes a secondary defect: incorrect getItemLayout scroll-math in SelectServerView, QueueListView, TeamChannelsView and ShareListView. Two of them used the array length as the per-row pixel height, and offsets ignored both pixel-snapping and the condensed display mode. These screens do not call scrollToIndex, so the prior impact was mis-sized scroll indicators rather than broken scrolling.

Issue(s)

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

How to test or reproduce

On a device whose pixel density produces fractional physical-pixel row heights (for example a 2.625x Android device), open lists such as RoomsListView, the MessageActions action sheet, the server list, and Admin/settings lists. Before the fix, separators are missing on some rows and uneven on others. After the fix, every separator renders as a uniform hairline. Verified on-device by measuring a flat separator pitch (RoomsListView 217px, ActionSheet 140px).

Screenshots

Before	After

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

The snap uses PixelRatio.get() (device density, constant per device) for grid alignment and multiplies by fontScale so rows still grow with the user's font-size setting. Unit suite is green (1770/1770) with no snapshot regressions beyond the two row components whose explicit height legitimately changed.

https://claude.ai/code/session_01CrrW51BkNx2qDu1PZWgK5y

Summary by CodeRabbit

Bug Fixes
- Improved spacing and row/item sizing across lists and pickers by rounding scaled heights to pixel-perfect values for more consistent text scaling.
- Updated ActionSheets and bottom sheet content to use a shared responsive item-height calculation, including detent sizing behavior.
- Refined FlatList scrolling and virtualization by adjusting getItemLayout to use pixel-rounded, display-mode-aware row heights.
- Updated relevant row height constants (e.g., ServerItem/ServersHistoryItem) and aligned header layout height/centering.

coderabbitai · 2026-06-26T19:20:24Z

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: 16323b96-dbe5-4093-8f32-b72555fb185b

📥 Commits

Reviewing files that changed from the base of the PR and between 6d8b905 and 463e74e.

⛔ Files ignored due to path filters (2)

app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap is excluded by !**/*.snap
app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (19)

app/containers/ActionSheet/ActionSheet.tsx
app/containers/ActionSheet/BottomSheetContent.tsx
app/containers/ActionSheet/Item.tsx
app/containers/ActionSheet/useActionSheetDetents.ts
app/containers/ActionSheet/useActionSheetItemHeight.ts
app/containers/DirectoryItem/index.tsx
app/containers/List/ListItem.tsx
app/containers/MessageActions/Header.tsx
app/containers/ServerItem/index.tsx
app/containers/ServerItem/styles.ts
app/containers/UserItem.tsx
app/ee/omnichannel/views/QueueListView.tsx
app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
app/views/NewServerView/components/ServersHistoryItem/index.tsx
app/views/NewServerView/components/ServersHistoryItem/styles.ts
app/views/SelectServerView.tsx
app/views/ShareListView/index.tsx
app/views/TeamChannelsView.tsx

✅ Files skipped from review due to trivial changes (2)

app/containers/ActionSheet/useActionSheetItemHeight.ts
app/containers/ServerItem/styles.ts

🚧 Files skipped from review as they are similar to previous changes (17)

app/views/NewServerView/components/ServersHistoryItem/styles.ts
app/containers/ActionSheet/ActionSheet.tsx
app/containers/List/ListItem.tsx
app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
app/containers/ServerItem/index.tsx
app/views/ShareListView/index.tsx
app/containers/DirectoryItem/index.tsx
app/containers/MessageActions/Header.tsx
app/containers/ActionSheet/BottomSheetContent.tsx
app/containers/ActionSheet/useActionSheetDetents.ts
app/views/TeamChannelsView.tsx
app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
app/containers/UserItem.tsx
app/containers/ActionSheet/Item.tsx
app/ee/omnichannel/views/QueueListView.tsx
app/views/SelectServerView.tsx
app/views/NewServerView/components/ServersHistoryItem/index.tsx

Walkthrough

ActionSheet sizing now uses a shared item-height hook. Several item rows and list views now compute heights from font scale with pixel rounding, FlatList getItemLayout calculations were updated to use responsive values, and the MessageActions header now sets an explicit container height.

Changes

ActionSheet item height sharing

Layer / File(s)	Summary
Shared item height hook `app/containers/ActionSheet/useActionSheetItemHeight.ts`	A new hook exports the base ActionSheet item height and rounds it with the current font scale.
ActionSheet consumers `app/containers/ActionSheet/*`	ActionSheet, BottomSheetContent, Item, and useActionSheetDetents now read height from the shared hook.

Responsive row height rounding

Layer / File(s)	Summary
Rounded responsive layout values `app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx`	The shared responsive layout hook rounds base row heights before exposing them.
Item and container heights `app/containers/DirectoryItem/index.tsx`, `app/containers/List/ListItem.tsx`, `app/containers/ServerItem/`, `app/containers/UserItem.tsx`, `app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx`, `app/views/NewServerView/components/ServersHistoryItem/`	DirectoryItem, ListItem, ServerItem, UserItem, DepartmentItemFilter, and ServersHistoryItem now apply rounded font-scale-based heights, with updated row-height constants where shown.
FlatList item layouts `app/ee/omnichannel/views/QueueListView.tsx`, `app/views/SelectServerView.tsx`, `app/views/ShareListView/index.tsx`, `app/views/TeamChannelsView.tsx`	QueueListView, SelectServerView, ShareListView, and TeamChannelsView recalculate `getItemLayout` using rounded responsive heights and display-mode-aware row sizes.
MessageActions header layout `app/containers/MessageActions/Header.tsx`	Header container styling now sets an explicit height and vertical centering.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Possibly related PRs

RocketChat/Rocket.Chat.ReactNative#7326: Also changes app/containers/ActionSheet sizing and useActionSheetDetents, which is the same sizing path touched here.

Suggested labels: type: bug

Suggested reviewers: OtavioStasiak

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 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: pixel-snapping shared row heights to make separators render consistently.
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 (1)

NATIVE-1344: 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

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

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (2)

app/containers/ActionSheet/useActionSheetItemHeight.ts (1)
5-8: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Add an explicit return type to the hook.

As per coding guidelines: "add explicit type annotations to function parameters and return types."
♻️ Proposed change
-export const useActionSheetItemHeight = () => {
+export const useActionSheetItemHeight = (): number => {
 	const { fontScale } = useWindowDimensions();
 	return PixelRatio.roundToNearestPixel(ACTION_SHEET_ITEM_HEIGHT * fontScale);
 };
🤖 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/ActionSheet/useActionSheetItemHeight.ts` around lines 5 - 8,
The useActionSheetItemHeight hook is missing an explicit return type annotation.
Update useActionSheetItemHeight to declare its return type directly on the
function signature, keeping the existing fontScale and
PixelRatio.roundToNearestPixel logic unchanged, so it conforms to the project’s
type annotation guidelines.
Source: Coding guidelines
app/containers/ActionSheet/useActionSheetDetents.ts (1)
51-51: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

CANCEL_HEIGHT duplicates the already-supplied itemHeight.

itemHeight is passed in from ActionSheet.tsx where it is also useActionSheetItemHeight(), so CANCEL_HEIGHT is always identical to itemHeight. The extra hook call and its dependency-array entry are redundant; reusing itemHeight would simplify the memo and avoid the two ever drifting apart.
🤖 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/ActionSheet/useActionSheetDetents.ts` at line 51, The
CANCEL_HEIGHT value in useActionSheetDetents is duplicating the already
available itemHeight from ActionSheet.tsx, so remove the extra
useActionSheetItemHeight() call and use itemHeight directly in the detent memo.
Update the useMemo dependency list accordingly so it depends on itemHeight
rather than a separate CANCEL_HEIGHT source, keeping the detents logic in sync.

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

Inline comments:
In `@app/containers/ActionSheet/useActionSheetItemHeight.ts`:
- Around line 5-8: The `useActionSheetItemHeight` hook is reading `fontScale`
directly from `useWindowDimensions`, which diverges from the shared responsive
layout source used by `DirectoryItem`, `UserItem`, and `DepartmentItemFilter`.
Update `useActionSheetItemHeight` to use `useResponsiveLayout` instead, and
derive the item height from its `fontScale` value so all row sizing follows the
same responsive abstraction and stays consistent if the layout provider changes.

In `@app/views/SelectServerView.tsx`:
- Around line 29-35: The `getItemLayout` callback in `SelectServerView` is
calculating offsets using only the row height, but the `FlatList` also renders
`List.Separator` for the header, footer, and between items. Update
`getItemLayout` to include the separator’s vertical height in both the returned
`length`/`offset` math so it stays aligned with the `FlatList` separators and
does not drift during scrolling; use the existing `List.Separator` behavior and
the `getItemLayout` symbol to keep the calculation consistent with `ROW_HEIGHT`
and `fontScale`.

In `@app/views/ShareListView/index.tsx`:
- Around line 66-69: `getItemLayout` in `ShareListView/index.tsx` has two layout
contract mismatches that can cause `FlatList` offsets to drift: it should use
the same font-scale source as `DirectoryItem` (the
`useResponsiveLayout().fontScale` / `useWindowDimensions`-based value) instead
of `PixelRatio.getFontScale()`, and its `offset` calculation must account for
`List.Separator` by including the separator height between rows. Update the
`getItemLayout` helper so the computed length/offset matches the actual rendered
row height plus separator spacing.

---

Nitpick comments:
In `@app/containers/ActionSheet/useActionSheetDetents.ts`:
- Line 51: The CANCEL_HEIGHT value in useActionSheetDetents is duplicating the
already available itemHeight from ActionSheet.tsx, so remove the extra
useActionSheetItemHeight() call and use itemHeight directly in the detent memo.
Update the useMemo dependency list accordingly so it depends on itemHeight
rather than a separate CANCEL_HEIGHT source, keeping the detents logic in sync.

In `@app/containers/ActionSheet/useActionSheetItemHeight.ts`:
- Around line 5-8: The useActionSheetItemHeight hook is missing an explicit
return type annotation. Update useActionSheetItemHeight to declare its return
type directly on the function signature, keeping the existing fontScale and
PixelRatio.roundToNearestPixel logic unchanged, so it conforms to the project’s
type annotation guidelines.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3586431a-6839-4d58-8806-e59c3ccbe5f6

📥 Commits

Reviewing files that changed from the base of the PR and between a8c4899 and f083c42.

⛔ Files ignored due to path filters (2)

app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap is excluded by !**/*.snap
app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (18)

app/containers/ActionSheet/ActionSheet.tsx
app/containers/ActionSheet/BottomSheetContent.tsx
app/containers/ActionSheet/Item.tsx
app/containers/ActionSheet/useActionSheetDetents.ts
app/containers/ActionSheet/useActionSheetItemHeight.ts
app/containers/DirectoryItem/index.tsx
app/containers/List/ListItem.tsx
app/containers/ServerItem/index.tsx
app/containers/ServerItem/styles.ts
app/containers/UserItem.tsx
app/ee/omnichannel/views/QueueListView.tsx
app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
app/views/NewServerView/components/ServersHistoryItem/index.tsx
app/views/NewServerView/components/ServersHistoryItem/styles.ts
app/views/SelectServerView.tsx
app/views/ShareListView/index.tsx
app/views/TeamChannelsView.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 (8)

**/*.{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/NewServerView/components/ServersHistoryItem/styles.ts
app/containers/ServerItem/styles.ts
app/containers/DirectoryItem/index.tsx
app/containers/ActionSheet/useActionSheetItemHeight.ts
app/containers/ActionSheet/ActionSheet.tsx
app/containers/ActionSheet/BottomSheetContent.tsx
app/containers/ServerItem/index.tsx
app/containers/UserItem.tsx
app/ee/omnichannel/views/QueueListView.tsx
app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
app/views/ShareListView/index.tsx
app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
app/views/NewServerView/components/ServersHistoryItem/index.tsx
app/containers/List/ListItem.tsx
app/views/SelectServerView.tsx
app/containers/ActionSheet/useActionSheetDetents.ts
app/containers/ActionSheet/Item.tsx
app/views/TeamChannelsView.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/views/NewServerView/components/ServersHistoryItem/styles.ts
app/containers/ServerItem/styles.ts
app/containers/DirectoryItem/index.tsx
app/containers/ActionSheet/useActionSheetItemHeight.ts
app/containers/ActionSheet/ActionSheet.tsx
app/containers/ActionSheet/BottomSheetContent.tsx
app/containers/ServerItem/index.tsx
app/containers/UserItem.tsx
app/ee/omnichannel/views/QueueListView.tsx
app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
app/views/ShareListView/index.tsx
app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx
app/views/NewServerView/components/ServersHistoryItem/index.tsx
app/containers/List/ListItem.tsx
app/views/SelectServerView.tsx
app/containers/ActionSheet/useActionSheetDetents.ts
app/containers/ActionSheet/Item.tsx
app/views/TeamChannelsView.tsx

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