Agenda performance: VirtualizedList: You have a large list that is slow to update

Description

Hi, I’m trying to use the Agenda component. I took the example from the repo Agenda Example in order to see how the Agenda works.

Thing that you have to know: 1- I refactored the code a bit in order to use Functional Components instead Class Components. 2- The example creates the calendar items randomly. In my case I’m not doing this way, I created an object with a few items instead.

Agenda component is not working correctly

Expected Behavior

If I click on a date that has items, it should display the list view panel of the selected day like the following gif example expected behavior

Observed Behavior

The problem is that when I click on a date, it takes a long time to display the list view panel or, sometimes, it doesn’t even open the panel.

I’m not getting any errors, only the following message in console:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 36360,
  "dt": 9346,
  "prevDt": 967,
}

Code

import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, Alert, Text } from "react-native";
import { Agenda } from "react-native-calendars";
import styles from "./styles";
import { FloatingButton } from "../../common/atoms";
import { EventsIcon } from "../../../res";

const EventsScreen = () => {

  const [items, setItems] = useState({
    "2017-05-16": [{ name: "item 1 - any js object" }],
    "2017-05-23": [{ name: "item 2 - any js object", height: 80 }],
    "2017-05-24": [],
    "2017-05-25": [{ name: "item 3 - any js object" }, { name: "any js object" }]
  });

  const renderItem = item => (
    <TouchableOpacity
      style={[styles.item, { height: item.height }]}
      onPress={() => Alert.alert(item.name)}
    >
      <Text>{item.name}</Text>
    </TouchableOpacity>
  );

  const renderEmptyDate = () => {
    return (
      <View style={styles.emptyDate}>
        <Text>This is empty date!</Text>
      </View>
    );
  };

  const rowHasChanged = (r1, r2) => r1.name !== r2.name;

  return (
    <View style={styles.safeArea}>
      <Agenda
        items={items}
        selected="2017-05-16"
        renderItem={renderItem}
        renderEmptyDate={renderEmptyDate}
        rowHasChanged={rowHasChanged}
      />
    </View>
  );
};

export default EventsScreen;