React-native-calendars: Calendar does not rerender on theme change

[piu130]

Description

After I update theme prop Calendar does not update. After I change the page and go back (Calender rerenders) the colors has changed.

Expected Behavior

Calendar should change its color after change the prop.

Observed Behavior

Nothing happens.

Environment

• npm ls react-native-calendars: 1.16.1
• npm ls react-native: 0.52.2

Also specify:

1. Phone/emulator/simulator & version: Android API 21 (Lollipop)

Reproducible Demo

const StyledCalendar = ({ colors }) => (
  <Calendar theme={{calendarBackground: colors.windowBackground}}  />
)

const mapStateToProps = (state) => ({colors: state.colors})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(StyledCalendar)

Change colors somewhere with redux but color does not update.

[tautvilas]

unfortunately stylesheets are created one time in constructor. currently there are no plans to add dynamic behavior to theme property.

[muttli]

I have a similar problem where we have a "dark mode" in the app. The style sheets update with this state, but the calendar would not re-render. I solved it by basically doing this:

if (myStateVariable) {
  return (<CalendarComponent>)
}

return (
   <View>
       <CalendarComponent />
    </View>
)

This effectively re-renders the calendar.