onPress event on Pie Chart

I referred to the examples repo and was able to build something like the attached. Reference issue #131

Now, I am stuck with touch event, as I am not able to get onpress() event callback

 render() {
    const data = [
      {
        key: 1,
        amount: 20,
        amount1: 30,
        svg: { fill: '#600080' },
      },
      {
        key: 2,
        amount: 20,
        amount1: 40,
        svg: { fill: '#9900cc' }
      },
      {
        key: 3,
        amount: 20,
        amount1: 50,
        svg: { fill: '#c61aff' }
      },
      {
        key: 4,
        amount: 20,
        amount1: 60,
        svg: { fill: '#d966ff' }
      },
      {
        key: 5,
        amount: 20,
        amount1: 70,
        svg: { fill: '#ecb3ff' }
      }
    ]
    const Labels = ({ slices, height, width }) => {
      return slices.map((slice, index) => {
        const { labelCentroid, pieCentroid, data } = slice;
        return (
          <G
            key={index}
            x={labelCentroid[0]}
            y={labelCentroid[1]}
            onPress={ () => console.log('tooltip clicked') } 
          >
           
            <Circle
               r={30}
               fill={'white'}
           />
           <Image
             x={-25}  
             y={25}
               width={50}
               height={50}
               preserveAspectRatio="xMidYMid slice"
               opacity="1"
               href={Images.memes[ index + 1 ]}
           />
            <Circle
               r={20}
               x={30}
               y={-10}
               fill={'gray'}
           />
           <Text
              key={index}
              x={30}
              y={-10}
              // x={pieCentroid[0]}
              // y={pieCentroid[1]}
              fill={'black'}
              textAnchor={'middle'}
              alignmentBaseline={'middle'}
              fontSize={24}
              stroke={'black'}
              strokeWidth={0.2}
            >
              {data.amount}
            </Text>
          </G>
        
          
        )
      })
    }

   
    const resizeMode = 'center';
    return (

      <View style={styles.MainContainer}>
          <PieChart
            style={{ height: 330 }}
            valueAccessor={({ item }) => item.amount}
            data={data}
            spacing={20}
            outerRadius={'100%'}
          >

            <Labels />
    
          </PieChart>

        </View>

    );
  }
const styles = StyleSheet.create({
  MainContainer: {
    // Setting up View inside content in Vertically center.
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white'

  }
});

Any inputs will be helpful

[mohity777]

Why is it close? I am facing this issue is IOS where onPress is not being called. But it works fine in Android. I tried onPressIn and onPressOut but it didnt work

[iosfitness]

@JesperLekland Thanks for the input. I was able to find a way out based on your suggestions

Reference for the methods

export interface TouchableProps { disabled?: boolean, onPress?: (event: any) => any, onPressIn?: (event: any) => any, onPressOut?: (event: any) => any, onLongPress?: (event: any) => any, delayPressIn?: number, delayPressOut?: number, delayLongPress?: number }

Below is the working code.

const Labels = ({ slices, height, width }) => {
     return slices.map((slice, index) => {
       const { labelCentroid, pieCentroid, data } = slice;
       return (
         <G
           key={index}
           x={labelCentroid[0]}
           y={labelCentroid[1]}
         >
           <Image
             x={-25}
             y={25}
             width={45}
             height={45}
             preserveAspectRatio="xMidYMid slice"
             opacity="1"
             href={Images.memes[index + 1]}
           />
           <Circle
             r={50}
             fill={'transparent'}
             onPressIn={() => Alert.alert(`onPressIn clicked ${index}`)}
             onPressOut={() => Alert.alert(`onPressOut clicked ${index}`)}
           />
           <Circle
             r={20}
             x={30}
             y={-10}
             fill={'gray'}
           />
           <Text
             key={index}
             x={30}
             y={-10}
             fill={'black'}
             textAnchor={'middle'}
             alignmentBaseline={'middle'}
             fontSize={24}
             stroke={'black'}
             strokeWidth={0.2}
           >
             {data.amount}
           </Text>
         </G>
       )
     })
   }

Please let me know if I am going wrong with this approach