React-native-calendars: [Redux Component - Agenda] renderItem() is not called when props are updated

[matieux]

Hi,

I'm following the best practices from Presentational and Container Components: I wrap Agenda in a stateless component, contained by a Redux stateful container. I pass items data via the props

1. Rendering works well with Redux initial state (items array empty)
2. Rendering works well after update with the items data from Redux action => API
3. __Rendering of the items does'nt work after another update from another action (update of an item in a modal view)__

I investigated 3 :

• Props updates are correctly propagated to Agenda
• Items are updated. I can track it because I transform the input data before passing them as arguments
• __renderItem() is not called__
• renderItem() is called and renders the updated values when I scrolled up/down the calendar

=> Is there anything I miss? Or is there a way to trigger renderItem()?

Thanks

For info, here is my Agenda component:

```
const ScheduleAgenda = ({ schedule = { }, toggleEventModal = null }) => {
const { afterDate, beforeDate } = schedule
return (
items={eventToAgendaItem(schedule)}
// loadItemsForMonth={(month) => { console.log('trigger items loading') }}
// onCalendarToggled={(calendarOpened) => { console.log(calendarOpened) }}
// onDayPress={day => onDayPress(day, schedule)}
// onDayChange={(day) => { console.log('day changed') }}
selected={moment.utc().format('YYYY-MM-DD')}
minDate={afterDate}
maxDate={beforeDate}
pastScrollRange={PAST_SCROLL_RANGE}
futureScrollRange={FUTURE_SCROLL_RANGE}
renderItem={(item, firstItemInDay) => renderItem(item, firstItemInDay, toggleEventModal)}
// renderDay={renderDay}
renderEmptyDate={renderEmptyDate}
renderKnob={renderKnob}
renderEmptyData={() => { return () }}
rowHasChanged={(r1, r2) => { return r1.text !== r2.text }}
hideKnob={false}
theme={theme}
// style={{}}
/>
)
}

[matieux]

Problem solved: my function rowHasChanged was not doing the right job, so the items were not rendered again.

Comment about the clarity of the function / documentation: why use the word row when the actual compared data are items? Maybe if the function were called itemHasChanged, the cause of the problem would have bumped earlier to me.

Anyway, thanks for this great component!

[vitoravale]

@matieux How did you solve it? I'm having the same issue

[matieux]

Hi @vitoravale rowHasChanged is used to compare the before / after item component and trigger a new rendering or not => You must adapt the default function to your own item attributes

[adenj]

Just wanted to thank you @matieux. Was tearing my hair out trying to figure this one out. And I agree, the rowHasChanged naming doesn't make a whole lot of sense.