Changing theme dynamically

[jondesam]

is there any way to change theme dynamically depends on state or props?

I found #322 but still wonder any other possible ways to change theme dynamically

[Simek]

Maybe anyone has an idea how to work around that issue? I have failed miserably few times with different approaches (not involving source editing).

Unfortunately react-native-calendars is now the only one package which stops our app new release introducing Dark Mode support on iOS.

Also could an owner or contributor tell us how much effort and/or how difficult it will be to introduce dynamic styles? I'm open to help with development during next weekend if you're interested.

[reubn]

Having the same problem. It's a slight hack but I solved the problem by setting the key prop based on the theme i.e

const [{key, theme}, setTheme] = useState({key: 'dark', theme: {...}})
...
<Calendar key={key} theme={theme} />

When the theme changes, so does the key, so the Calendar rerenders only when the theme changes.

[amol251]

Having the same problem. It's a slight hack but I solved the problem by setting the key prop based on the theme i.e

const [{key, theme}, setTheme] = useState({key: 'dark', theme: {...}})
...
<Calendar key={key} theme={theme} />

When the theme changes, so does the key, so the Calendar rerenders only when the theme changes.

Yes, but it will re-render the calendar. As the styles are constructed in the constructor you can't change the theme.

I had achieved this by making changes in style creation

https://drive.google.com/open?id=1mZOVjOjuQdiesgnzvkxQXPd5LUpIFkkW

[reubn]

What exactly did you change?

[amol251]

you can use this code

https://drive.google.com/open?id=1FRwJGiv-9_yNIutnqJ8ZLMb3ZzKIih2Y

run the example.

[eqlion]

@amol251, your link does not work :(

[narender2031]

@amol251 Can your share your changes

[amol251]

Link: https://drive.google.com/open?id=1FRwJGiv-9_yNIutnqJ8ZLMb3ZzKIih2Y

This link is working, check this code

[chenei]

Do you have any idea how we can support it? @ethanshar @emilisb

[ethanshar]

It's a little problematic. The way the Calendar component was designed is so the theme prop is more of an initialTheme prop. It is being used only when the component constructed. This making it an un-controlled component (theme wise)

One solution is to use key (as already suggested here). But since Calendar is a huge component it can heavily affect on performance.

Using getDerivedStateFromProps is impossible, because we're keeping the generated style as a class member (on this) and getDerivedStateFromProps is a static method.

The only right solution is to turn this prop (theme) to a controlled prop. But unfortunately, this requires a lot of work and possibly introduce breaking changes.

[glushkina1]

thanks a lot, @amol251!

Btw, I don't think that useState is a good way to solve this problem if someone is needed to pass more than two params, here's my solution:

const keyRender = (selectedDate: Date, theme: string) => {
        const date = dateFormatter(selectedDate) // '2012-02-02'
        return `${date}-${theme}` 
    }


<Calendar
      key={keyRender(selectedDate,theme)}
/>

[manueldeprada]

I will leave here the full copy-paste solution for dark mode, using the approach from the first post:

const themes = {
  light: {
    calendarBackground: 'white',
    dayTextColor: 'black',
    monthTextColor: 'black',
    textDisabledColor: 'grey',
  },
  dark: {
    calendarBackground: 'black',
    dayTextColor: 'white',
    monthTextColor: 'white',
    textDisabledColor: 'grey',
  }
};
    const {colorScheme} = useColorScheme();
    const [{key, theme}, setTheme] = useState({key: colorScheme, theme: themes[colorScheme]});
    useEffect(() => {
       setTheme({key: colorScheme, theme: themes[colorScheme]});
     }, [colorScheme]);

return (
        <Calendar
          key={key}
          theme={theme}
...