title: Real-time data update chart in React Native
body: <p>I need to create a chart in react native that takes data (Array of integer) from a native module every 500 m/s and plots them in live update, to do this I used &quot;react-native-svg&quot;,  I can actually update the chart but <strong>performance is very slow and and crashes are frequent</strong>.</p>
  <p><strong>Array of result</strong> accept a maximum of 1800 results, after which the graph scrolls</p>
  <pre><code>...
   const [data, setData] = useState(new Array(1800).fill(0));
  ...
  </code></pre>
  <p><strong>In listener</strong> take data from native module and update array, from the native module I pass an array of 60 elements, since it takes 60 elements every 500 m/s (e.values is the array of 60 integers)</p>
  <pre><code>...
  setData(state =&gt; {
      state.splice(0, 60)
      return [...state, ...e.values]
  })
  ...
  </code></pre>
  <p><strong>The chart</strong></p>
  <pre><code>...
      &lt;LineChart
              style={ { flex: 1 } }
              data={data.map(dt =&gt; {
                  return dt
              })}
              svg={ {
                  strokeWidth: 2,
                  stroke: '#2171bf',
              } }
              yMin={-5000}
              yMax={10000}
              numberOfTicks={25}
          &gt;
              &lt;CustomGrid belowChart={true} /&gt;
       &lt;/LineChart&gt;
  ...
  </code></pre>
  <p>I tried other charts libs but they all give the same result</p>
  <p>P.S. Sorry if the language is not perfect.</p>