-
-
Notifications
You must be signed in to change notification settings - Fork 59
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Select Multiple Checkboxes with one Checkbox #494
Comments
Hello @aliraza944 You should use |
Hey again @aliraza944, I made an example for you :) Here is the repo if you wanna check it out: Here is how you can do it with latest FilterCheckbox.tsximport React from 'react';
import {StyleProp, ViewStyle, StyleSheet} from 'react-native';
import BouncyCheckbox from 'react-native-bouncy-checkbox';
interface FilterCheckboxProps {
id: number;
isChecked: boolean;
style?: StyleProp<ViewStyle>;
onCheckboxPress: (checked: boolean, id: number) => void;
}
const FilterCheckbox: React.FC<FilterCheckboxProps> = ({
id,
style,
isChecked,
onCheckboxPress,
}) => {
const handleCheckboxPress = () => {
onCheckboxPress(!isChecked, id);
};
return (
<BouncyCheckbox
style={[styles.checkbox, style]}
isChecked={isChecked}
onPress={handleCheckboxPress}
/>
);
};
const styles = StyleSheet.create({
checkbox: {
width: 35,
height: 35,
},
});
export default FilterCheckbox; App.tsx:import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import FilterCheckbox from './src/FilterCheckbox.tsx';
interface AppProps {}
const data = [
{
id: 0,
label: 'All',
isChecked: false,
value: '',
},
{
id: 1,
label: 'Pre-Listing',
isChecked: false,
value: 'PreListing',
},
{
id: 2,
label: 'Offer Exclusive',
isChecked: false,
value: 'OfferExclusive',
},
{
id: 3,
label: 'Coming Soon',
isChecked: false,
value: 'ComingSoon',
},
{
id: 4,
label: 'Active Listings',
isChecked: false,
value: 'ActiveListing',
},
{
id: 5,
label: 'TNAS',
isChecked: false,
value: 'TNAS',
},
{
id: 6,
label: 'Under Contract',
isChecked: false,
value: 'Under contract',
},
{
id: 7,
label: 'Clear to Close',
isChecked: false,
value: 'Clear to close',
},
{
id: 8,
label: 'Closed',
isChecked: false,
value: 'Closed',
},
{
id: 9,
label: 'Cancelled',
isChecked: false,
value: 'Cancelled',
},
];
const App: React.FC<AppProps> = () => {
const [checkBoxes, setCheckBoxes] = useState(data);
const handleCheckboxPress = (checked: boolean, id: number) => {
if (id === 0) {
setCheckBoxes(
checkBoxes.map(item => ({
...item,
isChecked: checked,
})),
);
return;
}
setCheckBoxes(
checkBoxes.map(item =>
item.id === id ? {...item, isChecked: checked} : item,
),
);
};
return (
<View style={styles.container}>
{checkBoxes.map(item => (
<FilterCheckbox
id={item.id}
key={`${item.id}`}
isChecked={item.isChecked}
onCheckboxPress={handleCheckboxPress}
/>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
checkbox: {
width: 35,
height: 35,
},
});
export default App; So, simply you can use const handleCheckboxPress = (checked: boolean, id: number) => {
if (id === 0) {
setCheckBoxes(
checkBoxes.map(item => ({
...item,
isChecked: checked,
})),
);
return;
}
setCheckBoxes(
checkBoxes.map(item =>
item.id === id ? {...item, isChecked: checked} : item,
),
);
}; |
You can even check the FAQ part, I updated it https://github.com/WrathChaos/react-native-bouncy-checkbox/tree/master?tab=readme-ov-file#faq |
thanks it worked |
I am trying to select all of my checkboxes by pressing the All checkbox. The problem is their state updates and corresponding color changes but the check box doesn't get checked even though the prop isChecked is true for all of them.
Here is my bare minimum code
and this is the parent component
I am using the react-native-bouncy-checkbox version 3.0.6
The text was updated successfully, but these errors were encountered: