fix: re-render on theme prop changes

src/calendar-list/index.tsx

@@ -147,6 +147,10 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     });
   }, [items]);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useEffect(() => {
     if (current) {
       scrollToMonth(new XDate(current));

src/calendar-list/item.tsx

@@ -1,5 +1,5 @@
 import XDate from 'xdate';
-import React, {useRef, useMemo, useCallback} from 'react';
+import React, {useRef, useMemo, useCallback, useEffect} from 'react';
 import {Text} from 'react-native';
 import {Theme} from '../types';
 import {toMarkingFormat} from '../interface';
@@ -81,6 +81,11 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
     }
   }, [onPressArrowRight, scrollToMonth]);
 
+
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   if (!visible) {
     return (
       <Text style={textStyle}>{dateString}</Text>

src/calendar-list/new.tsx

@@ -57,6 +57,10 @@ const CalendarList = (props: CalendarListProps) => {
     scrollToMonth(currentMonth);
   }, [currentMonth]);
 
+  useEffect(() => {
+    style.current = styleConstructor(calendarProps?.theme);
+  }, [calendarProps?.theme]);
+
   const getMonthIndex = useCallback((month?: XDate) => {
     if (!month) {
       return -1;

src/calendar/day/basic/index.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useCallback, useRef} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef} from 'react';
 import {TouchableOpacity, Text, View, ViewProps} from 'react-native';
 
 import {xdateToData} from '../../../interface';
@@ -195,6 +195,10 @@ const BasicDay = (props: BasicDayProps) => {
     );
   };
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   return isMultiPeriod ? renderPeriodsContainer() : renderContainer();
 };
 

src/calendar/day/dot/index.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import styleConstructor from './style';
 import {Theme} from '../../../types';
@@ -41,6 +41,10 @@ const Dot = ({theme, marked, disabled, inactive, color, today, selected}: DotPro
     }
   }
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   return <View style={dotStyle} />;
 };
 

src/calendar/day/marking/index.tsx

@@ -1,5 +1,5 @@
 import filter from 'lodash/filter';
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View, ViewStyle, TextStyle, StyleProp} from 'react-native';
 
 import {Theme, MarkingTypes} from '../../../types';
@@ -122,6 +122,10 @@ const Marking = (props: MarkingProps) => {
     return <Dot {...dotProps} key={key} color={color} />;
   };
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   return renderMarkingByType();
 };
 

src/calendar/day/period/index.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useRef, useMemo} from 'react';
+import React, {useCallback, useRef, useMemo, useEffect} from 'react';
 import {TouchableWithoutFeedback, TouchableOpacity, Text, View, ViewStyle, ViewProps, TextStyle, StyleProp} from 'react-native';
 
 import {xdateToData} from '../../../interface';
