Bar chart width (spacing) about react-native-gifted-charts HOT 2 OPEN

import React, {useState} from 'react';
import {BarChart, barDataItem} from 'react-native-gifted-charts';
import {View} from 'react-native-ui-lib';
import ChartLabel from './ChartLabel';

const data = [
  {
    values: [5, 40, 77, 81, 43],
    label: 'Hemoglobin',
    color: '#7CDE86',
  },
  {
    values: [40, 5, 50, 23, 79],
    label: 'White blood cell',
    color: '#7CD8DE',
  },
  {
    values: [10, 55, 35, 90, 82],
    label: 'Mean corpuscular volume',
    color: '#7C9DDE',
  },
  {
    values: [22, 45, 50, 60, 30],
    label: 'Hematocrit',
    color: '#A17CDE',
  },
  {
    values: [30, 25, 10, 60, 15],
    label: 'Platelet',
    color: '#DC7CDE',
  },
];

const xAxisLabels = ['01.02', '11.02', '19.02', '12.03', '13.03'];

const getData = (barSpace: number, labelWidth: number, groupWidth: number) => {
  const res: barDataItem[] = [];

  for (let i = 0; i < data.length; i++) {
    data.forEach((item, j, array) => {
      const obj = {
        value: item.values[i],
        frontColor: item.color,
      };

      const label = {
        labelWidth,
        labelComponent: () => (
          <ChartLabel
            label={xAxisLabels[i]}
            labelWidth={labelWidth}
            groupWidth={groupWidth}
          />
        ),
      };

      const spacing = barSpace;

      if (j === 0) {
        res.push({...obj, ...label, spacing});
      } else if (j === array.length - 1) {
        res.push({...obj});
      } else {
        res.push({...obj, spacing});
      }
    });
  }

  return res;
};

export default function Chart() {
  const [width, setWidth] = useState(0);

  const groupSpace = (width * 0.2) / (xAxisLabels.length - 1);
  const groupWidth = (width * 0.8) / xAxisLabels.length;

  const barSpace = (groupWidth * 0.2) / (xAxisLabels.length - 1);
  const barWidth = (groupWidth * 0.8) / xAxisLabels.length;

  const labelWidth = 40;

  return (
    <View
      flex
      onLayout={({
        nativeEvent: {
          layout: {width: calculatedWidth},
        },
      }) => setWidth(calculatedWidth - labelWidth)}>
      <BarChart
        disablePress
        disableScroll
        isAnimated
        data={getData(barSpace, labelWidth, groupWidth)}
        barWidth={barWidth}
        spacing={groupSpace}
        roundedTop
        roundedBottom
        noOfSections={3}
        xAxisThickness={0}
        yAxisThickness={0}
        dashWidth={20}
        dashGap={12}
        initialSpacing={0}
        endSpacing={0}
      />
    </View>
  );
}