In React-native, how to handle checkbox in Listview?

Question

In my reaction-based application, I am trying to show my contact details in the application using checkboxes for selection. here is my code:

<ListView dataSource={this.state.dataSource} renderRow={(rowData,sectionID,rowID) => <TouchableHighlight onPress={() => this.goRideDetails(rowData)}> <Text style={styles.rideHeader}>{rowData.name} </Text> <CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/> </TouchableHighlight> }/> 

In my view, a checkmark is displayed on each line, but does not work.

Anyone can help me. Thanks in advance.

Answer 1

You can easily do this with component separation. Please have a look here:

 export default class ContactList extends Component { static propTypes = { contacts: React.PropTypes.array, } static defaultProps = { contacts: [], } constructor(){ super(); this._renderRow = this._renderRow.bind(this); } _renderRow(rowData,sectionID,rowID) { return <Contact info={ rowData } />; } render() { return ( <ListView dataSource={ this.props.contacts } renderRow={ this._renderRow } /> ); } } export class ContactList extends Component { static propTypes = { info: React.PropTypes.object.isRequired, } constructor(){ super(); this.goRideDetails = this.goRideDetails.bind(this); this.setChecked = this.setChecked.bind(this); } goRideDetails() { //your logic here } setChecked() { this.props.info.checked = !this.props.info.checked; //will be much better to do it with redux and action creators } render() { return ( <TouchableHighlight onPress={ this.goRideDetails }> <Text style={ styles.rideHeader }>{this.props.info.name} </Text> <CheckBox checked={ this.props.info.checked } onCheckBoxPressed={ this.setChecked } /> </TouchableHighlight> ); } } 

After that, you can simply call:

 <ContactList contacts={this.state.dataSource} /> 

in jsx and voila.

Important Note. Do not use array functions inside jsx code blocks.

Important Note 2: Try to start using a shortcut or stream to maintain the state of your application. This will provide much better code design.

Hope this helps.

Answer 2

  import React , {Component} from 'react' import { Text, View, ListView, StyleSheet, TouchableOpacity, Image, } from 'react-native' import CheckBox from 'react-native-checkbox' var Folder = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) var folder = '' ////// all the new folder var check_folder = [] ////// all the check box conditions class ApproveContent extends Component { ///////// all the upper thing that are global variable for this script is has same value as that of the state the only reason we are using this because of the layout update ////////// state={ folder:[], data:[], check:[]/////// this need to do just to upadte the layout of the check box } render(){ return( <View style = {{flex:1,backgroundColor:'white',alignItems:'center'}}> <ListView dataSource={Folder.cloneWithRows(this.state.folder)} renderRow={(rowData,rowID,sectionID) => <View style = {{ alignItems: 'center',margin:5}}> <TouchableOpacity style = {{width:Dimension.ScreenWidth/1.2,height:Dimension.ScreenHeight/6,flexDirection: 'row',alignItems:'center'}} onPress={() => {}}> <CheckBox label='' labelBefore={false} checked={this.state.check[sectionID]} checkboxStyle = {{marginLeft: 20}} onChange={(checked) => { this.setState({ check:!this.state.check }) if(check_folder[sectionID] == false){ check_folder[sectionID] = true this.setState({ check:check_folder// has to do this because we cant change the single element in the array }) }else{ check_folder[sectionID] = false this.setState({ check:check_folder// has to do this because we cant change the single element in the array }) } console.log(check_folder)a }} /> </TouchableOpacity> </View> } /> </View> )} } export default ApproveContent const style = StyleSheet.create({ TextStyle:{ fontFamily: 'Roboto-Bold', fontSize:15, }, approveButton: { bottom:0, left:0, alignItems: 'center', } })