No margin between elements

[SrBrahma]

Would be good to have a prop to set the style for each checkbox. Here is what I am having:

There is no horizontal nor vertical margin. There could be by default a leftMargin if index > 0. In this case I have flexWrap: 'wrap', but wouldn't be good to have verticalMargin by default, it would be better if I could add it by myself.

[SrBrahma]

Also, for some strange reason, my text is having a strikethrough.

[WrathChaos]

Hello @SrBrahma, You can set any style for each checkbox.

Here is the documentation: Customization Optionals

Also, you can check how I customize each one on the example project.

Example

Also, for some strange reason, my text is having a strikethrough.

The original library's default behavior has a strikethrough. You can disable it through customization.

[SrBrahma]

This requires setting the style for each item. It's your choice, but for me it doesn't make too much sense to have this work requirement when there could be a prop to set the default style for all checkboxes, still with the possibility to change individual ones. My PR to set the default props to all checkboxes allows changing all the possible styles (icon, text, container iirc) and the other props in a single place, so it isn't needed to set the same settings for each item.

[WrathChaos]

Hey @SrBrahma Can you show me an example of how to use your solution?

[SrBrahma]

const checkboxData: {id: DbItemOptionType; text: string}[] = [
  { id: 'single', text: 'Único' },
  { id: 'multi', text: 'Múltiplos' },
  { id: 'many', text: 'Quantidade' },
];

<BouncyCheckboxGroup
  checkboxProps={{ textStyle: { textDecorationLine: 'none' }, style: { margin: 8 } }}
  style={{ flexWrap: 'wrap', justifyContent: 'space-evenly' }}
  data={checkboxData}
  initial={values.type as any}
  onChange={({ id }) => onChange(id)}
/>