[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

[MarekSmatana]

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

@MarcoRettoreDev For me it also wasn't working correctly. So I redone it myself with approach where a changed their style from ref to state. Here is example from 1 file:

diff --git a/node_modules/react-native-calendars/src/calendar-list/index.js b/node_modules/react-native-calendars/src/calendar-list/index.js
index 112da79..d0cc6aa 100644
--- a/node_modules/react-native-calendars/src/calendar-list/index.js
+++ b/node_modules/react-native-calendars/src/calendar-list/index.js
@@ -49,7 +49,10 @@ const CalendarList = (props, ref) => {
     const calendarSize = horizontal ? calendarWidth : calendarHeight;
     const [currentMonth, setCurrentMonth] = useState(parseDate(current));
     const shouldUseAndroidRTLFix = useMemo(() => constants.isAndroidRTL && horizontal, [horizontal]);
-    const style = useRef(styleConstructor(theme));
+    const [style, setStyle] = useState(styleConstructor(theme));
+    useEffect(() => {
+        setStyle(styleConstructor(theme));
+    }, [theme]);
     const list = useRef();
     const range = useRef(horizontal ? 1 : 3);
     const initialDate = useRef(parseDate(current) || new XDate());
@@ -63,11 +66,11 @@ const CalendarList = (props, ref) => {
         return months;
     }, [pastScrollRange, futureScrollRange]);
     const staticHeaderStyle = useMemo(() => {
-        return [style.current.staticHeader, headerStyle];
-    }, [headerStyle]);
+        return [style.staticHeader, headerStyle];
+    }, [headerStyle, style]);
     const listStyle = useMemo(() => {
-        return [style.current.container, propsStyle];
-    }, [propsStyle]);
+        return [style.container, propsStyle];
+    }, [propsStyle, style]);
     const initialDateIndex = useMemo(() => {
         return findIndex(items, function (item) {
             return item.toString() === initialDate.current?.toString();
@@ -193,7 +196,7 @@ const CalendarList = (props, ref) => {
             onViewableItemsChanged
         },
     ]);
-    return (<View style={style.current.flatListContainer} testID={testID}>
+    return (<View style={style.flatListContainer} testID={testID}>
       <FlatList 
     // @ts-expect-error
     ref={list} windowSize={shouldUseAndroidRTLFix ? pastScrollRange + futureScrollRange + 1 : undefined} style={listStyle} showsVerticalScrollIndicator={showScrollIndicator} showsHorizontalScrollIndicator={showScrollIndicator} data={items} renderItem={renderItem} getItemLayout={getItemLayout} initialNumToRender={range.current} initialScrollIndex={initialDateIndex} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} testID={`${testID}.list`} onLayout={onLayout} removeClippedSubviews={removeClippedSubviews} pagingEnabled={pagingEnabled} scrollEnabled={scrollEnabled} scrollsToTop={scrollsToTop} horizontal={horizontal} keyboardShouldPersistTaps={keyboardShouldPersistTaps} keyExtractor={keyExtractor} onEndReachedThreshold={onEndReachedThreshold} onEndReached={onEndReached} nestedScrollEnabled={nestedScrollEnabled} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} contentContainerStyle={contentContainerStyle}/>