Expo React Native App Not Showing Chart Anymore

Question

I have been using a React Native charting library for my managed Expo app with no problems for quite some time.

Problem: However, something might have changed since 2 months ago (August 2019) as the chart is now showing an empty space. This is true even for a simple Expo app containing just Text and the chart Chart (repo linked below).

I suspect this problem is related to React Native's WebView.

Why is the chart no longer rendering, and how can we fix this problem? Thank you!

Repo : https://github.com/nyxynyx/expo-f2chart-problem

Using:

Dev system

• expo 35.0.0
• react native 0.5.9
• react 16.8.3
• Mac OS X Mojave 10.14.6

Target Device

• Expo iOS client 2.13.0.107059
• iPhone 6S on iOS 12.4.1

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Chart from 'react-native-f2chart';

const initScript = data =>`
(function(){
    chart =  new F2.Chart({
        id: 'chart',
        pixelRatio: window.devicePixelRatio,
    });
    chart.source(${JSON.stringify(data)}, {
    value: {
    tickCount: 5,
    min: 0
    },
    date: {
    type: 'timeCat',
    range: [0, 1],
    tickCount: 3
    }
    });
    chart.tooltip({
    custom: true,
    showXTip: true,
    showYTip: true,
    snap: true,
    onChange: function(obj) {
        window.postMessage(stringify(obj))
    },
    crosshairsType: 'xy',
    crosshairsStyle: {
    lineDash: [2]
    }
    });
    chart.axis('date', {
    label: function label(text, index, total) {
    var textCfg = {};
    if (index === 0) {
        textCfg.textAlign = 'left';
    } else if (index === total - 1) {
        textCfg.textAlign = 'right';
    }
    return textCfg;
    }
    });
    chart.line().position('date*value');
    chart.render();
})();
`;

export default function App() {

  var data = [{
    date: "2017-06-05",
    value: 116
  }, {
    date: "2017-06-06",
    value: 129
  }, {
    date: "2017-06-07",
    value: 135
  }, {
    date: "2017-06-08",
    value: 86
  }, {
    date: "2017-06-09",
    value: 73
  }, {
    date: "2017-06-10",
    value: 85
  }];

  return (
    <View style={styles.container}>
      <Text>My Chart</Text>
      <View style={{ height: 350, width: '100%', backgroundColor: '#555' }}>
        <Chart initScript={initScript(data)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Screenshot

The darker grey area is where the Chart should be, but it is empty instead of showing the chart.

Answer 1

I tried to recreate this problem with Snack, but I think there's something wrong with it because it doesn't install. So I would recommend using another module. These are already validated modules.

1. "react-native-chart-kit"
2. 'react-native-pure-chart'
3. victory-native