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

try 'defaultChecked={this.state.checked.includes(item.userid)}' instead of 'checked={this.state.checked.includes(item.userid)}' — Vindhyachal Kumar
– Vindhyachal Kumar, Commented Jul 14, 2018 at 11:02

Ozkan Abdullahoglu · Accepted Answer · 2019-04-07 23:16:41Z

3

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.

add a checkbox on the right side (object with the props of the React Native Elements CheckBox component)

hope that this would be helpful .

answered Apr 7, 2019 at 23:16

Ozkan Abdullahoglu

1861 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qasim Over a year ago

Is there a way to use this.state.checked in a functional component?

Ozkan Abdullahoglu Over a year ago

Actually, it was a component that I used into a class-based component. That is why you see this.state... here.

Collectives™ on Stack Overflow

React Native Elements Checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related