@@ -158,6 +158,10 @@ const PeriodDay = (props: PeriodDayProps) => {
   const _onLongPress = useCallback(() => {
     onLongPress?.(dateData);
   }, [onLongPress]);
+
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
 
   const Component = marking ? TouchableWithoutFeedback : TouchableOpacity;
 

src/calendar/header/index.tsx

@@ -1,7 +1,7 @@
 import includes from 'lodash/includes';
 import XDate from 'xdate';
 
-import React, {Fragment, ReactNode, useCallback, useMemo, forwardRef, useImperativeHandle, useRef} from 'react';
+import React, {Fragment, ReactNode, useCallback, useMemo, forwardRef, useImperativeHandle, useRef, useEffect} from 'react';
 import {
   ActivityIndicator,
   Platform,
@@ -274,6 +274,10 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     }
   };
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   return (
     <View
       testID={testID}

src/calendar/index.tsx

@@ -107,6 +107,10 @@ const Calendar = (props: CalendarProps & ContextProp) => {
     }
   }, [initialDate]);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useDidUpdate(() => {
     const _currentMonth = currentMonth.clone();
     onMonthChange?.(xdateToData(_currentMonth));

src/expandableCalendar/Context/Provider.tsx

@@ -1,6 +1,6 @@
 import XDate from 'xdate';
 
-import React, {useRef, useState, useCallback, useMemo} from 'react';
+import React, {useRef, useState, useCallback, useMemo, useEffect} from 'react';
 import {View, ViewStyle, ViewProps, StyleProp} from 'react-native';
 
 import {sameMonth} from '../../dateutils';
@@ -65,6 +65,11 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
   const [currentDate, setCurrentDate] = useState(date);
   const [updateSource, setUpdateSource] = useState(UpdateSources.CALENDAR_INIT);
 
+
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   const wrapperStyle = useMemo(() => {
     return [style.current.contextWrapper, propsStyle];
   }, [style, propsStyle]);

src/expandableCalendar/Context/todayButton.tsx

@@ -65,6 +65,10 @@ const TodayButton = (props: TodayButtonProps, ref: any) => {
     animateOpacity();
   }, [disabled]);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   const disable = (shouldDisable: boolean) => {
     if (shouldDisable !== disabled) {
       setDisabled(shouldDisable);

src/expandableCalendar/WeekCalendar/index.tsx

@@ -1,6 +1,6 @@
 import XDate from 'xdate';
 
-import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {FlatList, View, ViewToken} from 'react-native';
 
 import {sameWeek, onSameDateRange, getWeekDates} from '../../dateutils';
@@ -50,6 +50,11 @@ const WeekCalendar = (props: WeekCalendarProps) => {
   const list = useRef<FlatList>(null);
   const currentIndex = useRef(NUMBER_OF_PAGES);
 
+
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useDidUpdate(() => {
     items.current = getDatesArray(date, firstDay, numberOfDays);
     setListData(items.current);

src/expandableCalendar/WeekCalendar/new.tsx

@@ -42,6 +42,10 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     return [{width: containerWidth}, props.style];
   }, [containerWidth, props.style]);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useEffect(() => {
     if (updateSource !== UpdateSources.WEEK_SCROLL) {
       const pageIndex = items.findIndex(item => sameWeek(item, date, firstDay));

src/expandableCalendar/agendaList.tsx

@@ -83,6 +83,10 @@ const AgendaList = (props: AgendaListProps) => {
     }
   }, []);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useDidUpdate(() => {
     // NOTE: on first init data should set first section to the current date!!!
     if (updateSource !== UpdateSources.LIST_DRAG && updateSource !== UpdateSources.CALENDAR_INIT) {

src/expandableCalendar/index.tsx

@@ -214,6 +214,10 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const shouldHideArrows = !horizontal ? true : hideArrows || false;
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   const updateNativeStyles = () => {
     wrapper?.current?.setNativeProps(_wrapperStyles.current);
 

src/expandableCalendar/infiniteAgendaList.tsx

@@ -58,6 +58,10 @@ const InfiniteAgendaList = ({
   const [data, setData] = useState([] as any[]);
   const dataRef = useRef(data);
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   useEffect(() => {
     const items = sections.reduce((acc: any, cur: any) => {
       return [...acc, {title: cur.title, isTitle: true}, ...cur.data];

src/expandableCalendar/week.tsx

@@ -1,5 +1,5 @@
 import XDate from 'xdate';
-import React, {useRef, useMemo, useCallback} from 'react';
+import React, {useRef, useMemo, useCallback, useEffect} from 'react';
 import {View} from 'react-native';
 import isEqual from 'lodash/isEqual';
 
@@ -39,6 +39,10 @@ const Week = React.memo((props: WeekProps) => {
   } = props;
   const style = useRef(styleConstructor(theme));
 
+  useEffect(() => {
+    style.current = styleConstructor(theme);
+  }, [theme]);
+
   const disableDaySelection = useMemo(() => {
     return !!numberOfDays && numberOfDays > 1;
   }, [numberOfDays]);

src/timeline/Timeline.tsx

@@ -158,6 +158,10 @@ const Timeline = (props: TimelineProps) => {
   const calendarHeight = useRef((end - start) * HOUR_BLOCK_HEIGHT);
   const styles = useRef(styleConstructor(theme || props.styles, calendarHeight.current));
 
+  useEffect(() => {
+    styles.current = styleConstructor(theme || props.styles, calendarHeight.current);
+  }, [theme, props.styles]);
+
   const {scrollEvents} = useTimelineOffset({onChangeOffset, scrollOffset, scrollViewRef: scrollView});
 
   const width = useMemo(() => {