[SOLVED] Native-Base - CheckBox inside List not getting checked

Native-Base - CheckBox inside List not getting checked

I have imported CheckBox from NativeBase. On clicking the Checkbox, it calls the toggleCheckBox function to either add or remove the item.ids from the array and also set the flag to true or false based on the contents of the array.

I can see that the toggleCheckBox function works properly and it sets the array with item ids properly and the flag is also fine on click of the CheckBox. But, the checkbox inside the ListItem is not checked when the checkbox is clicked though the toggle function is called properly.

I also noticed that the log "MS CB2: " right above the List is printed after clicking the CheckBox but the log inside the List 'MS insideList :' is not printed. I am assuming that List is not rendered after the toggleCheckBox function is called. Here is the code:

class MSScreen extends Component {
    constructor(props){
        super(props);
        //this.toggleCheckbox = this.toggleCheckbox.bind(this);
        this.state = {
          isLoading: true,
          checkboxes : [],
          plans: {},
        };
    }

    componentDidMount(){
        console.log("MS inside componentDidMount");

        fetch('http://hostname:port/getData')
            .then((response) => {console.log('response'); return response.json();})
            .then((responseJson) => {console.log('responseData: '+responseJson); this.setState({isLoading : false, plans : responseJson}); return;})
            .catch((err) => {console.log(err)});  
    }

    toggleCheckbox(id) {
        let checkboxes = this.state.checkboxes;

        if(checkboxes && checkboxes.includes(id)){
          const index = checkboxes.indexOf(id);
          checkboxes.splice(index, 1);
        } else {
          checkboxes = checkboxes.concat(id);
        }

        this.setState({checkboxes});
        console.log("MS check a4: "+checkboxes && checkboxes.includes(id))
    }

    render() {

        if (this.state.isLoading) {
            return <View><Text>Loading...</Text></View>;
        }

        const plans = this.state.plans;
        const { params } = this.props.navigation.state.params;
        const checkboxes = this.state.checkboxes;
        console.log("MS CB1: "+checkboxes)

        return (
            <Container>
                <Content>
                    <View>
                        {console.log("MS CB2: "+checkboxes)}
                        <List
                            dataArray={plans.data}
                            renderRow={(item, i) => {
                                console.log('MS insideList : '+checkboxes && checkboxes.includes(item.id))
                                return(
                                <ListItem 
                                    key={item.id}
                                    >
                                    <Left>
                                        <CheckBox
                                            onPress={() => this.toggleCheckbox(item.id)}
                                            checked={checkboxes && checkboxes.includes(item.id)}                                            
                                            />
                                    </Left>
                                    <Text>
                                        {item.name}
                                    </Text>
                                </ListItem>)}}
                        />
                    </View>
                </Content>
            </Container>
        );
    }
}

How do I get the CheckBox to get checked inside the List?

For the benefit of the other users, here is the code fix based on the suggestion from Supriya in the comments below:

SOLUTION

<FlatList
    extraData={this.state}
    data={plans.data}
    keyExtractor={(item, index) => item.id}
    renderItem={({item}) => {
        const itemName = item.name;     
        return(
        <ListItem>
                <CheckBox
                    onPress={() => this.toggleCheckbox(item.id)}
                    checked={checkboxes && checkboxes.includes(item.id)}                                            
                    />
            <Body>
                <Text style={styles.planText}>
                    {item.name}
                </Text>
            </Body>
        </ListItem>)}}
/>

Version:

native-base@2.3.5

react-native@0.50.4

Device: Android

CRNA app with Expo

Solution