From 3d20dde48f8b4028327964e5156464347ab1692f Mon Sep 17 00:00:00 2001 From: rory Date: Thu, 2 Jul 2026 19:13:56 -0700 Subject: [PATCH 1/2] fix(charts): scale native Victory charts from measured bubble width Re-export VictoryChartContainerResponsive on native so charts use onLayout instead of a window-width padding estimate. Co-authored-by: Cursor --- .../VictoryChartContainer/index.native.tsx | 57 +------------------ 1 file changed, 1 insertion(+), 56 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx index d1e1ff71bbe2..4a3b173b0d1a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native.tsx @@ -1,56 +1 @@ -import React from 'react'; -import {View} from 'react-native'; -import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants'; -import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext'; -import computeChartScale from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/computeChartScale'; -import {resolveChartContainerBgColor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor'; -import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; - -// Horizontal space consumed by chat message padding, avatar, and margins (excluding safe area insets). -// Used instead of onLayout because Yoga inflates the container width to match the fixed-width chart child. -const CHAT_MESSAGE_HORIZONTAL_PADDING = 92; - -/** @see POLAR_CONTAINER_HEIGHT_RATIO in VictoryChartContainerFixed */ -const POLAR_CONTAINER_HEIGHT_RATIO = 0.9; - -function VictoryChartContainer({children}: {children: React.ReactNode}) { - const styles = useThemeStyles(); - const theme = useTheme(); - const {chartContentStyles, chartContainerStyles, type} = useVictoryChartContext(); - const {windowWidth} = useWindowDimensions(); - const {left: safeAreaLeft, right: safeAreaRight} = useSafeAreaInsets(); - - const designWidth = typeof chartContentStyles.width === 'number' ? chartContentStyles.width : undefined; - const designHeight = typeof chartContentStyles.height === 'number' ? chartContentStyles.height : undefined; - const hasExplicitDimensions = designWidth !== undefined && designHeight !== undefined; - const isPolar = type === CHART_TYPE.POLAR; - const effectiveDesignHeight = isPolar && designHeight ? designHeight * POLAR_CONTAINER_HEIGHT_RATIO : designHeight; - - const availableWidth = windowWidth - safeAreaLeft - safeAreaRight - CHAT_MESSAGE_HORIZONTAL_PADDING; - const scale = hasExplicitDimensions ? computeChartScale(designWidth, availableWidth) : 1; - - const {backgroundColor: rawBgColor, borderRadius, ...layoutContainerStyles} = chartContainerStyles; - const backgroundColor = resolveChartContainerBgColor(rawBgColor, theme); - - const contentStyle = hasExplicitDimensions - ? [chartContentStyles, {backgroundColor, borderRadius, overflow: 'hidden' as const, transform: [{scale}], transformOrigin: 'top left' as const}] - : [styles.chartContent, chartContentStyles, {backgroundColor, borderRadius, overflow: 'hidden' as const}]; - - const containerStyle = - hasExplicitDimensions && effectiveDesignHeight && designWidth - ? [{width: designWidth * scale, height: effectiveDesignHeight * scale, alignSelf: 'flex-start' as const, overflow: 'hidden' as const, borderRadius}] - : [styles.chartContainer, styles.mw100, layoutContainerStyles]; - - return ( - - {children} - - ); -} - -VictoryChartContainer.displayName = 'VictoryChartContainer'; - -export default VictoryChartContainer; +export {default} from './VictoryChartContainerResponsive'; From 16cdd12afa7f6c2e82e62bd92235f34470af74ee Mon Sep 17 00:00:00 2001 From: rory Date: Thu, 2 Jul 2026 19:13:57 -0700 Subject: [PATCH 2/2] test(charts): ensure native Victory chart container stays responsive Co-authored-by: Cursor --- tests/unit/VictoryChartContainerNativeTest.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 tests/unit/VictoryChartContainerNativeTest.ts diff --git a/tests/unit/VictoryChartContainerNativeTest.ts b/tests/unit/VictoryChartContainerNativeTest.ts new file mode 100644 index 000000000000..8e416e2eae35 --- /dev/null +++ b/tests/unit/VictoryChartContainerNativeTest.ts @@ -0,0 +1,8 @@ +import VictoryChartContainerNative from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/index.native'; +import VictoryChartContainerResponsive from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/VictoryChartContainerResponsive'; + +describe('VictoryChartContainer native', () => { + it('uses the responsive container so charts scale from measured chat bubble width', () => { + expect(VictoryChartContainerNative).toBe(VictoryChartContainerResponsive); + }); +});