Invariant Violation: Tried to get frame for out of range index 0, js engine: hermes

[dmk3141618]

Observed Behavior

What actually happened when you performed the above actions?

Using AgendaList, an error occurs when quickly moving the calendar left and right. It seems like it tries to render before fetching the data during rendering

If there's an error message, please paste the full terminal output and error message in this code block:

Invariant Violation: Tried to get frame for out of range index 0, js engine: hermes

<View>
              <CalendarProvider
                date={selectedDate}
                onDateChanged={setSelectedDate}
                showTodayButton
                disabledOpacity={0.6}>
                <ExpandableCalendar
                  firstDay={1}
                  markedDates={getMarkedDates()}
                  closeOnDayPress={false}
                  hideExtraDays={true}
                  allowShadow={false}
                  hideArrows
                  pagingEnabled
                  initialNumToRender={10}
                />
                <AgendaList
                  keyExtractor={item => item.id}
                  getItem={(data, index) => data[index]}
                  getItemCount={data => data.length}
                  sections={sections}
                  renderItem={renderItem}
                  avoidDateUpdates
                  scrollToNextEvent={false}
                  ListEmptyComponent={renderEmpty()}
                  // legacyImplementation
                  // infiniteListProps={{
                  //   // itemHeight: 50,
                  //   titleHeight: 70,
                  //   // visibleIndicesChangedDebounce: 5,
                  //   // renderFooter: () => null,
                  // }}
                />
              </CalendarProvider>
            </View>

[dmk3141618]

similar to this but not -1 , in this case 0.

https://github.com/facebook/react-native/issues/36850

[dmk3141618]

I was able to prevent errors by changing the value of sections through InteractionManager.runAfterInteractions so that it is performed after the interaction ends. Is there a way to slow down the speed of the scroll screen transition between months in ExpandableCalendar? Currently, if the user scrolls very quickly, the UI breaks regardless, and it always tries to keep up with this speed.

[carlbleick]

This should be fixed in RN 0.72 and is not be connected to this library afaik. Or does something prevent you from upgrading your React Native Version?

[ZhenyaKu]

any updates on this ?

[owenr88]

I've narrowed this down and it seems to be when scrollToNextEvent is enabled on the AgendaList, if that's any help.

This also seems slightly related. I've updated my code not to render the AgendaList until after loading the section data. It's not ideal, but it works now that it never receives empty data.