I'm able to unselect an already selected option
Opened this issue · 0 comments
LiamDotPro commented
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?