Skip to content

Different components for selected and unselected checkboxes. #107

Open
@Yimura

Description

@Yimura

Is your feature request related to a problem? Please describe.

I'm trying to use a component to indicate which item is currently selected in the list, to my horrified surprise, the checkbox is always present and just hidden because the background of the checkbox is white and thus hiding it.

Having looked at the code there's no conditional way of showing a different component depending on if the item is selected or not, it's just always rendered.

{checkboxComponent || (
<Image
source={require('../../asset/check.png')}
style={[
{
height: checkboxSize || CHECKBOX_SIZE,
width: checkboxSize || CHECKBOX_SIZE,
},
]}
/>
)}

Describe the solution you'd like
Either allow for some conditional functional method of specifying different components.

// adapted type
export type TCheckboxControls = {
  checkboxSize?: number;
  checkboxStyle?: ViewStyle;
  checkboxLabelStyle?: TextStyle;
  checkboxComponent?: (selected: boolean) => React.ReactNode | React.ReactNode;
  checkboxDisabledStyle?: ViewStyle;
  checkboxUnselectedColor?: ColorValue;
};

// modified Checkbox code
const component = typeof checkboxComponent === 'function' ? checkboxComponent(value) : checkboxComponent;

Or set 2 different properties, one for a selectedCheckboxComponent and one normal checkboxComponent.

const component = value ? selectedCheckboxComponent : checkboxComponent;

First one will keep the original functionality without breaking anything, second one will add another property, making an already crowded component more crowded.
However I understand if the first option might not be the preferred as this method of functionally returning different things has not been used before in this code base.

Describe alternatives you've considered

Changing the color design of my application to hide a couple of checkboxes or outright switching to a different package.
Both of which seem absolutely ridiculous.

Additional context
Forcing the background to black on the example page shows the issue:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions