WrathChaos/react-native-bouncy-checkbox-group

I'm able to unselect an already selected option

Opened this issue · 0 comments

Here's the outcome:
https://github.com/user-attachments/assets/ab52a4f6-68a3-4cb9-ba82-744f7c881884

Here's my code:

import React, { useState } from 'react';
import BouncyCheckboxGroup, {
  CheckboxButton
} from 'react-native-bouncy-checkbox-group';
import { Box } from '@/src/components';
import { useTheme } from '@shopify/restyle';
import { Theme } from '@/theme';

const _iconStyle = (borderColor: string) => ({
  height: 30,
  width: 30,
  borderRadius: 25,
  borderColor: borderColor
});

interface Element {
  name: string;
  title: string;
  isRequired: boolean;
  choices: Array<string | { value: string | number; text: string }>;
}

interface RadioGroupComponentProps {
  element: Element;
}

const RadioGroupComponent: React.FC<RadioGroupComponentProps> = ({
  element
}) => {
  const theme = useTheme<Theme>();

  const [radioButtons, setRadioButtons] = useState<CheckboxButton[]>(
    element.choices.map((choice, index) => ({
      id: index,
      fillColor: theme.colors.success,
      unFillColor: theme.colors.lightBorder,
      text: choice.toString(),
      textStyle: { textDecorationLine: 'none', color: theme.colors.textBlack },
      iconStyle: _iconStyle('#fbbfbb'),
      iconImageStyle: { height: 10, width: 15 }
    }))
  );

  return (
    <Box key={element.name}>
      <BouncyCheckboxGroup
        style={{ flexDirection: 'column' }}
        data={radioButtons}
        initial={0}
        onChange={(selectedItem: CheckboxButton) => {
          console.log('SelectedItem: ', JSON.stringify(selectedItem));
        }}
      />
    </Box>
  );
};

export default RadioGroupComponent;

In the original gif of this you can see that when clicking an already selected box it doesn't become unselected, this is the behaviour I was expecting. How can we make this the case?