state value updates on calendar properties like "current" does not lead to the calendar re-rendering

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

I am currently trying to use an external button to control the month shown on the calendar. For instance a “next” button would lead to the next month, a “prev” button would lead to the previous month. I am fully aware I can easily do that using the arrows but this is for UX/UI reasons.

I am attempting to realize this feature by putting the dates set on the “current” as a state and update them accordingly through the button utilizing the “useState” feature.

I.e.:

const [month, setMonth] = useState(“2021-03-24”);

return ( <View> <Calendar current={month} … > <TouchableOpacity onPress={() => { setMonth(“2021-04-24”); } …

When using the most recent version, the “setMonth” triggers a re-rendering of the screen except for the Calendar component. Thus, the calendar’s date never changes, although the “month” value changes appropriately.

I have searched this issue and it turns out there were similar complaints regarding the state updates not causing the Calendar components to re-render. It did say it was fixed in the 1.18.0 update 3 years ago so I tried downgrading it to that version and it does work appropriate on that version. The state changes properly triggers a re-rendering of the Calendar component. However, the downgrade causes different problems such as “Warning: componentWillReceiveProps has been renamed” errors due to it being an older version.

Can this please be fixed? It was fixed on the 1.18.0 version but somewhere along the newer versions, the problem was re-introduced to the library.

Expected Behavior

State changes properly triggers the re-rendering of the Calendar component.

Observed Behavior

Calendar component does not re-render.

Regarding the error message for the 1.18.0 version:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: %s, Calendar
- node_modules/react-native/Libraries/LogBox/LogBox.js:117:10 in registerWarning
- node_modules/react-native/Libraries/LogBox/LogBox.js:63:8 in warnImpl
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/react-native-logs.fx.js:18:4 in warn
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:106:4 in printWarning

Environment

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

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

1. Phone/emulator/simulator & version: Android, Expo (bareflow exposed)

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you’re reporting.

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

[gaultierq]

yep I have the same problem. My workaround is to use the ‘key’ prop :

<Calendar 
    key={current + ""} 
    current={current}  />

It will re-construct the all component.

[narradorww]

🩹

const [currentMonth, setCurrentMonth] = useState(dateFormatter.format(new Date(), 'YYYY-MM-DD'));
const [calendarKey, setCalendarKey] = useState(0);

  const markToday = () => {
    const today = new Date();
    const stringToday = today.toISOString().slice(0, 10);
    onDayPress(stringToday);
    setCalendarKey(Math.random());
  };

<ThemedCalendar current={currentMonth} key={calendarKey} onMonthChange={onMonthChange} onDayPress={onDayPress} markedDates={markedDatesData} markingType={'multi-dot'} />

We had a similar issue. To fix it, we created a state for the key that would refresh the calendar, forcing it to render with the state of the key instead of current