React-native-calendars: How to display spinner with Agenda items?

[henrikra]

I have implemented with Agenda component a nice view. My problem is that I would like to show spinner in each items when I want. But looks like Agenda component won't rerender it's items if items object's keys stay the same. But all the items have boolean like isLoading which is not affecting in rerendering. My component which is rendering Agenda is rerendering so there be must be something I do not get with Agenda component

TLDR; How Agenda determines when to rerender items?

Tell me if you need more details :)

[tautvilas]

Hi, not sure if I understand question. Try treating items as immutable, this will make sure that rerendering happens. See #65 for similar problem. If you need more help please provide gif/code snippet. thx

[henrikra]

I am using Ramda as I am changing shape of data so everything should be immutable since Ramda does not mutate anything.

Here is code example:

import React, {Component} from 'react';
import {View} from 'react-native';
import moment from 'moment';
import {connect} from 'react-redux';
import R from 'ramda';
import {Agenda} from 'react-native-calendars';

class MyCoolView extends Component {
  renderItem = item => {
    console.log('renderItem happened');

    return (
      <View>
        {/* some JSX */}
      </View>
    );
  };

  render() {
    console.log('render happened with calendarItems', this.props.calendarItems);
    return (
      <Agenda
        items={this.props.calendarItems}
        selected={moment().format('YYYY-MM-DD')}
        renderItem={this.renderItem}
        renderDay={this.renderDay}
        rowHasChanged={(r1, r2) => r1._id !== r2._id}
      />
    );
  }
}

const getCalendarItems = idsOfItemsLoading => R.pipe(
  R.sort(/* sort algorithm */),
  R.filter(/* filter algorithm */),
  R.map(item => ({
    ...item,
    isLoading: idsOfItemsLoading.includes(item._id), // here isLoading boolean is added to item
  })),
  R.groupBy(/* grouping algorithm */),
);

export default connect(
  state => ({
    idsOfItemsLoading: state.idsOfItemsLoading,
    calendarItems: getCalendarItems(state.idsOfItemsLoading)(state.availableItems),
  })
)(MyCoolView);

Individual item inside of this.props.calendarItems looks like this:

{
  title: 'Hello there',
  isLoading: false,
  // other keys here...
}

So even tho I am changing the isLoading key inside of these items the 'renderItem happened' log is not firing. Only the log inside of normal render function is firing. So there is something funky how Agenda component determines when to rerender the items? Could you point out where in the code base the comparing or logic when to rerender is? :)

[henrikra]

Ah figured this out! So you have to make rowHasChanged and return true when you want specific row in Agenda to change :)