From e5cf61408ba14ff2faa02e6902e747ac5a65de05 Mon Sep 17 00:00:00 2001 From: Freddy Harris Date: Tue, 18 Mar 2025 16:37:25 +0100 Subject: [PATCH] fix onLayout floating point numbers with roundToNearestPixel --- .../reactnative/scrollcomponent/ScrollComponent.tsx | 9 ++++++--- .../reactnative/viewrenderer/ViewRenderer.tsx | 12 +++++++----- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx b/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx index 74e310ad..d7faa7aa 100644 --- a/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx +++ b/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx @@ -5,6 +5,7 @@ import { NativeSyntheticEvent, ScrollView, View, + PixelRatio, } from "react-native"; import BaseScrollComponent, { ScrollComponentProps } from "../../../core/scrollcomponent/BaseScrollComponent"; import TSCast from "../../../utils/TSCast"; @@ -114,9 +115,11 @@ export default class ScrollComponent extends BaseScrollComponent { } private _onLayout = (event: LayoutChangeEvent): void => { - if (this._height !== event.nativeEvent.layout.height || this._width !== event.nativeEvent.layout.width) { - this._height = event.nativeEvent.layout.height; - this._width = event.nativeEvent.layout.width; + const layoutHeight = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.height); + const layoutWidth = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.width); + if (this._height !== layoutHeight || this._width !== layoutWidth) { + this._height = layoutHeight; + this._width = layoutWidth; if (this.props.onSizeChanged) { this._isSizeChangedCalledOnce = true; this.props.onSizeChanged(event.nativeEvent.layout); diff --git a/src/platform/reactnative/viewrenderer/ViewRenderer.tsx b/src/platform/reactnative/viewrenderer/ViewRenderer.tsx index 7d77bb25..9baf2e90 100644 --- a/src/platform/reactnative/viewrenderer/ViewRenderer.tsx +++ b/src/platform/reactnative/viewrenderer/ViewRenderer.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { LayoutChangeEvent, View, ViewProperties } from "react-native"; +import { LayoutChangeEvent, View, ViewProperties, PixelRatio } from "react-native"; import { Dimension } from "../../../core/dependencies/LayoutProvider"; import { LayoutManager } from "../../../core/layoutmanager/LayoutManager"; import BaseViewRenderer, { ViewRendererProps } from "../../../core/viewrenderer/BaseViewRenderer"; @@ -76,11 +76,13 @@ export default class ViewRenderer extends BaseViewRenderer { //Preventing layout thrashing in super fast scrolls where RN messes up onLayout event const xDiff = Math.abs(this.props.x - event.nativeEvent.layout.x); const yDiff = Math.abs(this.props.y - event.nativeEvent.layout.y); + const layoutHeight = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.height); + const layoutWidth = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.width); if (xDiff < 1 && yDiff < 1 && - (this.props.height !== event.nativeEvent.layout.height || - this.props.width !== event.nativeEvent.layout.width)) { - this._dim.height = event.nativeEvent.layout.height; - this._dim.width = event.nativeEvent.layout.width; + (this.props.height !== layoutHeight || + this.props.width !== layoutWidth)) { + this._dim.height = layoutHeight; + this._dim.width = layoutWidth; if (this.props.onSizeChanged) { this.props.onSizeChanged(this._dim, this.props.index); }