Items not showing in proper timeline

[vijay-fs]

import React, { useState, useMemo } from "react";
import { View,Text, ScrollView } from "react-native";
import moment from "moment";
import Timetable from "react-native-calendar-timetable";
import Calendar from "./Calendar";

const TimetableScreen = () => {
const [selectedDate, setSelectedDate] = useState(null);
const [date] = React.useState(new Date());
const [from] = React.useState(moment().subtract(3, "days").toDate());
const [till] = React.useState(moment().add(3, "days").toISOString());
const range = { from, till };
console.log(
{
Date1: moment().toDate(),
Date2: moment().add(2, "hours").toDate(),
},
"selectedDate"
);

const [items] = React.useState([
{
title: "Some event",
startDate: moment()
.set({ hour: 14, minute: 0, second: 0, millisecond: 0 })
.toDate(),
endDate: moment()
.set({ hour: 16, minute: 0, second: 0, millisecond: 0 })
.toDate(),
},
]);

function MyItemCard({ style, item, dayIndex, daysTotal }) {
console.log(item, dayIndex, daysTotal, "MyItemCard");
return (
<View
style={{
backgroundColor: "red",
borderRadius: 10,
elevation: 5,
}}
>
{item.title}
Start: {moment(item.startDate).format("YYYY-MM-DD HH:mm")}
End: {moment(item.endDate).format("YYYY-MM-DD HH:mm")}

);
}

const TimeTable = useMemo(() => {
  return (
    <Timetable
      items={items}
      renderItem={(props) => <MyItemCard {...props} />}
      date={selectedDate}
    />
  );
}, [selectedDate]);

return (
<View style={{ height: "60%", width: "90%", alignSelf: "center" }}>


{TimeTable}


);
};

export default TimetableScreen;

[dorkyboi]

From your code, I can see that you are not applying the generated styles:

//                      ↓ - this property is unused
function MyItemCard({ style, item, dayIndex, daysTotal }) {
    console.log(item, dayIndex, daysTotal, "MyItemCard");
    return (
        <View
            style={{
                backgroundColor: "red",
                borderRadius: 10,
                elevation: 5,
                ...style, // ← use it here
            }}
        >
            {item.title}
            Start: {moment(item.startDate).format("YYYY-MM-DD HH:mm")}
            End: {moment(item.endDate).format("YYYY-MM-DD HH:mm")}
        </View>
    );
}

As per documentation, you should apply the given styles to your components. Also, be extra careful to not accidentally override any style property (unless that's what you want to do).