Real list view

Question

Real list view

I am trying to create a Listview in react native, each row has a checkbox and body text. I am using the nativebase package for this. http://nativebase.io/docs/v2.0.0/components#checkbox

I have some problems when I click on checkbox, the checkbox does not change state to false. How can I get the value from the body text when I click the checkbox?

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

class ListExample extends Component {
  state = {
    pressed: true,
    value: ""
  };

  onCheckBoxPress() {
    console.log(this);
    this.setState({ pressed: false});
    this.setState({ value: BODYVALUE});
  }

  render() {
    var items = [ "test1", "test2", "test3", "test4", "test5", "test6" ];
    return (
      <Container>
      <Content>
          <List dataArray={items} renderRow={(data) =>
              <ListItem>
                <CheckBox onPress={this.onCheckBoxPress.bind(this)} checked={this.state.pressed} />
                <Body>
                  <Text>{data}</Text>
                </Body>
              </ListItem>
          } />
      </Content>
  </Container>
    );
  }
}

export default ListExample;

+3

checkbox react-native native-base

lolix 24 Mar 17 at 23:50

source to share

2 answers

Matt aft · Answer 1 · 2017-03-25T00:06:22+0000

I don't believe the list will be re-rendered if it didn't give new data, try this:

class ListExample extends Component {
  state = {
    pressed: true,
    value: ""
    list: [ "test1", "test2", "test3" ]
  };

  onCheckBoxPress = (value) => {
    console.log(this);
    this.setState({ pressed: false, value, list: ["test4", "test5", "test6"]});
  }

  render() {
    return (
      <Container>
      <Content>
          <List dataArray={this.state.list} renderRow={(data) =>
              <ListItem>
                <CheckBox onPress={() => this.onCheckBoxPress(data)} checked={this.state.pressed} />
                <Body>
                  <Text>{data}</Text>
                </Body>
              </ListItem>
          } />
      </Content>
  </Container>
    );
  }
}

Jose fernandez · Answer 2 · 2017-09-13T02:55:54+0000

I had a similar problem, in my case I needed to keep the selected row ids, this is the solution that applies.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ListView
} from 'react-native';
import { typography } from 'react-native-material-design-styles';
import { Container, Content, Item, List, CheckBox, Body, ListItem, Text } from 'native-base';
import ItemLot from './item.js';

export default class LotsListDevolutionClient extends Component {
  state = { 
    lots: [
      {
        id: 1,
        serie: 'sorteo',
        almacen: 'principal',
        inicio: 1,
        fin: 50
      },
      {
        id: 2,
        serie: 'sorteo',
        almacen: 'principal',
        inicio: 51,
        fin: 100
      }
    ],
    selectedLots: [],
    token: ''
  };

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

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

    this.setState({
      selectedLots: tmp
    });
    console.warn('selected: ', this.state.selectedLots)
  }

  _renderItem(item){
    return (
      <View style={styles.row}>
        <CheckBox checked={item.check} onPress={() => this.onCheck(item)} />
        <Item lot={item}/>
      </View>
    )    
  }

  render() {
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    return (
      <Container>
        <Content style={styles.content}>
          <Text style={[typographyStyle.paperFontTitle, {alignSelf: 'center'}]}>Seleccione los lotes</Text>
          <Item>
            <ListView
              enableEmptySections={true} 
              dataSource={ds.cloneWithRows(this.state.lots)}
              renderRow={(item) =>
                <ListItem style={styles.listItem}>
                  <CheckBox
                    checked={this.state.selectedLots.includes(item.id) ? true : false}
                    onPress={()=>this.onCheckBoxPress(item.id)}
                  />
                  <ItemLot lot={item}/>
                </ListItem>
              }
            />
          </Item>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: { 
    flex: 1,
    backgroundColor: 'white'
  },
  row:{
    flexDirection: 'row',
   justifyContent: 'flex-start'
  },
  listItem: {
    backgroundColor: '#DFDFDF',
    elevation: 5,
    margin: 4
  },
  content: {
    flexDirection: 'column'
  }
});

const typographyStyle = StyleSheet.create(typography);

Real list view

More articles: