Timeline is being hidden by bottom tab navigator

[tuanthanh2067]

Description

I'm having an error where my timeline will stops at 23:00, and I couldn't scroll past it. The screen has a header, and a bottom navigator. I tried to add margin or padding to the bottom but it doesn't work. Hidding the header, and bottom navigator is also not an option.

Expected Behavior

The timeline from 1:00 to 23:59 should be visible.

Observed Behavior

What actually happened when you performed the above actions?

No error message

Environment

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

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

1. Device/emulator/simulator & OS version: Iphone 12, IOS 16

Reproducible Demo

https://github.com/wix/react-native-calendars/assets/51014333/787866de-fc0b-4574-bf21-241fe00f0398

Code

import React, { useState } from "react";
import { useTheme, Text, Button, Chip } from "@rneui/themed";
import { SafeAreaView, View, ScrollView } from "react-native";
import Animated, { FadeInRight } from "react-native-reanimated";
import {
  TimelineList,
  CalendarUtils,
  CalendarProvider,
  Calendar,
} from "react-native-calendars";
import _ from "lodash";

const today = new Date();
const INITIAL_TIME = { hour: 9, minutes: 0 };
export const getDate = (offset = 0) =>
  CalendarUtils.getCalendarDateString(
    new Date().setDate(today.getDate() + offset)
  );

const PlanAgenda: React.FC = () => {
  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",
    },
  ];

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

  const timelineProps = {};

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "center" }}>
      <CalendarProvider
        date={"2023-06-01"}
        disabledOpacity={0.6}
        // numberOfDays={3}
        showTodayButton
      >
        {/* <Calendar firstDay={1} /> */}
        <TimelineList
          events={eventsByDate}
          timelineProps={{
            format24h: true,
            start: 0,
            end: 24,
            overlapEventsSpacing: 8,
            rightEdgeSpacing: 24,
          }}
          showNowIndicator
          scrollToNow
          initialTime={INITIAL_TIME}
        />
      </CalendarProvider>
    </SafeAreaView>
  );
};

export default PlanAgenda;

[david-fang0621]

@tuanthanh2067, Have you solved the issue? I was getting the same issue, which was solved by adding margin-bottom in the theme.

<TimelineList
    events={eventsByDate}
    timelineProps={{
      theme: {...theme, timelineContainer: {
         marginBottom: tabBarHeight,
      }}
      format24h: true,
      start: 0,
      end: 24,
      overlapEventsSpacing: 8,
      rightEdgeSpacing: 24,
    }}
    showNowIndicator
    scrollToNow
    initialTime={INITIAL_TIME}
  />

[tuanthanh2067]

@david-fang0621

Thanks, I wasn't able to solve it so I switched to a different library, but thank you for your recommendation. I'll try it 💯

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[modifyljf]

Any solutions?

[aliyapici]

I have the same problem. Has anyone found a solution?

[geoffcfchen]

@tuanthanh2067, Have you solved the issue? I was getting the same issue, which was solved by adding margin-bottom in the theme.

<TimelineList
    events={eventsByDate}
    timelineProps={{
      theme: {...theme, timelineContainer: {
         marginBottom: tabBarHeight,
      }}
      format24h: true,
      start: 0,
      end: 24,
      overlapEventsSpacing: 8,
      rightEdgeSpacing: 24,
    }}
    showNowIndicator
    scrollToNow
    initialTime={INITIAL_TIME}
  />

Thanks! This solution works! Really appreciated it.