Impossible to create events with "react-native-calendars"

I'm trying to create an event to display with the react-native-calendar library.

The timeline displays correctly, but the problem is that I don't know how to display the events in the timeline. I've tried many methods, but none of them work.

Here's the last one I tried:

const event2 = { //The problem is mainly located here, I don't know which format to use
   day: 1,      
   month: 1,    
   year: 2017,  
   time: '00:00',   
   dateString: '2025-08-07' 
}
const timelineProps = {renderEvent: (event2) => <View sytle={{backgroundColor: 'red'}} event={items}><Text>test</Text></View> };

  <CalendarProvider
    date={new Date()}
    showTodayButton
    disabledOpacity={0.6}
    numberOfDays={3}
    style={styles.absolute}
   >
       <ExpandableCalendar
          firstDay={0}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
        />
        <TimelineList 
            events={event2} 
            key={1} 
            timelineProps={timelineProps} 
        />
 </CalendarProvider>

Thanks for your help !

Event interface

const event2 = { //The problem is mainly located here, I don't know which format to use

From the source code, you can see the interface for an Event:

export interface Event {
  id?: string;
  start: string;
  end: string;
  title: string;
  summary?: string;
  color?: string;
}

This is also exported as TimelineEventProps, so you can import it as:

import { TimelineEventProps } from 'react-native-calendars';

You can see some usage of it in the example that is linked in the docs:

const newEvent = {
  id: 'draft',
  start: `${timeString}`,
  end: `${timeObject.date} ${hourString}:${minutesString}:00`,
  title: 'New Event',
  color: 'white'
};

as well as in the mock data of the example:

{
  start: `${getDate()} 01:30:00`,
  end: `${getDate()} 02:30:00`,
  title: 'Meeting B',
  summary: 'Summary for meeting B',
  color: EVENT_COLOR
},

events prop

<TimelineList 
  events={event2} 

The Timeline component's events prop also accepts a list of events, so passing a single event would not necessarily be valid. You could wrap that in an array, such as with [event2].

The TimelineList component's events prop is a bit different:

/**
 * Map of all timeline events ({[date]: events})
 */
events: {[date: string]: TimelineProps['events']};

With a single event similar to above, you could structure this as:

const eventsByDate = { [getDate()]: [event2] }

and then pass it as a prop:

<TimelineList 
  events={eventsByDate}

Example

I created an Expo Snack as a live demo. Here's the code of the Snack:

import { CalendarUtils, Timeline } from 'react-native-calendars';

// set dates using the internal utils, based off https://github.com/wix/react-native-calendars/blob/32a5eed2463aad79b7373db4585db0452aa8e18b/example/src/mocks/timelineEvents.ts#L4-L5
const now = new Date();
function getDate(offset = 0) {
  return CalendarUtils.getCalendarDateString(new Date().setDate(now.getDate() + offset));
} 
const today = getDate();

// sample events
const events = [{
  id: "draft1",
  start: `${today} 01:30:00`,
  end: `${today} 02:30:00`,
  title: "Meeting A",
  summary: "Summary for meeting A",
  color: "lightgreen"
}, {
  id: "draft2",
  start: `${today} 02:00:00`,
  end: `${today} 02:30:00`,
  title: "Meeting B",
  summary: "Summary for meeting B",
  color: "lightblue"
}];

export default function App() {
  return (
    <Timeline
      date={`${today}`}
      start={0}
      end={6}
      events={events}
      scrollToFirst />
  );
}

And here's a screenshot of what it renders like:

---

Historical note: This is an expanded version of my comments