Area chart overflow while scrolling on Release build

[jsmitrah]

Hi,

I'm facing an overflow issue with scrollable area chart. The area is overflowing while scrolling. It is working fine in the debug mode and the overflow problem arises only while installing an apk on real-devices.

Package versions: "react-native": "0.63.3", "react-native-gesture-handler": "^1.9.0", "react-native-responsive-linechart": "^5.3.0", "react-native-svg": "^12.1.0"

Tested devices:

1. Nokia 5.1 plus
2. Realme 7 pro

Steps to reproduce:

1. cd android
2. .\gradlew assembleRelease
3. Install the apk on Mobile.

**import React from 'react'; import { StatusBar } from 'react-native'; import { Chart, Line, Area, HorizontalAxis, VerticalAxis } from 'react-native-responsive-linechart'; const data= [ { x: 0, y: 12 }, { x: 1, y: 7 }, { x: 2, y: 6 }, { x: 3, y: 3 }, { x: 4, y: 5 }, { x: 5, y: 8 }, { x: 6, y: 12 }, { x: 7, y: 14 }, { x: 8, y: 12 }, { x: 9, y: 13 }, { x: 10, y: 20 }, ]; const App: () => React$Node = () => { return ( <>

      <Chart
        style={{ height: 200, width: '100%' }}
        data={data}
        padding={{ left: 40, bottom: 20, right: 20, top: 20 }}
        xDomain={{ min: 0, max: 10 }}
        yDomain={{ min: 0, max: 20 }}
        viewport={{ size: { width: 5 } }}
      >
        <VerticalAxis
          tickValues={[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]}
          theme={{
            axis: { stroke: { color: '#aaa', width: 2 } },
            ticks: { stroke: { color: '#aaa', width: 2 } },
            labels: { formatter: (v: number) => v.toFixed(2) },
          }}
        />
        <HorizontalAxis
          tickValues={[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]}
          theme={{
            axis: { stroke: { color: '#aaa', width: 2 } },
            ticks: { stroke: { color: '#aaa', width: 2 } },
            labels: { label: { rotation: 50 }, formatter: (v) => v.toFixed(1) },
          }}
        />
        <Line
          theme={{
            stroke: { color: 'red', width: 2 },
          }}
          smoothing="cubic-spline"
        />
        <Area theme={{ gradient: { from: { color: '#f39c12', opacity: 0.4 }, to: { color: '#f39c12', opacity: 0.4 } } }} smoothing="cubic-spline" />
      </Chart>
</>

); }; export default App;**

[xanderdeseyn]

Thanks for reporting, I will look into this

[xanderdeseyn]

Fixed in v5.3.1

[jsmitrah]

Great! v5.3.1 is working... Thanks for your quick response.