Agenda crashes with RN 0.78

[bmatasar]

After switching to RN 0.78, the Agenda component crashes with the infamous

Warning: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This error is located at:
at ReservationList (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.calendartest&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:103469:36)
at RCTView ()
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.calendartest&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47523:43)
at RCTView ()
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.calendartest&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:47523:43)
at Agenda (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.calendartest&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:97582:36)

[bmatasar]

Code example:

import React, {useState} from 'react';
import {StatusBar, View} from 'react-native';
import {Agenda, CalendarProvider} from 'react-native-calendars';

function App(): React.JSX.Element {
  const [currentDate, setCurrentDate] = useState(new Date().toDateString());

  return (
    <View>
      <StatusBar barStyle={'light-content'} />

      <CalendarProvider date={currentDate}>
        <Agenda />
      </CalendarProvider>
    </View>
  );
}

export default App;

[drumsSandoval]

Same error

[dmohler20]

I am also having the same issue

[RameeshSayone]

any fix on this issue

[iyanushow]

same here, any fix?

[dmohler20]

I was messing around a little bit, and the issue seems to be coming from here in the ReservationList component class.

componentDidUpdate(prevProps) {
  if (this.props.topDay && prevProps.topDay && prevProps !== this.props) {
    if (!sameDate(prevProps.topDay, this.props.topDay)) {
      this.setState({ reservations: [] }, () => this.updateReservations(this.props));
    } else {
      this.updateReservations(this.props);
    }
  }
}

I think the problem is with the prevProps !== this.props check. I modified it slightly to test it out:

componentDidUpdate(prevProps) {
  if (this.props.topDay && prevProps.topDay && 
      (!sameDate(prevProps.topDay, this.props.topDay) || 
       prevProps.items !== this.props.items || 
       prevProps.selectedDay !== this.props.selectedDay)) {
    
    if (!sameDate(prevProps.topDay, this.props.topDay)) {
      this.setState({ reservations: [] }, () => this.updateReservations(this.props));
    } else {
      this.updateReservations(this.props);
    }
  }
}

This initially fixes it when you are looking at the current week at the top, but when you switch to the full month selection that no longer works. So there is more that needs done or updated, or maybe i missed the true issue completely.

I created a PR, with slightly updated coding. It looks the the other error I encountered is only on Android devices, and is there even in the current version on older version or RN as well.

Here is a link to the PR

[eneskooo]

same issue, waiting the fix

[gkasireddy202]

The app is crashed on iOS.

react-native:0.78.0 and react-native-calendars:1.1310.0

[fatihtelis]

The app is crashed on iOS.

react-native:0.78.0 and react-native-calendars:1.1310.0

I got the same error.
The issue is related with React 19 which is shipped with RN 0.78.
When I downgraded to RN 0.77 with React 18.3.1, the issue is solved.

I've encountered various bugs with React 19 when using other packages, so it's safer to stick with the previous version for now.

[bmatasar]

#2624 is a possible fix. Let's see what the team chooses to implement.

[ashishAmz]

is it fixed?

[bmatasar]

There are at least 2 PR's with fixes. Let's see what WIX team will do about it.

[voulgarakis]

same issue

[bmatasar]

It looks like they have released an update but still without the fix.

[artus9033]

Bump, @nitzanyiz can you take a look at the fix PRs?

[Lewitje]

Same issue here

[kamador45]

@Lewitje I had the same issue but I could fix it using the solution of @bmatasar mentioned.

[gkasireddy202]

I faced this same issue in RN@0.79.2, react-native-calender:1.1312.0, and I just added the below code in
node_modules>react-native-calenders>src>agenda>reservation-list>index.js>ReservationList>index.js

componentDidUpdate(prevProps) {
if (this.props.topDay && prevProps.topDay &&
(!sameDate(prevProps.topDay, this.props.topDay) ||
prevProps.items !== this.props.items ||
prevProps.selectedDay !== this.props.selectedDay)) {

if (!sameDate(prevProps.topDay, this.props.topDay)) {
  this.setState({ reservations: [] }, () => this.updateReservations(this.props));
} else {
  this.updateReservations(this.props);
}

}
}

Is this right?

[bmatasar]

I faced this same issue in RN@0.79.2, react-native-calender:1.1312.0, and I just added the below code in node_modules>react-native-calenders>src>agenda>reservation-list>index.js>ReservationList>index.js

