react-native-agenda-kit 0.1.0

package/src/expandable/useExpandGesture.ts

@@ -0,0 +1,147 @@
+/**
+ * Drag the calendar open and closed. `progress` moves (0 closed, 1 open); every
+ * layer reads it as a transform or opacity. Follows `ChartSheet.tsx`: remember
+ * where this drag began, clamp while dragging, land on an end. `activeOffsetY(±8)`
+ * and `failOffsetX(±12)` settle the axis against the horizontal pagers inside the
+ * same detector within the first few pixels.
+ */
+
+import { ANIMATION } from '../theme/tokens';
+import { useCallback, useMemo } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  cancelAnimation,
+  useSharedValue,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { runOnJS, runOnUI } from 'react-native-worklets';
+import { KIT_EASING } from '../core/motion';
+import { clampNum } from '../core/worklets';
+import { PAN_THRESHOLD, SNAP_VELOCITY } from './geometry';
+
+type OnToggled = (isOpen: boolean) => void;
+
+const finish = (lastReported: SharedValue<number>, target: 0 | 1, onToggled: OnToggled) => {
+  'worklet';
+  if (lastReported.value === target) return;
+  lastReported.value = target;
+  runOnJS(onToggled)(target === 1);
+};
+
+/**
+ * Snap to an end and report a CHANGE of end once it lands. Module scope, so the
+ * plugin workletizes it unconditionally. The duration scales with the distance
+ * left, so a release two pixels from open does not take the full animation.
+ */
+export const snap = (
+  progress: SharedValue<number>,
+  lastReported: SharedValue<number>,
+  target: 0 | 1,
+  reduceMotion: boolean,
+  onToggled: OnToggled,
+) => {
+  'worklet';
+  if (progress.value === target) {
+    finish(lastReported, target, onToggled);
+    return;
+  }
+  const duration = reduceMotion
+    ? 0
+    : clampNum(Math.abs(target - progress.value) * ANIMATION.slow, ANIMATION.base, ANIMATION.slow);
+  progress.value = withTiming(target, { duration, easing: KIT_EASING }, (done) => {
+    'worklet';
+    if (done) finish(lastReported, target, onToggled);
+  });
+};
+
+type Params = {
+  progress: SharedValue<number>;
+  /** Open − closed height of the visible month, px. */
+  travel: SharedValue<number>;
+  enabled: boolean;
+  openThreshold?: number;
+  closeThreshold?: number;
+  reduceMotion: boolean;
+  /** The starting end — passed in rather than read from `progress.value` during render. */
+  initialOpen: boolean;
+  /** Identity-stable: the gesture's worklets capture it. */
+  onToggled: OnToggled;
+};
+
+export const useExpandGesture = ({
+  progress,
+  travel,
+  enabled,
+  openThreshold = PAN_THRESHOLD,
+  closeThreshold = PAN_THRESHOLD,
+  reduceMotion,
+  initialOpen,
+  onToggled,
+}: Params) => {
+  const start = useSharedValue(0);
+  /** 1 once `onEnd` ran for this gesture, so `onFinalize` does not snap twice. */
+  const ended = useSharedValue(0);
+  /** The end last reported: `onToggled` fires on a change only. */
+  const lastReported = useSharedValue(initialOpen ? 1 : 0);
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(enabled)
+        .activeOffsetY([-8, 8])
+        .failOffsetX([-12, 12])
+        .onBegin(() => {
+          'worklet';
+          // Catch the calendar mid-snap rather than letting it finish under the finger.
+          cancelAnimation(progress);
+          start.value = progress.value;
+          ended.value = 0;
+        })
+        .onUpdate((e) => {
+          'worklet';
+          // Closed and dragging up: hold at 0, which reads as the end of the travel.
+          if (start.value === 0 && e.translationY < 0) {
+            progress.value = 0;
+            return;
+          }
+          progress.value = clampNum(start.value + e.translationY / travel.value, 0, 1);
+        })
+        .onEnd((e) => {
+          'worklet';
+          ended.value = 1;
+          const deltaPx = (progress.value - start.value) * travel.value;
+          let target: 0 | 1;
+          if (Math.abs(e.velocityY) > SNAP_VELOCITY) {
+            target = e.velocityY > 0 ? 1 : 0;
+          } else if (start.value < 0.5) {
+            target = deltaPx > openThreshold ? 1 : 0;
+          } else {
+            target = -deltaPx > closeThreshold ? 0 : 1;
+          }
+          snap(progress, lastReported, target, reduceMotion, onToggled);
+        })
+        .onFinalize(() => {
+          'worklet';
+          if (ended.value === 1) return;
+          // Cancelled before activating (a day tap, a pager claiming the touch):
+          // land on the nearer end rather than freezing where `onBegin` caught it.
+          snap(progress, lastReported, progress.value >= 0.5 ? 1 : 0, reduceMotion, onToggled);
+        }),
+    // Shared values are stable for the hook's life; only these rebuild the gesture.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [closeThreshold, enabled, onToggled, openThreshold, reduceMotion],
+  );
+
+  /** `undefined` toggles. Returns the end moved TO — the library's `toggleCalendarPosition` contract. */
+  const snapTo = useCallback(
+    (target?: 0 | 1): boolean => {
+      const to: 0 | 1 = target ?? (progress.value >= 0.5 ? 0 : 1);
+      runOnUI(snap)(progress, lastReported, to, reduceMotion, onToggled);
+      return to === 1;
+    },
+    [lastReported, onToggled, progress, reduceMotion],
+  );
+
+  return { pan, snapTo, lastReported };
+};

