I am trying to use any calendar component from the react-native-calendars library, however I am not being able to match the calendar colors with my given theme.
For exemple, I have the following code:
export default function Statistics({ navigation }) {
const theme = useTheme();
return (
<CalendarList
firstDay={1}
pastScrollRange={1}
futureScrollRange={1}
scrollEnabled
showScrollIndicator={false}
theme={{
backgroundColor: theme.colors.background,
calendarBackground: theme.colors.background,
textSectionTitleColor: theme.colors.onBackground,
selectedDayBackgroundColor: 'transparent',
selectedDayTextColor: theme.colors.onBackground,
todayTextColor: theme.colors.onBackground,
todayBackgroundColor: theme.colors.primary,
dayTextColor: 'gray', //Disabled days
dotColor: theme.colors.primary,
selectedDotColor: theme.colors.onBackground,
monthTextColor: theme.colors.onBackground,
}}
/>
</SafeAreaView>
);
}
Where theme
comes from react-native-paper theming provider, and I am using it also in the app context:
function App() {
const [isThemeDark, setIsThemeDark] = React.useState(false);
const theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;
const toggleTheme = React.useCallback(() => {
return setIsThemeDark(!isThemeDark);
}, [isThemeDark]);
const preferences = React.useMemo(
() => ({
toggleTheme,
isThemeDark,
}),
[toggleTheme, isThemeDark]
);
return (
<PaperProvider theme={theme}>
<PreferencesContext.Provider value={preferences}>
<>
<RootNavigation theme={theme} />
</>
</PreferencesContext.Provider>
</PaperProvider>
);
}
That toggleTheme
over there is being use in a toggleButton component I have somewhere else in the code. When I click it, everything else changes background as expected, but the calendar no.
However, if I go back and forth in the screens, it changes color. I am guessing it is because the calendar library is not being able to tell that it needs to re-render the component once the color changes.
I wonder if there is a way to force this component re-rendering? I am not sure what to do here.
2
Answers
I ended up figuring out the answer. Since I noticed the problem was with re-rendering, I wrapped the CalendarList component inside a View component and conditionally apply a key prop to it based on the current theme. This forced the CalendarList component to re-render whenever the theme changes.
According to the react-native-calendars documentation, CalendarList accepts Flatlist Props . Which means you can make use of extraData Prop from flatlist to re-render the calendar on theme changes.
It can be something as follows