componentDidUpdate(prevProps) { if (this.props.topDay && prevProps.topDay && (!sameDate(prevProps.topDay, this.props.topDay) || prevProps.items !== this.props.items || prevProps.selectedDay !== this.props.selectedDay)) {

if (!sameDate(prevProps.topDay, this.props.topDay)) {
  this.setState({ reservations: [] }, () => this.updateReservations(this.props));
} else {
  this.updateReservations(this.props);
}

} }

Is this right?

It is partially right. It does not crash anymore but you might discover that some changes are not propagated in the view. In the fix I suggested, I checked all the properties that are used in the component.

[gkasireddy202]

@bmatasar - Thanks for your update.
Please provide the code changes that you did, and I will add them to my project.

Or why are these changes not showing the latest react-native-calenders version?

[bmatasar]

@gkasireddy202

#2624 is a possible fix. Let's see what the team chooses to implement.

[gkasireddy202]

@bmatasar - I copied the componentDidUpdate code and pasted into my project.
813f338

Here is the code. Please review if it is correct or not.
I did not use the ReservationListProps parameter.

componentDidUpdate(prevProps) {
if (this.props.topDay && prevProps.topDay) {
if (this.props.showOnlySelectedDayItems !== prevProps.showOnlySelectedDayItems || this.props.items !== prevProps.items || !sameDate(this.props.selectedDay, prevProps.selectedDay)) {
if (!sameDate(prevProps.topDay, this.props.topDay)) {
this.setState({ reservations: [] }, () => this.updateReservations(this.props));
} else {
this.updateReservations(this.props);
}
}
}
}

[neeleshyadav253]

Open your project directory.

Navigate to:
node_modules/react-native-calendars/src/agenda/reservation-list/index.js
Open the File for Editing

Open index.js.

Find the componentDidUpdate Method

Search for componentDidUpdate in the file.

Replace the Method with the Updated One

Replace the existing componentDidUpdate with the following code:

componentDidUpdate(prevProps) {
if (
this.props.topDay &&
prevProps.topDay &&
(
!sameDate(prevProps.topDay, this.props.topDay) ||
prevProps.items !== this.props.items ||
prevProps.selectedDay !== this.props.selectedDay
)
) {
if (!sameDate(prevProps.topDay, this.props.topDay)) {
this.setState({ reservations: [] }, () => this.updateReservations(this.props));
} else {
this.updateReservations(this.props);
}
}
}

[bmatasar]

You can use patch-package with the attached patch:

react-native-calendars+1.1312.0.patch

[gkasireddy202]

@bmatasar and @neeleshyadav253 - Thanks

[gkasireddy202]

react-native-calenders:1.1312.0

The onDayPress={(day) => {} method does not call a single press.
It was called once when I tapped the multiples on the day in the agenda calendar.
This issue is in react-native:0.79.2 on Android 15.

It is working fine on iOS.

video.mp4

[Lewitje]

I have the same issue as @gkasireddy202 onDayPress does get called, I can alert a success.
I have to click around a-lot before the agenda view opens.

This only happens to me on an older Android version (version 14) and in release mode, doesn't happen in development.
react-native: 0.78.0
react-native-calendars: 1.1312.0

I've tried a few other versions of react-native-calendars and get the same issue, also tried the patch.

calendar.mp4

[bmatasar]

I have the same issue as @gkasireddy202 onDayPress does get called, I can alert a success. I have to click around a-lot before the agenda view opens.

This only happens to me on an older Android version (version 14) and in release mode, doesn't happen in development. react-native: 0.78.0 react-native-calendars: 1.1312.0

I've tried a few other versions of react-native-calendars and get the same issue, also tried the patch.

calendar.mp4

@Lewitje , @gkasireddy202
It looks like this has a different cause. Maybe you fill in another issue.

[gkasireddy202]

Here is the issue:
#2662

[shareef-dweikat]

You can use patch-package with the attached patch:

react-native-calendars+1.1312.0.patch

Thanks @bmatasar ! Who is the publisher of this patch? Is there a PR where i can see the code changes?

[bmatasar]

#2624 is a possible fix. Let's see what the team chooses to implement.

@shareef-dweikat - It's mentioned above