AgendaList Jumping back and forth on React native 70 and above(IOS)

[shashanksoul]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

We updated our app from react native 67 to react native 70.5 and started seeing this error. AgendaList randomly starts jumping back and forth if we try to scroll too fast till the end of list. It doesn’t stop until we reload app. Doesn’t happen on react native 67.

Expected Behavior

we must be able to scroll list till end with any speed without jumping back & forth.

Observed Behavior

on react native 70.5 try to scroll agenda List till end of the list without stopping in between and list will start jumping back and forth.

Environment

Re

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: react-native-calendars@1.1293.0
• npm ls react-native: ├─┬ react-native-calendars@1.1293.0 │ └─┬ recyclerlistview@3.0.5 │ └── react-native@0.70.5 deduped └── react-native@0.70.5

Also specify:

1. Device/emulator/simulator & OS version: Iphone 14 pro emulator (IOS 16.2)

Reproducible Demo

Create a new porject on RN 70.5 and replace App.js with this code

import React from 'react';
import {View, SafeAreaView, Text} from 'react-native';
import {
  ExpandableCalendar,
  AgendaList,
  CalendarProvider,
} from 'react-native-calendars';
import moment from 'moment';

const App = () => {
  const currentDay = moment();

  const [selectedDay, setSelectedDay] = React.useState(
    currentDay.format('YYYY-MM-DD'),
  );

  const data = [
    {
      title: '2022-12-01',
      data: [
        {
          date: '2022-12-01T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-02',
      data: [
        {
          date: '2022-12-02T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-03',
      data: [
        {
          date: '2022-12-03T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-04',
      data: [
        {
          date: '2022-12-04T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-05',
      data: [
        {
          date: '2022-12-05T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-06',
      data: [
        {
          date: '2022-12-06T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-07',
      data: [
        {
          date: '2022-12-07T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-08',
      data: [
        {
          date: '2022-12-08T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-09',
      data: [
        {
          date: '2022-12-09T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-10',
      data: [
        {
          date: '2022-12-10T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-11',
      data: [
        {
          date: '2022-12-11T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-12',
      data: [
        {
          date: '2022-12-12T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-13',
      data: [
        {
          date: '2022-12-13T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-14',
      data: [
        {
          date: '2022-12-14T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-15',
      data: [
        {
          date: '2022-12-15T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-16',
      data: [
        {
          date: '2022-12-16T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-17',
      data: [
        {
          date: '2022-12-17T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-18',
      data: [
        {
          date: '2022-12-18T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-19',
      data: [
        {
          date: '2022-12-19T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-20',
      data: [
        {
          date: '2022-12-20T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-21',
      data: [
        {
          date: '2022-12-21T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-22',
      data: [
        {
          date: '2022-12-22T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-23',
      data: [
        {
          date: '2022-12-23T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-24',
      data: [
        {
          date: '2022-12-24T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-25',
      data: [
        {
          date: '2022-12-25T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-26',
      data: [
        {
          date: '2022-12-26T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-27',
      data: [
        {
          date: '2022-12-27T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-28',
      data: [
        {
          date: '2022-12-28T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-29',
      data: [
        {
          date: '2022-12-29T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-30',
      data: [
        {
          date: '2022-12-30T06:00:00.000Z',
        },
      ],
    },
    {
      title: '2022-12-31',
      data: [
        {
          date: '2022-12-31T06:00:00.000Z',
        },
      ],
    },
  ];

  const selectDay = value => {
    setSelectedDay(value);
  };

  const renderItem = item => {
    //console.log('--render item---', moment().format('MM/DD/YYYY HH:mm:ss A'));
    const index = moment(item.item.date).format('YYYY-MM-DD');
    return (
      <View
        key={index}
        style={{margin: 30, height: 150, backgroundColor: 'red'}}>
        <Text style={{fontSize: 50}}>{index}</Text>
      </View>
    );
  };
  return (
    <SafeAreaView style={{flex: 1}}>
      <CalendarProvider
        date={selectedDay}
        onDateChanged={selectDay}
        disabledOpacity={0.6}>
        <ExpandableCalendar
          minDate={moment()
            .subtract(6, 'M')
            .startOf('month')
            .format('YYYY-MM-DD')}
          maxDate={moment().format('YYYY-MM-DD')}
          showWeekNumbers
          disableWeekScroll={true}
          firstDay={6}
          pastScrollRange={6}
          futureScrollRange={0}
          markingType={'custom'}
          calendarHeight={374}
          weekHeading={'dateAndTimes.weekBig'}
        />
        <AgendaList sections={data} renderItem={renderItem} />
      </CalendarProvider>
    </SafeAreaView>
  );
};

export default App;

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

Screenshots

[shashanksoul]

@wixmobile Can any check for this issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cipriancaba]

I can definitely see the same problem

[haleyngonadi]

Hey, anyone found a solution?