Scrolling in iOS not working

[ammarRajabA]

Hi

Thanks for the library, I have an issue, in Android when using ECharts component inside ScrollView I can scroll just fine (I am using ECharts with multiple grids). However in iOS I am unable to scroll, only when I tap outside the ECharts component.

Any help please

[tomLadder]

Hey @ammarRajabA

I'm aware of this issue. I was never able to solve it. It's due to how the scrollview with webview interacts @ios. I think i can't to anything about it.

[ammarRajabA]

Thanks @tomLadder for your reply. Is there any workaround you can suggest ?

[tomLadder]

@ammarRajabA I don't think there is a way to change this behaviour for iOS. I redesigned my view to avoid scrollviews in combination with a interactive chart.

[ammarRajabA]

I did a workaround , I'm gonna reference it here it might help others..

I created an overlay above all charts with same height that is transparent, I when user press on it, it disappears for 1000 ms, and user can interact with the chart, and if scrolls it also scrolls :)

toggleOverlay=()=>{
        this.setState({overlay:false},()=>{
                      setTimeout(()=>this.setState({overlay:true}),1000);
        });

    }
    renderOverlay=()=>{
        if ((this.state.overlay) && (Platform.OS === 'ios'))
            return (
                <TouchableWithoutFeedback onPressIn={this.toggleOverlay}>
                    <View style={styles.overlay}></View>
                </TouchableWithoutFeedback>
            )
    }
...
styles={
    ...
   overlay:{
        position:'absolute',
        top:60,
        left:0,
        backgroundColor:'transparent',
        height:700,
        width:'100%',
        zIndex:100
    }
}

[tomLadder]

@ammarRajabA Really cool, but also hacky solution 😂 Gonna definitely try this.

Thanks!

[Namnp1521]

I use this solution. I create function to render ECharts component instead code direct. And you can scroll inside ScrollView. Hope this help ^^

renderChart(dataChart) { return <LineBarChart dataChart={dataChart} /> }

`render() {
    let { dataChart } = this.props;

    return (<View style={styles.container}>
            {/* Chart */}
            <View style={styles.class}>
                {this.renderChart(dataChart)}
        </View>
    </View>)
}`