React Native Elements Checkbox
Question
I'm using React Native Elements CheckBox inside List Items, of Flat List.
import React, { Component } from "react"; import { View, Text, StyleSheet, FlatList } from "react-native"; import axios from 'axios'; import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base'; import Icon from 'react-native-vector-icons/Ionicons'; import { List, ListItem, SearchBar, CheckBox } from "react-native-elements"; // const itemId = this.props.navigation.getParam('itemId', 'NO-ID'); // const otherParam = this.props.navigation.getParam('otherParam', 'some default value'); class TeacherSubjectSingle extends Component{ static navigationOptions = { header : null } // static navigationOptions = { // headerStyle: { // backgroundColor: '#8E44AD', // }, // headerTintColor: '#fff', // } state = { class_id: null, userid: null, usertype: null, student_list: [], faq : [], checked: [], } componentWillMount = async () => { const {class_id, student_list, userid, usertype} = this.props.navigation.state.params; await this.setState({ class_id : class_id, student_list : student_list, userid : userid, usertype : usertype, }) console.log(this.state.class_id) var result = student_list.filter(function( obj ) { return obj.class_section_name == class_id; }); this.setState({ student_list: result[0] }) } renderSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#CED0CE", }} /> ); }; checkItem = item => { const { checked } = this.state; if (!checked.includes(item)) { this.setState({ checked: [...checked, item] }); } else { this.setState({ checked: checked.filter(a => a !== item) }); } }; render(){ return ( <Container> <Header style={{ backgroundColor: "#8E44AD" }}> <Left> <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}> <Icon name="ios-arrow-dropleft" size={24} color='white' /> </Button> </Left> <Body> <Title style={{ color: "white" }}>{this.state.class_id}</Title> </Body> <Right /> </Header> <View style={{flex: 1, backgroundColor: '#fff'}}> <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}> <FlatList data={this.state.student_list.students} renderItem={({ item }) => ( <ListItem // roundAvatar title={<CheckBox title={item.name} onPress={() => this.checkItem(item.userid)} checked={this.state.checked.includes(item.userid)} />} // subtitle={item.email} // avatar={{ uri: item.picture.thumbnail }} containerStyle={{ borderBottomWidth: 0 }} onPress={()=>this.props.navigation.navigate('IndividualChat', { rc_id: item.userid, userid: this.state.userid, usertype: this.state.usertype, subject_name: this.state.student_list.subject_name })} /> )} keyExtractor={item => item.userid} ItemSeparatorComponent={this.renderSeparator} /> </List> </View> </Container> ); } } export default TeacherSubjectSingle; const styles = StyleSheet.create({ container:{ flex:1, alignItems:'center', justifyContent:'center' } });
Above is my code for the same, I have tried every possibility and checked the GitHub page for the same, but my items are not getting checked if I press on the checkbox.
My renderItem will have an array to render which is having a field like 'name' and 'userid'.
I want to save selected ids to an array so that I can pass that as a prop to the next screen.
Thanks in advance
1 answers
solution1
1 2019-04-07 23:16:41
there is checkBox property of ListItem which you can use with CheckBox props. I am working on a different project and It comes handy so far.
you can use props of CheckBox as below,
<ListItem
title={item.data.toString()}
subtitle={item.type}
checkBox={{ checked: this.state.checked }}
onPress={() => {
this.props.filters(item.id);
}}
/>
Also, you can check the documentation for other props and details.
hope that this would be helpful .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.