Question 33215 in React native Question posted in
The official React Native documentation can be found here.

Change react-native-calendar to dark mode – React native

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.

Tags:

2

Answers


  1. 0

    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. Or you scan the QR Code from your smartphone using the Expo Go app.

    QR Code to see the full example to customize the Agenda's theme

    Login or Signup to reply.
  2. 0

    You can change the agenda background color by modifying the value of reservationsBackgroundColor inside your theme object. Here is an example :

    theme = {
  {
    reservationsBackgroundColor: "#000000",
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search