React Native ListView not updating on change

[MarkEstefanos]

Appending to the list is working, but modifying elements isn't. Here's my code:

@observer
class TodoList extends Component {

  renderRow = (rowData) => {
    return (
      <CheckBox 
      checked={rowData.done} title = {rowData.body} 
      onPress = {() => actions.toggleTodo(this.props.index, rowData.index)}/>
    )
  }

  render() {
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => JSON.stringify(r1) !== JSON.stringify(r2)})
    return (
        <ListView
          dataSource={ds.cloneWithRows(state.todoLists[this.props.index].todos.slice())}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

  @action toggleTodo(list, index) {
    var todo = state.todoLists[list].todos[index]
    todo.done = !todo.done
    state.todoLists[list].todos[index] = todo
  }

I tried wrapping renderRow in an observer tag as suggested here, but that crashes the app.

[MovingGifts]

That's not a mobx related issue, as it's React Native's issue for not refreshing on a change of a list view row item, only on newly created items. mobx does indeed update the array, so it does its part, to modify a list view row item in React Native, you have to do what ide suggested in your link, (also reread skleest's comment before ide's solution). By grabbing the index of the item from the old array, overwriting that particular item using its index with the new item/item property, and then setting the new array as the data source, that's how React Native picks up the change.

Again, this is an issue with React Native, not mobx.

[MarkEstefanos]

Well, that was embarrassingly simple. Thanks for the help!