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" }}>

  <ScrollView>
    {TimeTable}
  </ScrollView>
</View>

); };

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).