TimelineList scrolling animation is janky

[HonestCodeWasTaken]

Description

Scrolling is sometimes janky

https://github.com/wix/react-native-calendars/assets/59506416/f63a5146-89b4-4526-b907-7bca58a02591

      <CalendarProvider
        date={currentDate}
        onDateChanged={onDateChanged}
        onMonthChange={onMonthChange}
        showTodayButton
        disabledOpacity={0.6}
        // numberOfDays={2}
      >
        <ExpandableCalendar
          disablePan
          hideKnob
          firstDay={1}
          leftArrowImageSource={Images.Previous}
          rightArrowImageSource={Images.Next}
          markedDates={marked}
        />
        <TimelineList
          events={eventsByDate}
          timelineProps={timelineProps}
          showNowIndicator
          // scrollToNow
          scrollToFirst
          initialTime={INITIAL_TIME}
        />
      </CalendarProvider>

Expected Behavior

I was scrolling intensively

Observed Behavior

The scrolling seems to teleport in places

Environment

• npm ls react-native-calendars:
• └─┬ @acme/trainok-workspace@1.0.0 -> ./apps/expoTrainokWorkspace └── react-native-calendars@1.1303.0
• npm ls react-native: ├─┬ @draftbit/maps@48.9.1 │ ├─┬ @teovilla/react-native-web-maps@0.9.4 │ │ └── react-native@0.72.4 deduped │ └─┬ react-native-maps@1.3.2 │ └── react-native@0.72.4 deduped ├─┬ @draftbit/ui@48.9.1 │ ├─┬ @draftbit/core@48.9.1 │ │ ├─┬ @react-native-picker/picker@2.4.8 │ │ │ └── react-native@0.72.4 deduped │ │ ├─┬ @shopify/flash-list@1.4.0 │ │ │ └── react-native@0.72.4 deduped │ │ └─┬ react-native-dropdown-picker@5.4.7-beta.1 │ │ └── react-native@0.72.4 deduped │ └─┬ react-native-reanimated@2.14.4 │ └── react-native@0.72.4 deduped ├─┬ @react-native-async-storage/async-storage@1.18.2 │ └── react-native@0.72.4 ├─┬ @react-native-community/netinfo@9.3.10 │ └── react-native@0.72.4 deduped ├─┬ @react-native-picker/picker@2.4.10 │ └── react-native@0.72.6 deduped ├─┬ @react-navigation/bottom-tabs@6.5.11 │ ├─┬ @react-navigation/elements@1.3.21 │ │ └── react-native@0.72.4 deduped │ ├─┬ react-native-safe-area-context@4.5.0 │ │ └── react-native@0.72.4 deduped │ ├─┬ react-native-screens@3.20.0 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ @react-navigation/drawer@6.6.6 │ ├─┬ react-native-gesture-handler@2.9.0 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ @react-navigation/native@6.1.9 │ └── react-native@0.72.4 deduped ├─┬ @react-navigation/stack@6.3.20 │ └── react-native@0.72.4 deduped ├─┬ @shopify/flash-list@1.4.3 │ └── react-native@0.72.6 deduped ├─┬ react-native-avoid-softinput@4.0.2 │ └── react-native@0.72.4 deduped ├─┬ react-native-confirmation-code-field@7.3.2 │ └── react-native@0.72.4 deduped ├─┬ react-native-deck-swiper@2.0.16 │ └── react-native@0.72.4 deduped ├─┬ react-native-dropdown-picker@5.4.6 │ └── react-native@0.72.4 deduped ├─┬ react-native-gesture-handler@2.12.1 │ └── react-native@0.72.6 deduped ├─┬ react-native-get-random-values@1.9.0 │ └── react-native@0.72.6 deduped ├─┬ react-native-keyboard-aware-scroll-view@0.9.5 │ ├─┬ react-native-iphone-x-helper@1.3.1 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ react-native-maps@1.7.1 │ └── react-native@0.72.6 deduped ├─┬ react-native-markdown-display@7.0.2 │ └── react-native@0.72.4 deduped ├─┬ react-native-modal-datetime-picker@13.1.2 │ └── react-native@0.72.4 deduped ├─┬ react-native-pager-view@6.2.0 │ └── react-native@0.72.6 deduped ├─┬ react-native-reanimated@3.3.0 │ └── react-native@0.72.6 deduped ├─┬ react-native-safe-area-context@4.6.3 │ └── react-native@0.72.6 deduped ├─┬ react-native-screens@3.22.1 │ └── react-native@0.72.6 deduped ├─┬ react-native-shadow-2@7.0.8 │ ├─┬ react-native-svg@13.4.0 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ react-native-svg@13.9.0 │ └── react-native@0.72.6 deduped ├─┬ react-native-swipe-list-view@3.2.9 │ └── react-native@0.72.4 deduped ├─┬ react-native-tab-view@3.5.2 │ ├─┬ react-native-pager-view@6.1.2 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ react-native-typography@1.4.1 │ └── react-native@0.72.4 deduped ├─┬ react-native-web-swiper@2.2.4 │ └── react-native@0.72.4 deduped ├─┬ react-native-webview@13.2.2 │ └── react-native@0.72.6 deduped ├─┬ react-native-youtube-iframe@2.3.0 │ ├─┬ react-native-webview@11.26.0 │ │ └── react-native@0.72.4 deduped │ └── react-native@0.72.4 deduped ├─┬ react-native@0.72.6 │ └─┬ @react-native/virtualized-lists@0.72.8 │ └── react-native@0.72.4 deduped └─┬ recyclerlistview@4.2.0 └── react-native@0.72.4 deduped Also specify:

1. Device/emulator/simulator & OS version: Iphone 14 pro, Simulator on MacOS 13.2 (22D49)

Maybe flashList is a solution for this? Ill look into possibly replacing the list later in code

[t2]

@HonestCodeWasTaken I'm seeing this too. Did you fix it?

[comptergeeks]

Did you guys ever figure it out? Also having this bug.