React-native-calendars: undefined is not an object(evaluating '_lodash.default.first(value).month')

Created on 1 Jul 2020 · 7Comments · Source: wix/react-native-calendars

Description

Using the configuration

<CalendarProvider
       date={ITEMS[0].title}
        onDateChanged={this.onDateChanged}
        onMonthChange={this.onMonthChange}
        showTodayButton
        disabledOpacity={0.6}
      >
        <ExpandableCalendar
          horizontal={false}
          hideArrows
          disablePan
          hideKnob
          disableWeekScroll
          firstDay={1}
          markedDates={this.getMarkedDates()}
        />

        <AgendaList
          sections={ITEMS}
          extraData={this.state}
          renderItem={this.renderItem}
        />
</CalendarProvider>

I get an error when I scroll through an AgendaList or click the button today

Expected Behavior

When you click the button today, or scroll through the AgendaList (where the day or month changes in ExpandableCalendar).
I hope I don't get the error.

Observed Behavior

When I perform any of the above activities I get the following error:

TypeError: undefined is not an object(evaluating '_lodash.default.first(value).month')

ExpandableCalendar#onVisibleMonthsChange
C:\....\node_modules\react-native-calendars\src\expandableCalendar\index.js: 354:37

The error occurs when the value received by the arrow function onVisibleMonthsChange is an empty array.
Recalling that the expected value was something like this: [{"dateString": "2020-07-28", "day": 28, "month": 7, "timestamp": 1595894400000, "year": 2020}]

My fix for this problem (To not receive error in production)

In the code of the arrow function onVisibleMonthsChange

C:\....\node_modules\react-native-calendars\src\expandableCalendar\index.js: 354:37

I put this if

onVisibleMonthsChange = (value) => {
    if (value != undefined && value.length > 0) {
       ....//OnVisibleMonthsChange code
    }
  }

The way I found to not give the error.
My solution is changing the code in node_modules, I wanted to know a way around it so I don't need to change code in node_modules.

Environment

Environment:
react-native-calendars: 1.300.0
react-native: 0.62.2
Environment:
react-native-calendars: 1.265.0
react-native: 0.61.5

Phone:

Iphone 7
IOS Emulator
MotoG5 (Android 8)
Android Emulator (Android 10)

Reproducible Demo

It is possible to reproduce the error with the example available in the documentation expandableCalendar

Bug report

Source

DanielDLJ

Most helpful comment

@DGCarramona
I haven't modified anything since I posted the error.
The error remains the same. =/

DanielDLJ on 20 Oct 2020

👍2

All 7 comments

Hey @DanielDLJ,

Thanks for a detailed bug report! We will look into it shortly and get back to you.

emilisb on 2 Jul 2020

you have to add initialNumToRender to ExpandableCalendar and AgendaList like
<ExpandableCalendar
initialNumToRender={this.state.items.length + 1}
/>

>  <AgendaList
>             extraData={this.state}
>             sections={this.state.items}
>             renderItem={this.renderItem}
>             sectionStyle={styles.section}
>             initialNumToRender={this.state.items.length + 1}
>             onScrollToIndexFailed={(info) => {
>               console.warn('onScrollToIndexFailed info: ', info);
>             }}
>           />

Gibrat-Erisov on 19 Aug 2020

👎1

@Gibrat-Erisov I follow your steps of adding initialNumToRenderto both (ExpandableCalendar and AgendaList),
but the error mentioned above is still happening.

DanielDLJ on 19 Aug 2020

@DanielDLJ in my case, your workaround doesn't work :) did you modified something since you posted this ?
@emilisb Hello, any update on this issue ? I've spent some hours trying to fix this, it seems to be related to the call of scrollToOffset on the flatlist used by calendarlist in expandablecalendar