diff --git a/packages/core-mobile/app/components/SparklineChart/SparklineChart.tsx b/packages/core-mobile/app/components/SparklineChart/SparklineChart.tsx index 7573202bb5..3a6c66cf8d 100644 --- a/packages/core-mobile/app/components/SparklineChart/SparklineChart.tsx +++ b/packages/core-mobile/app/components/SparklineChart/SparklineChart.tsx @@ -3,7 +3,6 @@ import { useApplicationContext } from 'contexts/ApplicationContext' import { GraphPoint, LineGraph } from 'react-native-graph' import { SelectionDot } from 'screens/watchlist/SelectionDot' import { hapticFeedback } from 'utils/HapticFeedback' -import { Platform } from 'react-native' import { AxisLabel } from './AxisLabel' import { NEGATIVE_GRADIENT_FILL_COLORS, @@ -99,13 +98,10 @@ const SparklineChart: FC = ({ width: width, height: height }} - // The graph rendering too small appears to be an iOS-specific issue. - // Adjusting the layout didn't fix the bug, but setting animated to true seems to resolve it based on experiments. - animated={Platform.OS === 'ios'} + animated={false} color={color} lineThickness={lineThickness} points={data} - gradientFillColors={gradientFillColors} testID="line_graph" /> ) diff --git a/packages/core-mobile/patches/react-native-graph+1.1.0.patch b/packages/core-mobile/patches/react-native-graph+1.1.0.patch index a35a281fdc..aaff92db46 100644 --- a/packages/core-mobile/patches/react-native-graph+1.1.0.patch +++ b/packages/core-mobile/patches/react-native-graph+1.1.0.patch @@ -95,7 +95,7 @@ index 21e147f..4a618db 100644 * Whether to enable Graph scrubbing/pan gesture. */ diff --git a/node_modules/react-native-graph/src/StaticLineGraph.tsx b/node_modules/react-native-graph/src/StaticLineGraph.tsx -index 5790400..a24ece4 100644 +index 5790400..b944d7a 100644 --- a/node_modules/react-native-graph/src/StaticLineGraph.tsx +++ b/node_modules/react-native-graph/src/StaticLineGraph.tsx @@ -4,6 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react' @@ -106,22 +106,27 @@ index 5790400..a24ece4 100644 getGraphPathRange, getPointsInRange, GraphPathRange, -@@ -17,11 +18,14 @@ export function StaticLineGraph({ +@@ -17,10 +18,17 @@ export function StaticLineGraph({ lineThickness = 3, enableFadeInMask, style, + gradientFillColors, ...props }: StaticLineGraphProps): React.ReactElement { - const [width, setWidth] = useState(0) - const [height, setHeight] = useState(0) - -+ const shouldFillGradient = gradientFillColors != null +- const [width, setWidth] = useState(0) +- const [height, setHeight] = useState(0) ++ const [width, setWidth] = useState(style && typeof style === 'object' && 'width' in style && typeof style.width === 'number' ++ ? style.width ++ : 0) ++ const [height, setHeight] = useState(style && typeof style === 'object' && 'height' in style && typeof style.height === 'number' ++ ? style.height ++ : 0) + ++ const shouldFillGradient = gradientFillColors != null + const onLayout = useCallback( ({ nativeEvent: { layout } }: LayoutChangeEvent) => { - setWidth(Math.round(layout.width)) -@@ -40,17 +44,26 @@ export function StaticLineGraph({ +@@ -40,17 +48,26 @@ export function StaticLineGraph({ [allPoints, pathRange] ) @@ -153,7 +158,7 @@ index 5790400..a24ece4 100644 ) const gradientColors = useMemo( -@@ -80,6 +93,17 @@ export function StaticLineGraph({ +@@ -80,6 +97,17 @@ export function StaticLineGraph({ /> )}