Support initialTime for other days that are not "today"

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -10,6 +10,7 @@ import {
 } 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));
 
@@ -207,7 +208,13 @@ export default class TimelineCalendarScreen extends Component {
           rightArrowImageSource={require('../img/next.png')}
           markedDates={this.marked}
         />
-        <TimelineList events={eventsByDate} timelineProps={this.timelineProps} showNowIndicator scrollToNow />
+        <TimelineList
+          events={eventsByDate}
+          timelineProps={this.timelineProps}
+          showNowIndicator
+          scrollToNow
+          initialTime={INITIAL_TIME}
+        />
       </CalendarProvider>
     );
   }

src/timeline-list/index.tsx

@@ -11,14 +11,30 @@ import InfiniteList from '../infinite-list';
 import useTimelinePages, {INITIAL_PAGE, NEAR_EDGE_THRESHOLD} from './useTimelinePages';
 
 export interface TimelineListProps {
+  /**
+   * Map of all timeline events ({[date]: events})
+   */
   events: {[date: string]: TimelineProps['events']};
-  timelineProps?: Omit<TimelineProps, 'events' | 'showNowIndicator' | 'scrollToNow'>;
+  /**
+   * General timeline props to pass to each timeline item
+   */
+  timelineProps?: Omit<TimelineProps, 'events' | 'showNowIndicator' | 'scrollToNow' | 'initialTime'>;
+  /**
+   * Should show now indicator (shown only on "today" timeline)
+   */
   showNowIndicator?: boolean;
+  /**
+   * Should initially scroll to current time (relevant only for "today" timeline)
+   */
   scrollToNow?: boolean;
+  /**
+   * Should initially scroll to a specific time (relevant only for NOT "today" timelines)
+   */
+  initialTime?: TimelineProps['initialTime'];
 }
 
 const TimelineList = (props: TimelineListProps) => {
-  const {timelineProps, events, showNowIndicator, scrollToNow} = props;
+  const {timelineProps, events, showNowIndicator, scrollToNow, initialTime} = props;
   const {date, updateSource, setDate} = useContext(Context);
   const listRef = useRef<any>();
   const prevDate = useRef(date);
@@ -77,18 +93,22 @@ const TimelineList = (props: TimelineListProps) => {
     (_type, item, index) => {
       const timelineEvent = events[item];
       const isCurrent = prevDate.current === item;
+      const isInitialPage = index === INITIAL_PAGE;
+      const _isToday = isToday(new XDate(item));
+
       return (
         <>
           <Timeline
             {...timelineProps}
             key={item}
             date={item}
-            scrollToNow={scrollToNow && index === INITIAL_PAGE}
-            scrollToFirst={false}
             events={timelineEvent}
+            scrollToFirst={false}
+            scrollToNow={_isToday && isInitialPage && scrollToNow}
+            initialTime={!_isToday && isInitialPage ? initialTime : undefined}
             scrollOffset={isCurrent ? undefined : timelineOffset}
             onChangeOffset={onTimelineOffsetChange}
-            showNowIndicator={showNowIndicator && isToday(new XDate(item))}
+            showNowIndicator={_isToday && showNowIndicator}
           />
           {/* NOTE: Keeping this for easy debugging */}
           {/* <Text style={{position: 'absolute'}}>{item}</Text> */}

src/timeline/Timeline.tsx

@@ -59,6 +59,10 @@ export interface TimelineProps {
    * Should scroll to current time when loaded
    */
   scrollToNow?: boolean;
+  /**
+   * Initial time to scroll to
+   */
+  initialTime?: {hour: number; minutes: number};
   /**
    * Whether to use 24 hours format for the timeline hours
    */
@@ -95,6 +99,7 @@ const Timeline = (props: TimelineProps) => {
     theme,
     scrollToFirst,
     scrollToNow,
+    initialTime,
     showNowIndicator,
     scrollOffset,
     onChangeOffset,
@@ -118,6 +123,8 @@ const Timeline = (props: TimelineProps) => {
       initialPosition = min(map(packedEvents, 'top')) ?? 0;
     } else if (scrollToNow) {
       initialPosition = calcNowOffset(HOUR_BLOCK_HEIGHT);
+    } else if (initialTime) {
+      initialPosition = calcNowOffset(HOUR_BLOCK_HEIGHT, initialTime.hour, initialTime.minutes);
     }
 
     if (initialPosition) {