SolvedNativeBase CheckBoxes not responding in List

What's the proper way to handle a list of checkboxes? I've the following code, but the checkboxes just don't respond to my clicks on both iOS and Android emulators.

I have:

"native-base": "2.1.3",
"react": "16.0.0-alpha.3",
"react-native": "0.43.2", 

Here is the code:

import React, { Component } from 'react';
import { Container, Content, Item, List,
         CheckBox, Body, ListItem, Text } from 'native-base';

class SelectFriends extends Component {
  constructor(props) {
    super(props);

    this.state = {
      friends: [{ id: 10, name:"Gundam" },
                { id: 20, name:"Rambo" },
                { id: 30, name:"Mickey Mouse" } ],
      checkBoxChecked: false
    };
  }


  onCheckBoxPress(id) {
    console.log( "Checked!" );
    console.log( id );
    this.setState({
      checkBoxChecked: !this.state.checkBoxChecked
    });
  }

  render() {
    return(
      <Container>
        <Content>
          <Item>
            <List dataArray={this.state.friends}
              renderRow={(friend) =>
                <ListItem>
                  <CheckBox
                    checked={this.state.checkBoxChecked}
                    onPress={()=>this.onCheckBoxPress(friend.id)}
                  />
                  <Body>
                    <Text>{friend.name}</Text>
                  </Body>
                </ListItem>
              }
            >
            </List>
          </Item>
        </Content>
      </Container>
    );
  }
};

export default SelectFriends;

The console.log works on clicks... so it's somewhat working...

I've tried nativebase version 2.1.4 and 2.1.5. Got tons of build errors, so I went back to 2.1.3....

11 Answers

✔️Accepted Answer

Thanks @shivrajkumar . I made some tweaking to your code... the checkboxes work now.

import React, { Component } from 'react';
import { ListView } from 'react-native';
import { Container, Content, Item, List,
         CheckBox, Body, ListItem, Text } from 'native-base';

class SelectFriends extends Component {
  constructor(props) {
    super(props);

    this.state = {
      friends: [{ id: 10, name:"Gundam" },
                { id: 20, name:"Rambo" },
                { id: 30, name:"Mickey Mouse" } ],
      selectedFriendId: []
    };
  }


  onCheckBoxPress(id) {
    let tmp = this.state.selectedFriendId;

    if ( tmp.includes( id ) ) {
      tmp.splice( tmp.indexOf(id), 1 );
    } else {
      tmp.push( id );
    }

    this.setState({
      selectedFriendId: tmp
    });
  }

  render() {
    return(
      <Container>
        <Content>
          <Item>
            <ListView
              enableEmptySections={true} 
              dataSource={ds.cloneWithRows(this.state.friends)}
              renderRow={(friend) =>
                <ListItem>
                  <CheckBox
                    checked={this.state.selectedFriendId.includes(friend.id) ? true : false}
                    onPress={()=>this.onCheckBoxPress(friend.id)}
                  />
                  <Body>
                    <Text>{friend.name}</Text>
                  </Body>
                </ListItem>
              }
            />
          </Item>
        </Content>
      </Container>
    );
  }
};

export default SelectFriends;

Other Answers:

@jayeshjain24 tried hszeto's code with ReactNative FlatList.

Gif

checkbox

Code

import React, { Component } from 'react';
import { Container, Content, Item, CheckBox, Body, ListItem, Text } from 'native-base';
import { FlatList } from 'react-native'

export default class SelectFriends extends Component {
  constructor(props) {
    super(props);
    this.state = {
      friends: [{ id: 10, name: "Gundam" },
      { id: 20, name: "Rambo" },
      { id: 30, name: "Mickey Mouse" }],
      selectedId: 10
    };
  }

  onCheckBoxPress(value) {
    this.setState({
      selectedId: value
    });
  }

  render() {
    return (
      <Container>
        <Content>
          <Item>
            <FlatList
              extraData={this.state}
              keyExtractor={(item, index) => item.id}
              data={this.state.friends}
              renderItem={({ item }) => {
                return <ListItem>
                  <CheckBox
                    checked={this.state.selectedId == item.id}
                    onPress={() => this.onCheckBoxPress(item.id)}
                  />
                  <Body>
                    <Text>{item.name}</Text>
                  </Body>
                </ListItem>
              }}
            />
          </Item>
        </Content>
      </Container>
    );
  }
};

@hszeto The issue seems to be with List. Will be fixed in next release.
Use ListView of React Native for now. Something like this
screen shot 2017-06-27 at 7 26 18 pm

For those who have an issue with Flatlists, add this as a prop to Flatlist itself:
extraData={this.state}

This is a working example of FlatList with multiple select:

screen shot 2018-02-12 at 12 23 15 am

screen shot 2018-02-12 at 12 23 39 am

More Issues: