react-nativeexpoveloreact-native-calendars

Change react-native-calendar to dark mode

We are using react-native-calendar from wix.com, we are planning to create a dark mode version but we can not change the agenda background colore. how can i access it ?

1

I've found a solution to style the calendar element, the scrollpad, but ot the background of the view where all events are renderd.

Solution

  • I saw an example of the Agenda component on the repository and figure out it has a prop called theme. In the types.ts file, you can see the theme interface and all properties. Follow a simple example:

    <Agenda
  // Agenda theme
  theme={{
    agendaKnobColor: '#768390',
    calendarBackground: '#2d333b',
  }}
/>

    I created a snack on Expo for you to see the complete example on the computer with the source code.