react-native-calendars
react-native-calendars copied to clipboard
Published
20 hours ago •
wix
wix
TimelineList scrolling animation is janky
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/[email protected] -> ./apps/expoTrainokWorkspace └── [email protected]
-
npm ls react-native: ├─┬ @draftbit/[email protected] │ ├─┬ @teovilla/[email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ @draftbit/[email protected] │ ├─┬ @draftbit/[email protected] │ │ ├─┬ @react-native-picker/[email protected] │ │ │ └── [email protected] deduped │ │ ├─┬ @shopify/[email protected] │ │ │ └── [email protected] deduped │ │ └─┬ [email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ @react-native-async-storage/[email protected] │ └── [email protected] ├─┬ @react-native-community/[email protected] │ └── [email protected] deduped ├─┬ @react-native-picker/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ ├─┬ @react-navigation/[email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @shopify/[email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ @react-native/[email protected] │ └── [email protected] deduped └─┬ [email protected] └── [email protected] deduped Also specify:
- 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
