ExpandableCalendar from react-native-calendars throws TypeError: xdate[0] is undefined

Problem

I am trying to use the ExpandableCalendar component from react-native-calendars, but I am getting this error:

TypeError: xdate[0] is undefined This error is located at: in ExpandableCalendar (created by WasteCalendar)

Code

This is the way I try to use the component:

<View style={styles.componentRoot}>
  <ExpandableCalendar
    style={styles.calendar}
    theme={theme}
    closeOnDayPress
    firstDay={1}
    markingType="custom"
    markedDates={dates}
    horizontal
    pagingEnabled
    displayLoadingIndicator={loading}
    dayComponent={({ date, marking }) => (
      <Day date={date} marking={marking} scrollTo={scrollTo} />
    )}
  />

  <View style={styles.wrapper}>
    <SectionList
      ref={sectionListRef}
      sections={dateDetails}
      // Needs a proper implementation of onScrollToIndexFailed and getItemLayout
      initialNumToRender={30}
      onScrollToIndexFailed={info => console.log(info)}
      renderItem={({ item }) => <CalendarItem {...item} />}
      stickySectionHeadersEnabled={false}
      renderSectionHeader={({ section }) => (
        <AppText bold style={styles.header}>
          {section.title}
        </AppText>
      )}
    />
  </View>
</View>

It works when I use a ´CalendarList` instead. Is there anything I am doing wrong or this is just a bug in the library?

Solution

The problem was that the ExpandableCalendar expects to be passed a context object which contains a date prop. In order to do this, the component has to be wrapped with a CalendarProvider:

  <CalendarProvider
    date={+dates![Object.keys(dates!)[0]]?.timestamp * 1000 || Date.now()}
  >
    <ExpandableCalendar
      theme={theme}
      closeOnDayPress
      firstDay={1}
      markingType="custom"
      markedDates={dates}
      horizontal
      pagingEnabled
      displayLoadingIndicator={loading}
      dayComponent={({ date, marking }) => (
        <Day date={date} marking={marking} scrollTo={scrollTo} />
      )}
    />

    <View style={styles.wrapper}>
      <SectionList
        ref={sectionListRef}
        sections={dateDetails}
        // Needs a proper implementation of onScrollToIndexFailed and getItemLayout
        initialNumToRender={30}
        onScrollToIndexFailed={info => console.log( info)}
        renderItem={({ item }) => <CalendarItem {...item} />}
        stickySectionHeadersEnabled={false}
        renderSectionHeader={({ section }) => (
          <AppText bold style={styles.header}>
            {section.title}
          </AppText>
        )}
      />
    </View>
  </CalendarProvider>