React-native-calendars: Update Agenda items

[matwii]

I'm having a problem updating Agenda items. I have an app where the user are participating in events. Each time I navigate to my Agenda screen I set that a redux method are getting all joinedevents and these are mapped to the agendascreen props I know for sure that I'm getting the correct events because when I console log them I am getting the correct ones, but the agenda won't display the new ones or the events I have quit. I want to update the items so that I won't have to load the agenda each time I navigate because it is using a lot of time loading.

This is my code:
`import React, { Component } from 'react';
import {
StyleSheet,
} from 'react-native';
import { EventItem } from '../../components/event';
import {Agenda} from 'react-native-calendars';
import { connect } from 'react-redux';

class AgendaScreen extends Component {
constructor(props) {
super(props);
this.state = {
items: {},
events: props.events
};
}

render() {
    return (
        <Agenda
            items={this.state.items}
            loadItemsForMonth={this.loadItems.bind(this)}
            renderItem={this.renderItem.bind(this)}
            renderEmptyDate={this.renderEmptyDate.bind(this)}
            rowHasChanged={this.rowHasChanged.bind(this)}
        />
    );
}

loadItems(day) {
    setTimeout(() => {
        for (let i = -15; i < 85; i++) {
            const time = day.timestamp + i * 24 * 60 * 60 * 1000;
            const strTime = this.timeToString(time);
            if (!this.state.items[strTime]) {
                this.state.items[strTime] = [];
                this.state.events.map((e) => {
                    const eventTime = this.timeToString(e.datetime);
                    if (eventTime === strTime){
                        this.state.items[strTime].push({
                            event: e
                        });
                    }
                })
            }
        }
        const newItems = {};
        Object.keys(this.state.items).forEach(key => {newItems[key] = this.state.items[key];});
        this.setState({
            items: newItems
        });
    }, 1000);
}

renderItem(item) {
    return (
        <EventItem
            event={item.event}
            navigation={this.props.navigation}
            reset={this.props.reset}
        />
    );
}

renderEmptyDate() {
    return (
         null
    );
}

rowHasChanged(r1, r2) {
    return r1.name !== r2.name;
}

timeToString(time, datetime) {
    const date = time ? new Date(time) : null;
    return time ? date.toISOString().split('T')[0] : datetime.toISOString().split('T')[0];
}

}

function mapStateToProps({ events }) {
return { events };
}

export default connect(mapStateToProps, null)(AgendaScreen);

const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
flex: 1,
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 17
},
emptyDate: {
height: 15,
flex: 1,
paddingTop: 30
}
});`

[tautvilas]

Hi, could you provide me with a clean component that I could copy-paste and reproduce your problem? Currently you require external dependencies that are not provided here (e.g. ../../components/event). That makes it hard to reproduce your problem.

[anlumo]

I just ran into this issue. The solution is that your rowHasChanged implementation is incomplete, it has to return true when the state of your item has changed between r1 and r2.