React-native with native-base: data change is not reflected

Question

I get my list view as well as data is rendered. But when I click/touch the checkbox it doesn't toggle the selection. It just remains on the same state as it was at the beginning.

Thanks in advance.

export default class FlatListBasics extends Component {

constructor() {
    super();
    this.state = {
        data: [
            {key: 'Devin', done: true},
            {key: 'Jackson', done: true},
            {key: 'James', done: true},
            {key: 'Joel', done: true},
            {key: 'John', done: true},
            {key: 'Jillian', done: false},
            {key: 'Jimmy', done: true},
            {key: 'Julie', done: true}
        ]
    }
}

_renderRow(rowData) {
    return <ListItem>
        <CheckBox checked={rowData.item.done} onPress={
            () => {
                rowData.item.done = !rowData.item.done;
                return rowData;
            }
        }/>
        <Text>  {rowData.item.key}</Text>
    </ListItem>
}

render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={this._renderRow}
            extraData={this.state}
        />
    );
}

}

score 1 · Accepted Answer · answered May 30 '18 at 13:02

Change Flatlist renderItem props

renderItem={({index, item}) => this._renderRow(index, item)}

Change _renderRow method

_renderRow = (index, rowData) => {
     return <ListItem>
         <CheckBox checked={rowData.item.done} 
                   onPress={()=>{
                         this.setState((prevState, props) => ({ 
                         data[index].done = !prevState.data[index].done 
                         }));
                   }}
             />
         <Text>  {rowData.item.key}</Text>
       </ListItem>
}

You have to change the state of your list item for update list.

score 0 · Answer 2 · answered May 30 '18 at 14:01

I suggest you create a component for each item that you need to render on FlatList, and control the change state with shouldComponentUpdate:

class CustomListItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            checked: props.checked
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return this.state.checked !== nextState.checked 
    }

    render() { 
        const { text } = this.props
        const { checked } = this.state
        return (
        <ListItem>
          <CheckBox checked={checked} 
           onPress={()=> {
              this.setState({ checked: !checked })
           }}
           />
           <Text>{text}</Text>
        </ListItem>
        )
    }
}

So change _renderRow to use it, like that:

_renderRow(rowData) {
    const { done, key } = rowData.item
    return (
       <CustomListItem 
        text={done}
         checked={key}
       />
    )
}

React-native with native-base: data change is not reflected

2 Answers2