Description
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.
react-native-select/src/components/CheckBox/index.tsx
Lines 46 to 56 in 8867226
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: