BarChart onPress not working

[leonie-koch]

The BarChart is not clickable, nevertheless what I am doing. I also created a new project from scratch and pasted the sample code , but also there the onPress is not working nothing gets logged to the console. I am using version ^5.4.0. The rest of the barchart is working perfectly fine, it's just not clickable.

My Code:

import { View, Text } from "react-native";
import { BarChart, XAxis, Grid } from "react-native-svg-charts";
import Colors from "../Colors";
import React, { useEffect, useState } from "react";

const DistBarChart = ({ question, answers, setAnswers }) => {
  const labels = ["4%", "7%", "12%", "17%", "20%", "17%", "12%", "7%", "4%"];
  const intVal = parseInt(answers[question.id]);
  const data = [
    {
      value: 4,
      svg: {
        fill: intVal === 0 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => console.log("test"),
      },
    },
    {
      value: 7,
      svg: {
        fill: intVal === 1 ? Colors.primaryBlue : Colors.paleBlue,
        onPressIn: () => setAnswers({ [question.id]: parseInt(1) }),
      },
    },
    {
      value: 12,
      svg: {
        fill: intVal === 2 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(2) }),
      },
    },
    {
      value: 17,
      svg: {
        fill: intVal === 3 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(3) }),
      },
    },
    {
      value: 20,
      svg: {
        fill: intVal === 4 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(4) }),
      },
    },
    {
      value: 17,
      svg: {
        fill: intVal === 5 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(5) }),
      },
    },
    {
      value: 12,
      svg: {
        fill: intVal === 6 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(6) }),
      },
    },
    {
      value: 7,
      svg: {
        fill: intVal === 7 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(7) }),
      },
    },
    {
      value: 4,
      svg: {
        fill: intVal === 8 ? Colors.primaryBlue : Colors.paleBlue,
        onPress: () => setAnswers({ [question.id]: parseInt(8) }),
      },
    },
  ];

  return (
    <View>
      <BarChart
        style={{ height: 120 }}
        data={data}
        yAccessor={({ item }) => item.value}
        contentInset={{ top: 30, bottom: 30 }}
      ></BarChart>
      <XAxis
        style={{ marginHorizontal: -10, marginTop: 20 }}
        data={data}
        formatLabel={(value, index) => labels[index]}
        contentInset={{ left: 30, right: 30, top: 10 }}
        svg={{
          fontFamily: "Light",
          fontSize: 16,
          fill: Colors.primaryBlue,
        }}
      />
    </View>
  );
};

export default DistBarChart;

[t104360088]

@l30ni3 I tried your code and it works well.