Highchart 1.0.2 not rendering properly in real device in react-native 0.57.8 about react-native-highcharts HOT 5 CLOSED

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

react-native-webview/react-native-webview#101 (comment)

from react-native-highcharts.

Or without touching the github file,

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

from react-native-highcharts.

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

from react-native-highcharts.

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

from react-native-highcharts.

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

from react-native-highcharts.