Timeline lines and position

[timothycuenat]

Description

There is a problem with positions of elements in the Timeline view.

Expected Behavior

I put a simply Timeline component with no attributes but the render is not the same with the previous versions.

Observed Behavior

The horizontal lines are above the labelTime and everything is too much on the left.

Environment

• npm ls react-native-calendars: react-native-calendars@1.1291.1
• npm ls react-native: react-native@0.70.4

Tested and debugged on Emulator Pixel 5 (Platform 33, Android 12) and on a Android phone (Nokia XR20)

Reproducible Demo

I tested all the properties available and search in source code component the styles used to modified that.

Screenshots

[Darkilen]

This commit introduced this bug : https://github.com/wix/react-native-calendars/commit/3446aa6762a8a8092ed4ae126a6897417995cfc1#diff-44679e5501b9d6244cca290a69f109c9bafe88c41286e347c853f3da8183f44cR140

diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 40547ed9..76304e6f 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -137,7 +137,7 @@ const Timeline = (props: TimelineProps) => {
     unavailableHoursColor,
     eventTapped,
     numberOfDays = 1,
-    timelineLeftInset = 72
+    timelineLeftInset = 0
   } = props;

   const pageDates = useMemo(() => {

The default value should not be 0, it should get the value set in the Context like here : https://github.com/wix/react-native-calendars/blob/3446aa6762a8a8092ed4ae126a6897417995cfc1/src/timeline-list/index.tsx#L56

If we use <TimelineList/> component, we don't have this bug. But we have it if we use <Timeline/> or <TimelineHours/> components.

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

[Darkilen]

Still relevant.

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

[mayfairr]

... :(