Nativebase: CheckBoxes not responding in List

Created on 27 Jun 2017 · 10Comments · Source: GeekyAnts/NativeBase

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....

Source

hszeto

Most helpful comment

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;

hszeto on 28 Jun 2017

👍9 ❤2

All 10 comments

@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

shivrajkumar on 27 Jun 2017

🎉2 👍2

@shivrajkumar Thanks for the help! it works... however, only 1 user can be checked. Sort of behaving like a radio button now....

hszeto on 27 Jun 2017

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;

hszeto on 28 Jun 2017

👍9 ❤2

Was this been fixed on the new version like it was said? I'm on 2.3.1 and still have the same issue. The workaround doesn't work for me either :(
I'm trying to load the list dynamically so the way I set the checked

<CheckBox
                        checked={this.state.items.includes(item) ? true : false}
                        onPress={() => this.onToggleCheckBox(item)}/>

However after I do a state update to the items the UI doest update.

Nandez89 on 4 Oct 2017

Same here. Using it in a FlatList and it's not updating after toggling the checked state.

Edit: got it working using an array in this.state

maartenvandillen on 28 Oct 2017

Same issue. Checkbox not getting ticked.

jayeshjain24 on 27 Dec 2017

@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>
    );
  }
};