Highchart 1.0.2 not rendering properly in real device in react-native 0.57.8

[haorh]

I have multiple highchart rendering in a row. In Android simulator, it is working properly. However in real device, only the last row graph is rendered.

Somehow if the last graph contains value, eg

graphConfig.series[0].data[0].y =xxx; // has value

the rest of the graph is rendered.

If I waited, the rest of the graph appear one by one from bottom to top.

Another funny behaviour is if the graph has value and when I interact with it (ei: press and trigger the tooltip to be displayed), the rest of the graph is rendered.

[haorh]

It turns out from 0.57 onward, WebView behaviour has changed. The issue isnt about multiple highchart, its related to highchart affecting previous sibling elements.

In react-native-highcharts.js, add overflow: 'hidden' at parent of WebView in render()

return (
            <View style={[this.props.style, {overflow: 'hidden'}]}>
                <WebView
                    onLayout={this.reRenderWebView}
                    style={styles.full}
                    source={{html: concatHTML, baseUrl: 'web/'}}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    scalesPageToFit={false}
                    scrollEnabled={false}
                    mixedContentMode='always'
                    automaticallyAdjustContentInsets={true}
                    {...this.props}
                />
            </View>
        );

Solution https://stackoverflow.com/questions/52872045/rendering-webview-on-android-device-overlaps-previous-siblings-from-same-parent?answertab=votes#tab-top

https://github.com/react-native-community/react-native-webview/issues/101#issuecomment-430984390

[haorh]

Or without touching the github file,

<ChartView style={{overflow: 'hidden'}} />

[WillKre]

@haorh been battling this bug for ages, thanks for the working solution 🔥

[haorh]

Extra note, for RN59, RN will throw "WebView has been extracted from react-native core and will be removed in a future release". Replace

import {StyleSheet, View, Dimensions, WebView} from 'react-native';

to

import {StyleSheet, View, Dimensions} from 'react-native';
import { WebView } from 'react-native-webview';

will remove the warning. However the white screen bug is back. I'll continue to use back WebView from react-native for now

You can keep track of the issue in react-native-webview

[shivamsingh262]

Wow, thanks for this, I had been struggling with the same for days now