package/src/expandable/useHorizontalPager.ts

@@ -0,0 +1,116 @@
+/**
+ * The month pager's horizontal paging over the kit's index space. The week strip
+ * shared it until it became a vertical tape (2026-09-11).
+ *
+ * A programmatic move pages to its day instantly; moves stamped with the pager's
+ * own `origin` are ignored. A doctor's swipe commits at momentum end, and only
+ * when it left its start page.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type Animated from 'react-native-reanimated';
+import {
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useSharedValue,
+  type AnimatedRef,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { runOnJS, runOnUI } from 'react-native-worklets';
+import { useCalendarContext } from '../core/CalendarContext';
+import type { MoveOrigin } from '../types';
+
+/** The pager reads only drag begin and momentum end; the scroll events between are waste. */
+export const PAGER_SCROLL_THROTTLE = 100;
+
+export type HorizontalPagerParams = {
+  width: number;
+  initialPage: number;
+  origin: MoveOrigin;
+  /** Worklet, identity-stable: the page that shows day index `idx`. */
+  pageOf: (idx: number) => number;
+  /** The page shown or headed to, when the caller needs to read it; the hook owns one otherwise. */
+  page?: SharedValue<number>;
+  /** JS, identity-stable: the doctor's own swipe settled on a different page. */
+  onSettled: (page: number) => void;
+};
+
+/** A new width moved every page: land back on the one that was showing. */
+const reland = (
+  ref: AnimatedRef<Animated.ScrollView>,
+  widthSV: SharedValue<number>,
+  page: SharedValue<number>,
+  ready: SharedValue<number>,
+  width: number,
+) => {
+  'worklet';
+  widthSV.value = width;
+  if (ready.value === 1) scrollTo(ref, page.value * width, 0, false);
+};
+
+export const useHorizontalPager = ({
+  width,
+  initialPage,
+  origin,
+  pageOf,
+  page: callerPage,
+  onSettled,
+}: HorizontalPagerParams) => {
+  const { store } = useCalendarContext();
+  const ref = useAnimatedRef<Animated.ScrollView>();
+  const widthSV = useSharedValue(width);
+  const ownPage = useSharedValue(initialPage);
+  const page = callerPage ?? ownPage;
+  const dragStartPage = useSharedValue(0);
+  const userDriven = useSharedValue(0);
+  const ready = useSharedValue(0);
+
+  // Read once: the native ScrollView re-applies `contentOffset` whenever its value
+  // changes, which would throw the pager back to its mount page on a width change.
+  const [contentOffset] = useState(() => ({ x: initialPage * width, y: 0 }));
+  const laidOutWidth = useRef(width);
+  useEffect(() => {
+    if (laidOutWidth.current === width) return;
+    laidOutWidth.current = width;
+    runOnUI(reland)(ref, widthSV, page, ready, width);
+  }, [page, ready, ref, width, widthSV]);
+
+  const onLayout = useCallback(() => {
+    ready.value = 1;
+  }, [ready]);
+
+  const move = store.move;
+
+  useAnimatedReaction(
+    () => move.value.seq,
+    (seq, prev) => {
+      if (prev === null || seq === prev) return;
+      const m = move.value;
+      if (m.origin === origin) return;
+      const target = pageOf(m.idx);
+      if (page.value !== target) page.value = target;
+      if (ready.value === 1) {
+        userDriven.value = 0;
+        scrollTo(ref, target * widthSV.value, 0, false);
+      }
+    },
+  );
+
+  const onScroll = useAnimatedScrollHandler({
+    onBeginDrag: () => {
+      userDriven.value = 1;
+      dragStartPage.value = page.value;
+    },
+    onMomentumEnd: (e) => {
+      const landed = Math.round(e.contentOffset.x / widthSV.value);
+      const wasUser = userDriven.value === 1;
+      userDriven.value = 0;
+      if (page.value !== landed) page.value = landed;
+      if (wasUser && landed !== dragStartPage.value) runOnJS(onSettled)(landed);
+    },
+  });
+
+  return { ref, onScroll, onLayout, contentOffset, widthSV };
+};

