dinamicaly change the status of checked

[joaosauer]

Hi,

I'm trying to dinamically change the status of the checkBox, because I want to have one checkBox that we can call "Check All", and as the name says, it will change all the status of the children checkbox to true or false, depending on what this one is set. I made the code but, when I change the state of the checked object, the screen is not updating the children Checkbox to what was suppose to be(I can confirm that the status was changing using the logs). It this not yet implemented, or is it a bug or I'm doing something wrong? (I'm using version 1.0.4) Code:

export default class MainScreen extends React.Component {
    constructor(props) {
        super(props);

        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id});
        this.state = {
            list: [],
            dataSource: this.ds.cloneWithRows([]),
            check: {},
            checkAll: false,
        };
    }

    static navigationOptions = {
        title: 'Main',
        headerVisible: false
    };

    _checkAll = () => {
		const { checkAll, list, check } = this.state;
		const callback = () => {
		  console.log("checkAll", checkAll);
		  list.map(student => {
			  check[student.name].checked = !check[student.name].checked;
			  console.log("check: " + student.name, check[student.name].checked);
			  this.setState({check});
		  });
		}
		this.setState({checkAll: !this.state.checkAll}, callback);
    }
    
    _checkStudent = (student) => {
		console.log("checking student", student);
		const { check } = this.state;
		console.log("checking check", check);
		check[student.name].checked = !check[student.name].checked;
		this.setState({check});
    }

    render() {
        // const { navigate } = this.props.navigation;
        const { check, checkAll, dataSource } = this.state;
        return (
            <Image source={require('./../images/background_no_logo.png')} style={styles.container}>
				<CheckBox
					style={{padding: 10}}
					onClick={()=>this._checkAll()}
					isChecked={this.state.checkAll}
					rightText={this.text.checkText}
				/>
				<ListView
				   style={styles.listView}
				   dataSource={this.state.dataSource}
				   enableEmptySections={true}
				   renderRow={(student) =>
					   <View  style={styles.row}>
						   <CheckBox
							   style={{paddingLeft: 10, paddingRight:10}}
							   onClick={() => this._checkStudent(this.state.check[student.name])}
							   isChecked={this.state.check[student.name].checked}
						   />
						   <Text style={{color:'#336463', fontSize:20, flex: 1}}>
							   {`${student.name}`}
						   </Text>
					   </View>
				   }
				/>
            </Image>
        )
    }
}

[rahulmishra-goibibo]

i am facing the same problem. Exactly the same issue that the children checkbox are not getting updated. Any help would be appreciated.

[joaosauer]

Well, this is not the fix and is not my intention to downvote the author's hard work, but in the end I just used another component: https://github.com/sconxu/react-native-checkbox From other forum, there was a person that helped me with giving me an example how to make it work: https://gist.github.com/felipemendesbraga/20ebbb4e7527b3b782a1c0c47ae1a72e

[ianhowe76]

The latest version of this component should implement the checkbox as uncontrolled:

https://github.com/crazycodeboy/react-native-check-box/commit/eb424758b550bc039c4a494ae8dd4236ee687c97

[lolobosse]

Needs to be released though...

[lolobosse]

Btw, quickfix for now:

Replace the original dependency in your package.json by:

"react-native-check-box": "git://github.com/crazycodeboy/react-native-check-box.git#dbd40836b09f7bc0316d13e30abdb66a799c5077"

[AishwaryaSurana]

I too am unable to implement check all functionality

[DavitVosk]

Guys you can use https://github.com/DavitVosk/react-native-check-box.git fork

[DavitVosk]

Guys you can use https://github.com/DavitVosk/react-native-check-box.git fork