React-native-calendars: please tell me how to re-render data in Agenda when i update the data

[kewin1807]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

1-2 sentences describing the problem you're having or the feature you'd like to request

Expected Behavior

What action did you perform, and what did you expect to happen?

Observed Behavior

What actually happened when you performed the above actions?

If there's an error message, please paste the full terminal output and error message in this code block:

Error text goes here!

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

1. Phone/emulator/simulator & version:

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

[FabianEhringer]

+1 Same problem here

Description

All my agenda items are stored in the current state of my component. When I update the state using
this.setState({ items: newItems }) the agenda does not re-render.

Expected Behavior

When the new state is set, the whole agenda component should re-render and display my new/changed items.

Observed Behavior

Nothing happens. The agenda does not re-render. Even when I force it with this.forceUpdate()

Environment

• [email protected]
• [email protected]
• [email protected]
• iOS Simulator (iOS 11.1)
  

  Reproducible Demo

```
// I want to update my agenda when the component
// receives new props from the parent component
componentWillReceiveProps(nextProps, oldProps) {
if (nextProps.getEvents && this._day && nextProps.getEvents !== oldProps.getEvents) {
this.loadItemsForMonth(this.selectedDay);
}
}

// Create a list of days for the current month (+- 1 month)
loadItemsForMonth = (day) => {
const items = {};
this.selectedDay = day;
const month = moment(${day.year}-${day.month - 1}-01, 'YYYY-MM-DD');
for (let j = 0; j <= 93; j += 1) {
items[${month.format('YYYY-MM-DD')}] = [];
month.add(1, 'days');
}
const events = this.props.getEvents();
Object.keys(events).forEach((key) => {
items[key] = events[key];
});
this.setState({ items });
};

render() {
return (
items={this.state.items}
loadItemsForMonth={day => this.loadItemsForMonth(day)}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
firstDay={1}
theme={theme}
/>
);

[MIt9]

Hi. You would to try update it like this
<Agenda items={JSON.parse(JSON.stringify(this.state.items))} loadItemsForMonth={this._loadItems} renderItem={this._renderItem} renderEmptyDate={this._renderEmptyDate} rowHasChanged={this._rowHasChanged} />

[FabianEhringer]

I found my problem. The reason my agenda didn't update was the _rowHasChanged function.

_rowHasChanged = (r1, r2) => r1.id !== r2.id;
==>
_rowHasChanged = (r1, r2) => r1 !== r2;

I didn't realise what the function was doing. I thought it would be necessary for the list view in my agenda to keep track when I'm scrolling. But it when I update my items, eg. change the title of an event, the IDs are still the same and the agenda thinks nothing has changed.

[arled]

I got this working using redux. I have a Reset to initial state reducer:

    case RESET_AGENDA:
      return {
        ...initialState,
      };

P.s. This solution only works if you're using redux.