Plotting data from streams into graphs using xstream and react-native-svg-charts

Question

I'm fairly new to React native so excuse if my explanation is poor.

I am attempting to make an application which takes BLE data and plots it onto a graph as it is recived. The data is being put into streams when it is recieved using the 'xstream' package and then this data is then being placed into an array using the 'stream-to-array' package, the graph library I am using is 'react-native-svg-charts'.

So far, I struggling to test the ability to take data from a stream and format it on a graph as nothing is being displayed even though there is data in the stream.

import React from "react";
import { LineChart, Grid } from "react-native-svg-charts";
import xs from "xstream";

var toArray = require("stream-to-array");
const set = [10, 20, 30, 40];

var stream = xs.fromArray(set);
var data = [];

stream.addListener({
  next: (i) => console.log(i),
  error: (err) => console.error(err),
});

toArray(stream, function (err, data) {
  assert.ok(Array.isArray(data));
});

class Graph extends React.PureComponent {
  render() {
    return (
      <LineChart
        style={{ height: 200 }}
        data={data}
        animate="true"
        svg={{ stroke: "rgb(134, 65, 244)" }}
        contentInset={{ top: 20, bottom: 20 }}
      >
        <Grid />
      </LineChart>
    );
  }
}

export default Graph;