React-native-calendars custom event rendering in timelineList

Question

I am making an appointment reservation list using react-native-calendars and combination of ExpandableCalendar and TimelineList.

This is how my application currently looks, what i would like to achive is to customize the view and change the display color to white instead of gray/black.

This is my return statement:

<CalendarProvider
                date={this.state.selectedDate}
                showTodayButton
                disabledOpacity={0.6}
                numberOfDays={3}
                style={styles.absolute}
            >
                <ExpandableCalendar
                    firstDay={0}
                    minDate={this.state.minDate}
                    maxDate={this.state.maxDate}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                />

                <TimelineList events={this.state.events} timelineProps={this.timelineProps} showNowIndicator scrollToNow />
    </CalendarProvider>

I tried it using renderEvent, but it doesn't work..

    renderEvent = (event: MyScheduleEvent) => {
        return (
            <View
                style={{
                    backgroundColor: event.color,
                }}
            >
                <Text style={{ color: "white" }}>{event.title}</Text>
                <Text>
                    {event.start} - {event.end}
                    test kr neki
                </Text>
            </View>
        );
    };

Does anyone know how i can get the text color to be white?

Edit: typo

Answer 1

I managed to get it working. What I did was I added renderEvent to timelineProps defined in component class like so:

    private timelineProps: Partial<TimelineProps> = {
        format24h: true,
        overlapEventsSpacing: 8,
        rightEdgeSpacing: 4,
        renderEvent: this.renderEvent,

        onBackgroundLongPress: this.handleBackgroundLongPress,
    };

I also did a bit of work on my renderEvent function

    renderEvent = (event: PackedEvent) => {
        return (
            <View
                style={{
                    backgroundColor: event.color,
                }}
            >
                <Text style={{ color: "white" }}>{event.title}</Text>
                <Text style={{ color: "white" }}>
                    {event.start.split("T")[1].substring(0, 5)} - {event.end.split("T")[1].substring(0, 5)}
                </Text>
            </View>
        );
    };