+1 having the same issue, or we fix how we get the theme value, or types for Theme interface.

For now as a workaround one can override the styles by directly setting the theme on stylesheet.calendar.main property like this

<Calendar
  theme={{
    'stylesheet.calendar.main': {
      week: {
        justifyContent: 'space-between',
        flexDirection: 'row',
      },
      monthView: {
        padding: 0,
        margin: 0,
      },
      dayContainer: {
        alignItems: 'center',
        flex: 1,
      },
      container: {
        padding: 0,
      },
    },
  }}
/>

I was updating an old project and had to update this library.
The following theme keys were giving me Typescript error:

• 'stylesheet.calendar.header'
• 'stylesheet.calendar.main'

but they are still working, as stated above by @badalsaibo

I just had to add a comment above my code to prevent TS errors:
// @ts-ignore: types / theme handling bug

I have no idea if in the newer version, the documentation is right or the types are, so I am going to finish updating this project as quickly as I can, so I don't enter a "dependencies update hell"...

If you look at node_modules/react-native-calendars/src/calendar/style.js you'll observe that getStyle function has

...(theme['stylesheet.calendar.main'] || {})

this should be changed to

...(theme.stylesheet.calendar.main || {})

I think this is only half the solution For example, <ExpandableCalendar/> already uses ...(theme?.stylesheet?.expandable?.main || {}), however this overwrites the entire style of each provided component instead of simply augmenting it.

So, I think in all styles.js files, this call:

return StyleSheet.create({
  // default styles,
  ...(theme?.stylesheet?.xxx?.yyy || {}) // or worse, ...(theme['stylesheet.xxx.yyy'])
})

should ideally be changed into this:

return StyleSheet.flatten(
  {
    // default styles,
  }, 
  theme?.stylesheet?.xxx?.yyy ?? {}
})

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Hey everyone, I’ve set up a PR to address this issue: #2573.

If you’d like to use the fix before it’s merged, you can apply it using patch-package.

A quick note: overriding specific styles using the stylesheet prop in the Theme will replace the entire style object. I recommend identifying the specific style you want to update, copying over all the existing styles, and then applying your custom changes.

This issue could potentially be resolved by implementing something similar to bartvanandel's suggestion of using StyleSheet.flatten instead of StyleSheet.create. However, I left that out of my PR because it might introduce hard-to-track side effects in existing codebases (and should probably have its own PR anyways). For example, if someone designed their styles with the current override behavior in mind, switching to a merge-based approach could cause unexpected issues. A different strategy might be needed to ensure backward compatibility.