React-native-svg-charts: onPress in PieChart response slow or no response

[cuixinle]

When does it happen?

1、iOS：on iPhone6P、 iPhone7P、 iPhone8P、iPhonX click pieChart, onPress function in PieChart response slow or no response
2、Android: After clicking the page, click pieChart no response.

What platform?

• [ ] iOS (11.3) iPhone6P、 iPhone7P、 iPhone8P、iPhonX
• [ ] Android

React Native version: 0.55.4

Code to reproduce

// put code here
import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions
} from 'react-native';

import { PieChart } from 'react-native-svg-charts'

export default class App extends Component {

    constructor(props){
        super(props);
        this.state = {
            selectedSlice: {
                label: '',
                value: ''
            },
            labelWidth: 0
        }
    }

    render() {
        const {labelWidth, selectedSlice} = this.state;
        const {label, value} = selectedSlice;
        const keys = ['google', 'facebook', 'linkedin', 'youtube', 'Twitter'];
        const values = [15, 25, 35, 30, 55];
        const colors = ['#600080', '#9900cc', '#c61aff', '#d966ff', '#ecb3ff'];
        const data = keys.map((key, index) => {
            return {
                key,
                value: values[index],
                svg: {fill: colors[index]},
                arc: {outerRadius: label === key ? '100%' : '90%', padAngle: 0},
                onPress: () => {this.setState({selectedSlice: {label: key, value: values[index]}}); console.log(key, index)}
            }
        })

        const deviceWidth = Dimensions.get('window').width

        return (
            <View style={{ justifyContent: 'center', flex: 1 }}>
                <PieChart
                    style={{ height: 200 }}
                    outerRadius={ '90%' }
                    innerRadius={ '40%' }
                    data={data}
                />

                <Text
                    onLayout={({ nativeEvent: { layout: { width }}}) => {
                    this.setState({ labelWidth: width});
                }}
                    style={{
                    position: 'absolute',
                    left: deviceWidth / 2 - labelWidth / 2,
                    textAlign: 'center'
                }}>
                    {`${label} \n ${value}`}
                </Text>
            </View>
        )
    }
}

[mitevdev]

the same here, it seems onPress is getting called on background thread which could explain this behavior

[giacomocerquone]

Same problem here, the onpress callback is completely ignored.
This is an odd behaviour since the piechart component https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/pie-chart.js#L150 just pass down the onPress prop.

I believe the react-native-svg dep package should be updated to v8 (don't think there are many breaking changes) and this other issue could be related https://github.com/JesperLekland/react-native-svg-charts/issues/261

@JesperLekland could you give us info please? :)

Thank you so much for your good work!

[MatthieuCoelho]

Same problem here =(

[giacomocerquone]

I published this module: https://github.com/giacomocerquone/react-native-fab-pie and while developing it I tried in every possible way to attach an on press handler, even using directly the ART module of react native, but nothing.

I believe this bug relies in the very core of rn sadly.

[yosriMekni]

same problem here

[MatthieuCoelho]

I found a workaround by reading other issues.
You can use "onPressIn" or "onPressOut" instead of "onPress"

[usrbowe]

Closing due to no activity.