TimelineList: RecyclerListView needs to have a bounded size. Currently height or, width is 0.Consider adding style={{flex:1}} or, fixed dimensions

[limaho]

Description

Trying to use TimelineList as described in example folder

Expected Behavior

Render calendar with TimelineList

Observed Behavior

What actually happened when you performed the above actions?

App crash with this:

ERROR  LayoutException: RecyclerListView needs to have a bounded size. Currently height or, width is 0.Consider adding style={{flex:1}} or, fixed dimensions

Environment

"react": "17.0.2",
"react-native": "0.68.2",
"react-native-calendars": "^1.1284.0"

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

1. Device/emulator/simulator & OS version: Android Emulator

Reproducible Demo

import React from "react";
import {
  ExpandableCalendar,
  TimelineList,
  CalendarProvider,
  CalendarUtils,
} from "react-native-calendars";
import _ from "lodash";

const INITIAL_TIME = { hour: 9, minutes: 0 };
const today = new Date();

const getDate = (offset = 0) =>
  CalendarUtils.getCalendarDateString(
    new Date().setDate(today.getDate() + offset)
  );

const EVENTS = [
  {
    start: `${getDate(-1)} 09:20:00`,
    end: `${getDate(-1)} 12:00:00`,
    title: "Merge Request to React Native Calendars",
    summary: "Merge Timeline Calendar to React Native Calendars",
  },
  {
    start: `${getDate()} 01:45:00`,
    end: `${getDate()} 02:45:00`,
    title: "Meeting C",
    summary: "Summary for meeting C",
    color: "#e6add8",
  },
  {
    start: `${getDate()} 02:40:00`,
    end: `${getDate()} 03:10:00`,
    title: "Meeting D",
    summary: "Summary for meeting D",
    color: "#e6add8",
  },
  {
    start: `${getDate()} 02:50:00`,
    end: `${getDate()} 03:20:00`,
    title: "Meeting E",
    summary: "Summary for meeting E",
    color: "#e6add8",
  },
  {
    start: `${getDate()} 04:30:00`,
    end: `${getDate()} 05:30:00`,
    title: "Meeting F",
    summary: "Summary for meeting F",
    color: "#e6add8",
  },
  {
    start: `${getDate(1)} 04:10:00`,
    end: `${getDate(1)} 04:40:00`,
    title: "Tea Time with Dr. Hasan",
    summary: "Tea Time with Dr. Hasan, Talk about Project",
  },
];

export const TimelineCalendarScreen = () => {
  const eventsByDate = _.groupBy(EVENTS, (e) =>
    CalendarUtils.getCalendarDateString(e.start)
  );

  const marked = {
    [`${getDate(-1)}`]: { marked: true },
    [`${getDate()}`]: { marked: true },
    [`${getDate(1)}`]: { marked: true },
    [`${getDate(2)}`]: { marked: true },
    [`${getDate(4)}`]: { marked: true },
  };

  const timelineProps = {
    format24h: true,
    start: 0,
    end: 24,
    unavailableHours: [
      { start: 0, end: 6 },
      { start: 22, end: 24 },
    ],
    overlapEventsSpacing: 8,
    rightEdgeSpacing: 24,
  };

  return (
    <CalendarProvider
      date={getDate()}
      collapsable={false}
      disabledOpacity={0.6}
    >
      <ExpandableCalendar
        current={getDate()}
        date={getDate()}
        markedDates={marked}
      />
      <TimelineList
        events={eventsByDate}
        timelineProps={timelineProps}
        showNowIndicator
        scrollToFirst
        initialTime={INITIAL_TIME}
      />
    </CalendarProvider>
  );
};

Screenshots

Screenshots or gifs of the issue and the suggested fix will help us move faster with the review process.

[NiklasDue]

Hi, try to wrap your <CalendarProvider> inside a <ScrollView>

[Opus26]

Set your <CalendarProvider style={{flex: 1}}> or wrap your component inside a view: <CalendarProvider><View><Component/></View></CalendarProvider>

[limaho]

Thanks @NiklasDue @Opus26 for your help. Both worked for me. I decided to wrap inside a View

[atheck]

I still have the same problem.

Neither setting style={{ flex: 1 }} on CalendarProvider nor wrapping the children with a View works:

<CalendarProvider
  date={toDateString(initialDate)}
>
  <View>
    <ExpandableCalendar firstDay={1} />
    <TimelineList events={eventsByDate} />
  </View>
</CalendarProvider>

I'm using

• "react-native": "0.72.7",
• "react-native-calendars": "1.1302.0",

[DrZoidberg09]

Same problem here. TimelineList does not work at all with this issue.

• "react-native": "0.73.4"
• "react-native-calendars": "^1.1303.0",