Skip to content

fix: render list separators consistently by snapping row heights to the pixel grid #7449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 3 commits into from
Jul 1, 2026
Merged

fix: render list separators consistently by snapping row heights to the pixel grid #7449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6933e28
fix: render list separators consistently by snapping row heights to t…
diegolmello Jun 26, 2026
9422916
fix: include separator height in list getItemLayout offsets
diegolmello Jun 26, 2026
463e74e
fix: pin MessageActions reactions header to a stable height
diegolmello Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/containers/ActionSheet/ActionSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ import { Handle } from './Handle';
import { type TActionSheetOptions } from './Provider';
import BottomSheetContent from './BottomSheetContent';
import { HANDLE_HEIGHT, useActionSheetDetents } from './useActionSheetDetents';
import { useActionSheetItemHeight } from './useActionSheetItemHeight';
import styles from './styles';

export const ACTION_SHEET_ANIMATION_DURATION = 250;

const ActionSheet = memo(
forwardRef(({ children }: { children: ReactElement }, ref) => {
const { colors } = useTheme();
const { height: windowHeight, width: windowWidth, fontScale } = useWindowDimensions();
const { height: windowHeight, width: windowWidth } = useWindowDimensions();
const sheetRef = useRef<TrueSheet>(null);
const handleRef = useRef<View>(null);
const [data, setData] = useState<TActionSheetOptions>({} as TActionSheetOptions);
Expand All @@ -38,7 +39,7 @@ const ActionSheet = memo(
// To avoid content hiding behind navigation bar on older Android versions
const isNewAndroid = isAndroid && Number(Platform.Version) >= 36;
const bottom = isIOS || isNewAndroid ? 0 : windowHeight * 0.03;
const itemHeight = 48 * fontScale;
const itemHeight = useActionSheetItemHeight();

const handleContentLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
setContentHeight(layout.height);
Expand Down
6 changes: 3 additions & 3 deletions app/containers/ActionSheet/BottomSheetContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FlatList, Text, useWindowDimensions, View, type ViewProps } from 'react-native';
import { FlatList, Text, View, type ViewProps } from 'react-native';
import { memo, type ReactElement } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

Expand All @@ -10,6 +10,7 @@ import { type TActionSheetOptionsItem } from './Provider';
import styles from './styles';
import * as List from '../List';
import Touch from '../Touch';
import { useActionSheetItemHeight } from './useActionSheetItemHeight';

interface IBottomSheetContentProps {
hasCancel?: boolean;
Expand Down Expand Up @@ -39,8 +40,7 @@ const BottomSheetContent = memo(

const { colors } = useTheme();
const { bottom } = useSafeAreaInsets();
const { fontScale } = useWindowDimensions();
const height = 48 * fontScale;
const height = useActionSheetItemHeight();
const paddingBottom = isAndroid ? bottom + height : bottom;
const minHeightStyle = isAndroid || !contentMinHeight ? undefined : { minHeight: contentMinHeight };

Expand Down
6 changes: 3 additions & 3 deletions app/containers/ActionSheet/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { memo } from 'react';
import { Text, useWindowDimensions, View } from 'react-native';
import { Text, View } from 'react-native';

import { CustomIcon } from '../CustomIcon';
import { useTheme } from '../../theme';
Expand All @@ -9,6 +9,7 @@ import { type TActionSheetOptionsItem } from './Provider';
import styles from './styles';
import { LISTENER } from '../Toast';
import Touch from '../Touch';
import { useActionSheetItemHeight } from './useActionSheetItemHeight';

export interface IActionSheetItem {
item: TActionSheetOptionsItem;
Expand All @@ -20,7 +21,7 @@ export const Item = memo(({ item, hide }: IActionSheetItem) => {

const enabled = item?.enabled ?? true;
const { colors } = useTheme();
const { fontScale } = useWindowDimensions();
const height = useActionSheetItemHeight();
const onPress = () => {
if (enabled) {
hide();
Expand All @@ -37,7 +38,6 @@ export const Item = memo(({ item, hide }: IActionSheetItem) => {
if (!enabled) {
color = colors.fontDisabled;
}
const height = 48 * fontScale;
const accessibilityLabel = item?.accessibilityLabel || (item?.subtitle ? `${item.title}. ${item.subtitle}` : item.title);

return (
Expand Down
8 changes: 2 additions & 6 deletions app/containers/ActionSheet/useActionSheetDetents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { SheetDetent } from '@lodev09/react-native-true-sheet';
import { useMemo } from 'react';
import { useWindowDimensions } from 'react-native';

const ACTION_SHEET_MIN_HEIGHT_FRACTION = 0.15;
const ACTION_SHEET_MAX_HEIGHT_FRACTION = 0.75;
Expand Down Expand Up @@ -47,16 +46,13 @@ export function useActionSheetDetents({
hasCancel = false,
contentHeight
}: UseActionSheetDetentsParams): { detents: SheetDetent[]; maxHeight: number; scrollEnabled: boolean } {
const { fontScale } = useWindowDimensions();
const CANCEL_HEIGHT = 48 * fontScale;

return useMemo(() => {
const maxHeight = windowHeight * ACTION_SHEET_MAX_HEIGHT_FRACTION;
const hasOptions = optionsLength > 0;

const maxSnap = hasOptions
? Math.min(
(itemHeight + 0.5) * optionsLength + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0),
(itemHeight + 0.5) * optionsLength + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? itemHeight : 0),
maxHeight
)
: 0;
Expand All @@ -72,7 +68,7 @@ export function useActionSheetDetents({
scrollEnabled = true;
} else {
const measuredHeight =
optionsLength * itemHeight + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0);
optionsLength * itemHeight + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? itemHeight : 0);

scrollEnabled = false;
detents = [heightToDetent(Math.round(measuredHeight), windowHeight)];
Expand Down
8 changes: 8 additions & 0 deletions app/containers/ActionSheet/useActionSheetItemHeight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { PixelRatio, useWindowDimensions } from 'react-native';

export const ACTION_SHEET_ITEM_HEIGHT = 48;

export const useActionSheetItemHeight = (): number => {
const { fontScale } = useWindowDimensions();
return PixelRatio.roundToNearestPixel(ACTION_SHEET_ITEM_HEIGHT * fontScale);
};
4 changes: 2 additions & 2 deletions app/containers/DirectoryItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { memo, type ReactElement } from 'react';
import { Text, View, type ViewStyle } from 'react-native';
import { PixelRatio, Text, View, type ViewStyle } from 'react-native';

import Touch from '../Touch';
import Avatar from '../Avatar';
Expand Down Expand Up @@ -49,7 +49,7 @@ const DirectoryItem = ({
}: IDirectoryItem): ReactElement => {
const { colors } = useTheme();
const { fontScale } = useResponsiveLayout();
const height = ROW_HEIGHT * fontScale;
const height = PixelRatio.roundToNearestPixel(ROW_HEIGHT * fontScale);

return (
<View testID={testID} accessible accessibilityLabel={`${title || ''} ${rightLabel || ''}`} importantForAccessibility='yes'>
Expand Down
7 changes: 6 additions & 1 deletion app/containers/List/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useMemo, memo, type ReactElement } from 'react';
import {
I18nManager,
PixelRatio,
type StyleProp,
StyleSheet,
Text,
Expand Down Expand Up @@ -172,7 +173,11 @@ const Content = memo(

return (
<View
style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}
style={[
styles.container,
disabled && styles.disabled,
{ height: PixelRatio.roundToNearestPixel((heightContainer || BASE_HEIGHT) * fontScale) }
]}
testID={testID}
accessible={!shouldDisableAccessibility}
accessibilityLabel={handleAcessibilityLabel}
Expand Down
2 changes: 2 additions & 0 deletions app/containers/MessageActions/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ const ITEM_MARGIN = 8;

const styles = StyleSheet.create({
container: {
height: HEADER_HEIGHT,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: CONTAINER_MARGIN,
paddingBottom: 16
Expand Down
128 changes: 84 additions & 44 deletions app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,16 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -315,11 +320,16 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -541,11 +551,16 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -699,7 +714,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
"right": 0,
},
{
"height": 68,
"height": 80,
},
{
"backgroundColor": "#EC0D2A",
Expand All @@ -720,7 +735,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
"width": 390,
},
{
"height": 68,
"height": 80,
},
[Function],
]
Expand Down Expand Up @@ -901,11 +916,16 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -1056,7 +1076,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
"right": 0,
},
{
"height": 68,
"height": 80,
},
{
"backgroundColor": "#EC0D2A",
Expand All @@ -1077,7 +1097,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
"width": 390,
},
{
"height": 68,
"height": 80,
},
[Function],
]
Expand Down Expand Up @@ -1258,11 +1278,16 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -1491,11 +1516,16 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -1717,11 +1747,16 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down Expand Up @@ -1943,11 +1978,16 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
}
[
{
"alignItems": "center",
"flexDirection": "row",
"padding": 12,
},
{
"height": 68,
},
]
}
>
<ViewManagerAdapter_ExpoImage
Expand Down
Loading
Loading