use style's width and heigth as initial values if possible

ava-labs · Dec 18, 2024 · 3b83f31 · 3b83f31
1 parent ba19ad0
commit 3b83f31
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git 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<Props> = ({
         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
@@ -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<number>(style && typeof style === 'object' && 'width' in style && typeof style.width === 'number'
++    ? style.width
++    : 0)
++  const [height, setHeight] = useState<number>(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({
              />
            )}
          </Path>