[BUG] Not re-rendering on theme prop changes

[aminmeshk]

Description

When the theme prop or the values inside the theme object changes, calendar doesn't update the UI based on the new theme values. In my case, when the device scheme changes from light to dark, I change the theme prop but it doesn't update the calendar. I have to do a full unmount & mount of the <Calendar /> component in order to see the theme changes.

Expected Behavior

When theme prop changes, <Calendar /> component should re-render with the new changes

Observed Behavior

What actually happened when you performed the above actions?
When I change the dayTextColor value inside the theme prop from white to black, it stays white until I unmount & re-mount the component.

Environment

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

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

1. Device/emulator/simulator & OS version:
   iOS Simulator - iPhone 16 Pro - iOS 18.0

Reproducible Demo

import React from "react";
import { useColorScheme } from "react-native";
import { Calendar } from "react-native-calendars";

const App = () => {
	const scheme = useColorScheme();

	return (
		<Calendar
			onDayPress={day => {
				console.log("selected day", day);
			}}
			theme={{
				calendarBackground: "transparent",
				dayTextColor: scheme === "dark" ? "white" : "black",
			}}
		/>
	);
};

Screenshots

Current:

What should be (I fixed it with a patch):

Solution

This problem happens because theme prop is used as initialValue of useRef. So when the theme prop changes, the changes doesn't affect the component. For example, take a look at day/basic component:

...
const BasicDay = (props) => {
    const { theme, date, ... } = props;
    const style = useRef(styleConstructor(theme));
...

To fix this I added a useEffect that when the theme prop changes, it updates the style ref:

...
const BasicDay = (props) => {
    const { theme, date, ... } = props;
    const style = useRef(styleConstructor(theme));
    useEffect(() => {
        style.current = styleConstructor(theme);
    }, [theme]);
...

With this addition, the issue is fixed as you can see in the second GIF above.
I will create a PR for it.

[aminmeshk]

I added PR to fix this:
#2540

[oogunjob]

This helped a lot, thanks

[MarcoRettoreDev]

I patched my version with your changes but i doesn't update at the first time:

<Calendar
        onDayPress={handleDayPress}
        theme={{
          indicatorColor: dateOutOufRange
            ? tw.color('warning')
            : tw.color('brandScale-400'),
          selectedDayBackgroundColor: dateOutOufRange
            ? tw.color('warning')
            : tw.color('brandScale-400'),
          selectedDayTextColor: tw.color('white'),
        }}
/>

This is the update function:

const handleDayPress = (day: DateData) => {
    setSelectedDate(day.dateString);

    if (payload?.minDate && payload?.maxDate) {
      setDateOutOfRange(
        !isDateBetween(
          stringToDate(day.dateString, DATE_FORMAT),
          payload.minDate,
          payload.maxDate,
        ),
      );
    }
  };

Its updating late, if i select a date outside the range, it will keep the bg color as the same, next time i press another day, it changes.. any solution? thanks