package/src/index.ts

@@ -0,0 +1,62 @@
+/**
+ * react-native-agenda-kit — the one barrel.
+ *
+ * Three surfaces (`ExpandableCalendar`, `AgendaList`, `TimelineList`) sharing
+ * one date owner (`CalendarProvider`) and one integer index space. The kit
+ * fetches nothing, knows no domain type, and reads only its own theme:
+ * everything domain-shaped arrives as a render prop or a primitive.
+ *
+ * Every scroll handler depends on the worklets babel plugin (shipped inside
+ * `babel-preset-expo`, or added manually via `react-native-worklets/plugin`);
+ * `core/worklets.ts` asserts it in DEV.
+ */
+
+/* ── Components ────────────────────────────────────────────────────────── */
+export { AgendaList } from './agenda/AgendaList';
+export { CalendarProvider, type CalendarProviderProps } from './core/CalendarProvider';
+export { ExpandableCalendar } from './expandable/ExpandableCalendar';
+export { TimelineList } from './timeline/TimelineDay';
+export { KitText } from './core/KitText';
+
+/* ── Building a range, and reading the current date ────────────────────── */
+export { buildRange, clampIndex, dayIndexOf, todayIndexOf, ymdAt } from './core/dateKey';
+export { useCalendarDate } from './core/CalendarContext';
+export { epochDayOfYmd, todayEpochDay, ymdOfEpochDay } from './core/civil';
+
+/* ── Theme ─────────────────────────────────────────────────────────────── */
+export {
+  AgendaKitThemeProvider,
+  darkTheme,
+  lightTheme,
+  resolveTheme,
+  useKitTheme,
+  type AgendaKitColors,
+  type AgendaKitFonts,
+  type AgendaKitTheme,
+  type AgendaKitThemeProviderProps,
+  type PartialAgendaKitTheme,
+} from './theme';
+/** Static metrics the kit lays out with. Read them; they are not themeable. */
+export { ANIMATION, EASING, FONT_SIZE, RADIUS, SPACING } from './theme/tokens';
+
+/* ── Types ─────────────────────────────────────────────────────────────── */
+export { UpdateSources } from './types';
+export type {
+  AgendaListProps,
+  AgendaListRef,
+  AgendaSection,
+  AvailableHours,
+  CalendarMove,
+  CalendarPosition,
+  CalendarRange,
+  DateString,
+  ExpandableCalendarProps,
+  ExpandableCalendarRef,
+  MarkedDates,
+  MoveOrigin,
+  PackedTimelineEvent,
+  TimelineEvent,
+  TimelineInnerProps,
+  TimelineListProps,
+  UpdateSource,
+} from './types';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,85 @@
+/**
+ * Theme plumbing. Two exports matter to a consumer: `AgendaKitThemeProvider`
+ * and `useKitTheme`. Everything else is how the kit builds stylesheets.
+ *
+ * A theme is optional — with no provider above it the kit renders `lightTheme`,
+ * so a consumer can drop `<ExpandableCalendar />` in and see something correct
+ * before deciding on colours.
+ */
+
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import {
+  lightTheme,
+  resolveTheme,
+  type AgendaKitTheme,
+  type PartialAgendaKitTheme,
+} from './theme';
+
+const ThemeContext = createContext<AgendaKitTheme>(lightTheme);
+
+export type AgendaKitThemeProviderProps = {
+  /** A full theme, or a partial one layered over `lightTheme` / `darkTheme`. */
+  theme?: AgendaKitTheme | PartialAgendaKitTheme;
+  /** Which built-in to layer a partial theme over. Ignored for a full theme. */
+  base?: AgendaKitTheme;
+  children: ReactNode;
+};
+
+export const AgendaKitThemeProvider = ({
+  theme,
+  base = lightTheme,
+  children,
+}: AgendaKitThemeProviderProps) => {
+  // The resolved object's IDENTITY is the stylesheet cache key, so it must be
+  // stable across renders — a consumer passing an inline literal would
+  // otherwise rebuild every sheet in the tree on every render.
+  const value = useMemo(
+    () => resolveTheme(base, theme as PartialAgendaKitTheme | undefined),
+    [base, theme],
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useKitTheme = (): AgendaKitTheme => useContext(ThemeContext);
+
+export type KitStyleArgs = {
+  colors: AgendaKitTheme['colors'];
+  fonts: AgendaKitTheme['fonts'];
+  dark: boolean;
+};
+
+export type KitStyleFactory<T> = (args: KitStyleArgs) => T;
+
+/**
+ * The ONE way a kit component builds a StyleSheet.
+ *
+ *   const makeStyles = ({ colors }: KitStyleArgs) => StyleSheet.create({ ... });
+ *   const styles = useKitStyles(makeStyles);
+ *
+ * A module-scope `StyleSheet.create` is built once and can never follow the
+ * theme. This builds it through a factory instead, and caches one sheet per
+ * (factory, theme) for the life of the process — so a list with three hundred
+ * rows calling this from its row component shares one object, and memoised
+ * rows still compare equal.
+ *
+ * The factory MUST be a module-scope constant depending only on its arguments:
+ * it is half the cache key.
+ */
+const cache = new WeakMap<KitStyleFactory<any>, WeakMap<AgendaKitTheme, unknown>>();
+
+export function useKitStyles<T>(factory: KitStyleFactory<T>): T {
+  const theme = useKitTheme();
+
+  let byTheme = cache.get(factory);
+  if (!byTheme) {
+    byTheme = new WeakMap();
+    cache.set(factory, byTheme);
+  }
+
+  let built = byTheme.get(theme) as T | undefined;
+  if (!built) {
+    built = factory({ colors: theme.colors, fonts: theme.fonts, dark: theme.dark });
+    byTheme.set(theme, built);
+  }
+  return built;
+}

package/src/theme/index.ts

@@ -0,0 +1,18 @@
+export {
+  AgendaKitThemeProvider,
+  useKitStyles,
+  useKitTheme,
+  type AgendaKitThemeProviderProps,
+  type KitStyleArgs,
+  type KitStyleFactory,
+} from './ThemeProvider';
+export {
+  darkTheme,
+  lightTheme,
+  resolveTheme,
+  type AgendaKitColors,
+  type AgendaKitFonts,
+  type AgendaKitTheme,
+  type PartialAgendaKitTheme,
+} from './theme';
+export { ANIMATION, EASING, FONT_SIZE, RADIUS, SPACING } from './tokens';

package/src/theme/theme.ts

@@ -0,0 +1,110 @@
+/**
+ * The kit's entire visual surface: eleven colours and three font families.
+ *
+ * It is deliberately flat and deliberately small. Every name says what the
+ * value PAINTS, not where it came from in some design system — so a consumer
+ * can map their own tokens onto it in one object literal and know nothing was
+ * missed. If a colour is not in this list, the kit does not draw it.
+ */
+
+export type AgendaKitColors = {
+  /** Ground under the calendar, the agenda rows and the timeline. */
+  surface: string;
+  /** Recessed band behind the week strip, one step darker than `surface`. */
+  canvas: string;
+  /** Hairlines: hour lines, the grid, row and block borders. */
+  border: string;
+  /** Accent INK — today's number, dots, the Today pill's label, the refresh spinner. */
+  accent: string;
+  /** Accent FILL — the selected-day pill. The one place accent is a background. */
+  accentFill: string;
+  /** Text and icons that sit ON `accentFill`. */
+  onAccentFill: string;
+  /** Default event-block fill (a tint of the accent). */
+  accentSoft: string;
+  /** Available-hours wash behind the timeline (the faintest accent tint). */
+  accentSubtle: string;
+  /** Primary text: day numbers, event titles. */
+  text: string;
+  /** Metadata: hour labels, disabled days, weekday initials. */
+  textMuted: string;
+  /** The now line and its cap. The only non-accent hue the kit draws. */
+  nowIndicator: string;
+};
+
+/**
+ * Font families by weight. `undefined` means the platform default — the kit
+ * ships no fonts and never assumes one is loaded.
+ */
+export type AgendaKitFonts = {
+  regular?: string;
+  medium?: string;
+  semiBold?: string;
+};
+
+export type AgendaKitTheme = {
+  colors: AgendaKitColors;
+  fonts: AgendaKitFonts;
+  dark: boolean;
+};
+
+export type PartialAgendaKitTheme = {
+  colors?: Partial<AgendaKitColors>;
+  fonts?: Partial<AgendaKitFonts>;
+  dark?: boolean;
+};
+
+/** True-neutral greys (R=G=B) so the accent carries all the colour. */
+export const lightTheme: AgendaKitTheme = {
+  colors: {
+    surface: '#FFFFFF',
+    canvas: '#F4F4F4',
+    border: '#DDDDDD',
+    accent: '#5B6FAE',
+    accentFill: '#5B6FAE',
+    onAccentFill: '#FFFFFF',
+    accentSoft: '#E8EBF4',
+    accentSubtle: '#F7F8FB',
+    text: '#1F1F1F',
+    textMuted: '#6F6F6F',
+    nowIndicator: '#EF4444',
+  },
+  fonts: {},
+  dark: false,
+};
+
+/**
+ * `text` is #CCCCCC, not white: a bold stroke at 14:1 on a dark surface blooms
+ * optically and reads as glowing. The accent FILL does not lift (white on the
+ * lighter #818CF8 is only 2.99:1) — only the INK does.
+ */
+export const darkTheme: AgendaKitTheme = {
+  colors: {
+    surface: '#181818',
+    canvas: '#121212',
+    border: '#3A3A3A',
+    accent: '#818CF8',
+    accentFill: '#5B6FAE',
+    onAccentFill: '#FFFFFF',
+    accentSoft: '#212123',
+    accentSubtle: '#1C1C1E',
+    text: '#CCCCCC',
+    textMuted: '#8C8C8C',
+    nowIndicator: '#F87171',
+  },
+  fonts: {},
+  dark: true,
+};
+
+/** Shallow-merges each group. Called once per distinct input, in the provider. */
+export const resolveTheme = (
+  base: AgendaKitTheme,
+  overrides?: PartialAgendaKitTheme,
+): AgendaKitTheme => {
+  if (!overrides) return base;
+  return {
+    colors: { ...base.colors, ...overrides.colors },
+    fonts: { ...base.fonts, ...overrides.fonts },
+    dark: overrides.dark ?? base.dark,
+  };
+};

package/src/theme/tokens.ts

@@ -0,0 +1,50 @@
+/**
+ * Static metrics. NOT themeable, on purpose.
+ *
+ * Row heights, week-strip geometry and the packer all read these at module
+ * scope — `expandable/geometry.ts` computes line heights from `FONT_SIZE`
+ * before any React tree exists. A themeable font size would mean measuring at
+ * runtime, which is exactly what this kit refuses to do (declared heights are
+ * why a fling never shifts the list).
+ *
+ * Motion is here for the same reason: `KIT_EASING` is captured by worklets at
+ * module scope, so it cannot depend on a React context.
+ *
+ * Colours and font FAMILIES are themeable — see `theme.ts`.
+ */
+
+export const SPACING = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+} as const;
+
+export const FONT_SIZE = {
+  xxs: 11,
+  xs: 12,
+  sm: 14,
+  base: 16,
+} as const;
+
+export const RADIUS = {
+  none: 0,
+  card: 8,
+  inner: 6,
+  full: 9999,
+} as const;
+
+/** Milliseconds. Short on purpose: a calendar that animates slowly feels broken. */
+export const ANIMATION = {
+  fast: 80,
+  base: 120,
+  slow: 180,
+} as const;
+
+export const EASING = {
+  bezier: [0.2, 0, 0, 1] as [number, number, number, number],
+} as const;

package/src/timeline/DayColumn.tsx

@@ -0,0 +1,84 @@
+/**
+ * One day as two absolute layers, so the pager can slot the shared hour lines between them:
+ * `DayBands` (availability) under the lines, `DayEvents` (packed blocks, then the now-line) above.
+ * Packing is memoised on the day's own event array: mounting a neighbour packs one day.
+ */
+
+import { memo, useMemo, type ReactElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type { AvailableHours, PackedTimelineEvent, TimelineEvent } from '../types';
+import { EventBlock } from './EventBlock';
+import { NowIndicator } from './NowIndicator';
+import { packEvents } from './packEvents';
+import { buildBands } from './timelineMath';
+
+type BandsProps = {
+  left: number;
+  width: number;
+  availableHours: AvailableHours | undefined;
+  color: string;
+  hourHeight: number;
+};
+
+const DayBandsInner = ({ left, width, availableHours, color, hourHeight }: BandsProps) => {
+  const bands = useMemo(() => buildBands(availableHours, hourHeight), [availableHours, hourHeight]);
+  const fill = useMemo(() => ({ backgroundColor: color }), [color]);
+  if (!bands.length) return null;
+  return (
+    <View pointerEvents="none" style={[styles.column, { left, width }]}>
+      {bands.map((band, i) => (
+        <View key={i} style={[styles.band, fill, { top: band.top, height: band.height }]} />
+      ))}
+    </View>
+  );
+};
+
+export const DayBands = memo(DayBandsInner);
+DayBands.displayName = 'DayBands';
+
+type EventsProps<E extends TimelineEvent> = {
+  left: number;
+  width: number;
+  events: E[] | undefined;
+  hourHeight: number;
+  overlapEventsSpacing: number;
+  rightEdgeSpacing: number;
+  renderEvent?: (event: PackedTimelineEvent<E>) => ReactElement | null;
+  onEventPress?: (event: PackedTimelineEvent<E>) => void;
+  /** Only on today's column while the indicator is on; stable, so a minute tick renders nothing. */
+  nowMinutes?: SharedValue<number>;
+};
+
+const DayEventsInner = <E extends TimelineEvent>({
+  left,
+  width,
+  events,
+  hourHeight,
+  overlapEventsSpacing,
+  rightEdgeSpacing,
+  renderEvent,
+  onEventPress,
+  nowMinutes,
+}: EventsProps<E>) => {
+  const packed = useMemo(
+    () => packEvents(events, { colW: width, hourHeight, overlapEventsSpacing, rightEdgeSpacing }),
+    [events, hourHeight, overlapEventsSpacing, rightEdgeSpacing, width],
+  );
+  if (!packed.length && !nowMinutes) return null;
+  return (
+    <View pointerEvents="box-none" style={[styles.column, { left, width }]}>
+      {packed.map((event) => (
+        <EventBlock key={event.id} event={event} renderEvent={renderEvent} onPress={onEventPress} />
+      ))}
+      {nowMinutes ? <NowIndicator hourHeight={hourHeight} minutes={nowMinutes} /> : null}
+    </View>
+  );
+};
+
+export const DayEvents = memo(DayEventsInner) as typeof DayEventsInner;
+
+const styles = StyleSheet.create({
+  column: { position: 'absolute', top: 0, bottom: 0 },
+  band: { position: 'absolute', left: 0, right: 0 },
+});