@expokit/cli 0.4.3 → 0.5.0

package/registry/timeline/files/src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
 import * as Haptics from 'expo-haptics';
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import {
   AccessibilityInfo,
   Animated,
@@ -25,41 +25,41 @@ export type AvatarFallback = 'soft' | 'solid' | 'gradient';
 
 export interface AvatarProps {
   /** Image URL. Initials show while it loads, and stay if it fails. */
-  src?: string;
+  src?: string | undefined;
   /** Used for the initials, the fallback colour (same name → same colour) and the accessibility label. */
-  name?: string;
+  name?: string | undefined;
   /** 'xs' 24 · 'sm' 32 · 'md' 40 · 'lg' 56 · 'xl' 72, or any number of points. */
-  size?: AvatarSize | number;
-  shape?: AvatarShape;
+  size?: AvatarSize | number | undefined;
+  shape?: AvatarShape | undefined;
   /** Presence dot cut into the bottom-right edge. */
-  status?: AvatarStatus;
+  status?: AvatarStatus | undefined;
   /** Soft pulse behind the status dot (default: on for 'online'). */
-  pulse?: boolean;
+  pulse?: boolean | undefined;
   /** Ring around the face, separated by a clear gap. */
-  ring?: AvatarRing;
+  ring?: AvatarRing | undefined;
   /** The story has been watched: the ring cross-fades to a quiet hairline. */
-  seen?: boolean;
+  seen?: boolean | undefined;
   /** Ring colour override — the first entry is used as a solid colour (default: `accent`). */
-  ringColors?: string[];
+  ringColors?: string[] | undefined;
   /** Spin a broken story ring — a "story is loading" state. */
-  ringSpin?: boolean;
+  ringSpin?: boolean | undefined;
   /** Initials look when there is no photo. Default 'soft'. */
-  fallback?: AvatarFallback;
+  fallback?: AvatarFallback | undefined;
   /** Soft layered shadow under the face (default true for 72pt and up). */
-  elevated?: boolean;
+  elevated?: boolean | undefined;
   /** Notification count (`true` = dot), top-right. */
-  badge?: number | boolean;
+  badge?: number | boolean | undefined;
   /** Verified seal with a check, bottom-right (bottom-left when a status dot is shown). */
-  verified?: boolean;
+  verified?: boolean | undefined;
   /** Colour behind the avatar — the dot, badge and seal cut-outs are punched in it. Default: theme background. */
-  surface?: string;
+  surface?: string | undefined;
   /** Ring and verified seal colour (default: theme accent). */
-  accent?: string;
+  accent?: string | undefined;
   /** Makes it a button with a spring press and a light haptic tick. */
-  onPress?: () => void;
+  onPress?: (() => void) | undefined;
   /** Haptic tick on press (default true). */
-  haptics?: boolean;
-  style?: StyleProp<ViewStyle>;
+  haptics?: boolean | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const SIZES: Record<AvatarSize, number> = { xs: 24, sm: 32, md: 40, lg: 56, xl: 72 };
@@ -99,7 +99,9 @@ export function colorFromName(name = '') {
 export function initialsFrom(name = '', max = 2) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (!parts.length) return '';
-  const letters = parts.length === 1 ? [parts[0][0]] : [parts[0][0], parts[parts.length - 1][0]];
+  const first = parts[0] ?? '';
+  const last = parts[parts.length - 1] ?? '';
+  const letters = parts.length === 1 ? [first[0]] : [first[0], last[0]];
   return letters.slice(0, max).join('').toUpperCase();
 }
 
@@ -144,13 +146,13 @@ export function Avatar({
   // Remember which URL failed so a new `src` gets a fresh try without resetting state in an effect.
   const [failedSrc, setFailedSrc] = useState<string>();
   const failed = !!src && failedSrc === src;
-  const loaded = useRef(new Animated.Value(0)).current;
-  const press = useRef(new Animated.Value(1)).current;
-  const spin = useRef(new Animated.Value(0)).current;
-  const pulseV = useRef(new Animated.Value(0)).current;
+  const [loaded] = useState(() => new Animated.Value(0));
+  const [press] = useState(() => new Animated.Value(1));
+  const [spin] = useState(() => new Animated.Value(0));
+  const [pulseV] = useState(() => new Animated.Value(0));
 
   const isSeen = seen ?? ring === 'seen';
-  const seenV = useRef(new Animated.Value(isSeen ? 1 : 0)).current;
+  const [seenV] = useState(() => new Animated.Value(isSeen ? 1 : 0));
 
   useEffect(() => {
     loaded.setValue(0);
@@ -248,11 +250,8 @@ export function Avatar({
         { width: px, height: px, borderRadius: faceRadius, backgroundColor: faceBg },
         showElevated
           ? {
-              shadowColor: '#000',
-              shadowOpacity: dark ? 0.5 : 0.14,
-              shadowRadius: px * 0.16,
-              shadowOffset: { width: 0, height: Math.max(2, px * 0.07) },
-              elevation: Math.round(px * 0.1),
+              // boxShadow scales with the avatar and looks the same on iOS, Android and web.
+              boxShadow: `0px ${Math.round(Math.max(2, px * 0.07))}px ${Math.round(px * 0.32)}px rgba(0,0,0,${dark ? 0.5 : 0.14})`,
             }
           : null,
       ]}
@@ -338,7 +337,7 @@ export function Avatar({
         strokeWidth={width}
         fill="none"
         strokeLinecap="round"
-        strokeDasharray={dashed ? [circ * 0.7, circ * 0.3] : undefined}
+        {...(dashed ? { strokeDasharray: [circ * 0.7, circ * 0.3] } : null)}
       />
     ) : (
       <Rect
@@ -571,12 +570,15 @@ const SEAL = (() => {
     const rr = k % 2 === 0 ? 12 : 10.1;
     return [12 + rr * Math.cos(a), 12 + rr * Math.sin(a)] as const;
   });
-  const mid = (a: readonly number[], b: readonly number[]) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  type Pt = readonly [number, number];
+  const mid = (a: Pt, b: Pt): Pt => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
   const f = (v: number) => v.toFixed(2);
-  const start = mid(pts[pts.length - 1], pts[0]);
+  // `pts` has 2n points and every index below is taken modulo its length.
+  const at = (k: number) => pts[k % pts.length]!;
+  const start = mid(at(pts.length - 1), at(0));
   let d = `M${f(start[0])} ${f(start[1])}`;
   pts.forEach((pt, i) => {
-    const m = mid(pt, pts[(i + 1) % pts.length]);
+    const m = mid(pt, at(i + 1));
     d += `Q${f(pt[0])} ${f(pt[1])} ${f(m[0])} ${f(m[1])}`;
   });
   return d + 'Z';
@@ -596,20 +598,20 @@ export interface AvatarGroupProps {
   /** `<Avatar>` elements. The group sets their size, shape and surface. */
   children: React.ReactNode;
   /** Show at most this many, then a "+N" chip. */
-  max?: number;
-  size?: AvatarSize | number;
-  shape?: AvatarShape;
+  max?: number | undefined;
+  size?: AvatarSize | number | undefined;
+  shape?: AvatarShape | undefined;
   /** How far each avatar tucks under the previous one, as a fraction of its size (default 0.28). */
-  overlap?: number;
+  overlap?: number | undefined;
   /** Real total when it is larger than the children you pass (e.g. 1,284 members). */
-  total?: number;
+  total?: number | undefined;
   /** Staggered spring-in on mount (skipped with reduce motion). */
-  animated?: boolean;
+  animated?: boolean | undefined;
   /** Colour of the separating borders — match what the group sits on (default: theme background). */
-  surface?: string;
+  surface?: string | undefined;
   /** Makes the "+N" chip a button. */
-  onPressMore?: () => void;
-  style?: StyleProp<ViewStyle>;
+  onPressMore?: (() => void) | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 /** Overlapping avatars separated by cut-out borders, with a "+N" chip and a staggered spring-in. */
@@ -625,7 +627,7 @@ export function AvatarGroup({
   onPressMore,
   style,
 }: AvatarGroupProps) {
-  const { colors, radius, dark, font } = useKit();
+  const { colors, radius, dark, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const px = resolveSize(size);
@@ -638,8 +640,13 @@ export function AvatarGroup({
   const inner = shape === 'circle' ? radius.full : Math.min(px / 2, radius.scale(Math.round(px * 0.3)));
   const wrapCorner = shape === 'circle' ? radius.full : inner + border;
 
-  const anims = useRef<Animated.Value[]>([]).current;
-  while (anims.length < count) anims.push(new Animated.Value(animated ? 0 : 1));
+  // One value per avatar, grown (never shrunk) as children are added; this render already uses the grown list.
+  const [pool, setPool] = useState<Animated.Value[]>([]);
+  let anims = pool;
+  if (pool.length < count) {
+    anims = [...pool, ...Array.from({ length: count - pool.length }, () => new Animated.Value(animated ? 0 : 1))];
+    setPool(anims);
+  }
 
   useEffect(() => {
     if (!animated) return;
@@ -657,35 +664,41 @@ export function AvatarGroup({
   const names = shown.map((c) => c.props.name).filter(Boolean) as string[];
   const label =
     names.length === 0
-      ? `${total ?? items.length} people`
-      : `${names.slice(0, 3).join(', ')}${(total ?? items.length) - Math.min(3, names.length) > 0 ? ` and ${(total ?? items.length) - Math.min(3, names.length)} more` : ''}`;
-
-  const wrap = (child: React.ReactNode, i: number, key: React.Key) => (
-    <Animated.View
-      key={key}
-      style={{
-        marginLeft: i === 0 ? 0 : -px * overlap,
-        borderRadius: wrapCorner,
-        padding: border,
-        backgroundColor: bg,
-        zIndex: count - i,
-        opacity: anims[i],
-        transform: [
-          { translateX: anims[i].interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) },
-          { scale: anims[i].interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) },
-        ],
-      }}
-    >
-      {child}
-    </Animated.View>
-  );
+      ? labels.peopleCount(total ?? items.length)
+      : (total ?? items.length) - Math.min(3, names.length) > 0
+        ? labels.namesAndMore(names.slice(0, 3).join(', '), (total ?? items.length) - Math.min(3, names.length))
+        : names.slice(0, 3).join(', ');
+
+  // `anims` was grown to `count` above, and i < count.
+  const wrap = (child: React.ReactNode, i: number, key: React.Key) => {
+    const v = anims[i]!;
+    return (
+      <Animated.View
+        key={key}
+        style={{
+          marginLeft: i === 0 ? 0 : -px * overlap,
+          borderRadius: wrapCorner,
+          padding: border,
+          backgroundColor: bg,
+          zIndex: count - i,
+          opacity: v,
+          transform: [
+            { translateX: v.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) },
+            { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) },
+          ],
+        }}
+      >
+        {child}
+      </Animated.View>
+    );
+  };
 
   const extraText = extra > 999 ? `${(extra / 1000).toFixed(extra >= 10000 ? 0 : 1).replace(/\.0$/, '')}k` : String(extra);
   const more =
     extra > 0 ? (
       <Pressable
         accessibilityRole={onPressMore ? 'button' : 'text'}
-        accessibilityLabel={`${extra} more`}
+        accessibilityLabel={labels.moreCount(extra)}
         disabled={!onPressMore}
         onPress={onPressMore}
         hitSlop={px < 44 ? Math.ceil((44 - px) / 2) : undefined}
@@ -774,20 +787,22 @@ function luminance(hex: string) {
 }
 
 function contrast(a: string, b: string) {
-  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  const la = luminance(a);
+  const lb = luminance(b);
+  const [x, y] = la >= lb ? [la, lb] : [lb, la];
   return (x + 0.05) / (y + 0.05);
 }
 
 const styles = StyleSheet.create({
   face: { overflow: 'visible' },
   clip: { flex: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
-  initials: { fontWeight: '400', includeFontPadding: false, textAlign: 'center' },
+  initials: { fontWeight: '400', includeFontPadding: false, textAlign: 'center', textAlignVertical: 'center' },
   inkShadow: { textShadowColor: 'rgba(0,0,0,0.18)', textShadowRadius: 2, textShadowOffset: { width: 0, height: 0.5 } },
   pulse: { position: 'absolute' },
   dot: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
   badge: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
-  badgeText: { fontWeight: '400', letterSpacing: -0.2, includeFontPadding: false },
+  badgeText: { fontWeight: '400', letterSpacing: -0.2, includeFontPadding: false, textAlignVertical: 'center' },
   group: { flexDirection: 'row', alignItems: 'center' },
   more: { alignItems: 'center', justifyContent: 'center' },
-  moreText: { fontWeight: '400', letterSpacing: -0.2 },
+  moreText: { fontWeight: '400', letterSpacing: -0.2, includeFontPadding: false, textAlignVertical: 'center' },
 });

package/registry/timeline/files/src/components/ui/timeline.tsx

@@ -3,7 +3,6 @@ import {
   AccessibilityInfo,
   Animated,
   Easing,
-  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -45,27 +44,27 @@ export interface TimelineLink {
 }
 
 export interface TimelineItem {
-  key?: string;
+  key?: string | undefined;
   title: string;
-  description?: string;
+  description?: string | undefined;
   /** Timestamp or meta, e.g. "Oct 12 · 2:14 PM" or "2h". */
-  time?: string;
+  time?: string | undefined;
   /** Default 'done'. */
-  status?: TimelineStatus;
+  status?: TimelineStatus | undefined;
   /** Icon inside a larger dot. */
-  icon?: TimelineIconName | ((props: TimelineIconProps) => React.ReactNode);
+  icon?: (TimelineIconName | ((props: TimelineIconProps) => React.ReactNode)) | undefined;
   /** Photo (initials fallback) instead of a dot. */
-  avatar?: { src?: string; name: string };
+  avatar?: { src?: string; name: string } | undefined;
   /** A photo under the text — a URL, or `{ uri, aspectRatio }` (default 16:9). */
-  image?: TimelineImageSource;
+  image?: TimelineImageSource | undefined;
   /** Several photos in a 1-, 2- or 3-up grid (more than three show a "+N" tile). Combined with `image`. */
-  images?: TimelineImageSource[];
+  images?: TimelineImageSource[] | undefined;
   /** Small accent chips under the text. */
-  tags?: string[];
+  tags?: string[] | undefined;
   /** Tappable accent links under the text. */
-  links?: TimelineLink[];
+  links?: TimelineLink[] | undefined;
   /** Anything under the description: a card, a quote, tags, buttons. */
-  content?: React.ReactNode;
+  content?: React.ReactNode | undefined;
 }
 
 export interface TimelineProps {
@@ -74,23 +73,23 @@ export interface TimelineProps {
    * 'default' roomy rows · 'compact' small dots, one-line rows · 'card' each event on a card ·
    * 'scroll' renders its own scroll view and fills the connector as you scroll (give it a height).
    */
-  variant?: TimelineVariant;
+  variant?: TimelineVariant | undefined;
   /** Colour of done / current dots and the filled line (default: theme accent). */
-  accent?: string;
+  accent?: string | undefined;
   /** Draw a check in done dots (default true). */
-  checks?: boolean;
+  checks?: boolean | undefined;
   /** Entrance + connector fill, or the scroll-driven fill for 'scroll' (default true; off with reduce motion). */
-  animated?: boolean;
+  animated?: boolean | undefined;
   /** Colour behind the rail — fills hollow dots and the mini status badges (default: theme background). */
-  surface?: string;
+  surface?: string | undefined;
   /** 'scroll' only: rendered above the timeline inside the scroll view. */
-  header?: React.ReactNode;
+  header?: React.ReactNode | undefined;
   /** 'scroll' only: rendered below the timeline inside the scroll view. */
-  footer?: React.ReactNode;
+  footer?: React.ReactNode | undefined;
   /** 'scroll' only: style for the scroll view's content container (default `{ paddingVertical: 12 }`). */
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
   /** Root style. For 'scroll' this is the scroll view, so set a `height` (or `flex: 1` on a screen). */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 // Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
@@ -186,7 +185,7 @@ function ScrollTimeline({
   const n = items.length;
   const rail = 34;
 
-  const scrollY = useRef(new Animated.Value(0)).current;
+  const [scrollY] = useState(() => new Animated.Value(0));
   const lastY = useRef(0);
   const [viewH, setViewH] = useState(0);
   const [contentH, setContentH] = useState(0);
@@ -216,7 +215,7 @@ function ScrollTimeline({
     if (!scrolls) return [] as number[];
     const anchor = viewH * SCROLL_ANCHOR;
     const k = 1 + (viewH - anchor) / maxScroll;
-    return items.map((_, i) => (listY + nodes[i] - anchor) / k);
+    return items.map((_, i) => (listY + (nodes[i] ?? 0) - anchor) / k);
   }, [scrolls, viewH, maxScroll, listY, nodes, items]);
 
   // progress = lit * 2 + (near ? 1 : 0), one number so React can skip identical updates.
@@ -226,8 +225,8 @@ function ScrollTimeline({
     const update = (y: number) => {
       lastY.current = y;
       let lit = 0;
-      while (lit <= reach && triggers[lit] <= y) lit++;
-      const near = lit <= reach && y >= triggers[lit] - viewH * NEAR;
+      while (lit <= reach && (triggers[lit] ?? Infinity) <= y) lit++;
+      const near = lit <= reach && y >= (triggers[lit] ?? Infinity) - viewH * NEAR;
       setProgress(lit * 2 + (near ? 1 : 0));
     };
     update(lastY.current);
@@ -244,17 +243,17 @@ function ScrollTimeline({
   );
 
   const top = nodes[0] ?? 0;
-  const fillH = reach > 0 && measured ? nodes[reach] - top : 0;
+  const fillH = reach > 0 && measured ? (nodes[reach] ?? top) - top : 0;
   const dottedFrom = Math.max(0, reach);
-  const dottedH = measured && reach < n - 1 ? nodes[n - 1] - nodes[dottedFrom] : 0;
+  const dottedH = measured && reach < n - 1 ? (nodes[n - 1] ?? 0) - (nodes[dottedFrom] ?? 0) : 0;
 
   let fillStyle: Animated.WithAnimatedValue<ViewStyle> | null = null;
   if (fillH > 0) {
     if (frozen) {
       fillStyle = {};
     } else if (triggers.length) {
-      const t0 = triggers[0];
-      const t1 = Math.max(triggers[reach], t0 + 1);
+      const t0 = triggers[0] ?? 0;
+      const t1 = Math.max(triggers[reach] ?? t0, t0 + 1);
       const p = scrollY.interpolate({ inputRange: [t0, t1], outputRange: [0.0001, 1], extrapolate: 'clamp' });
       fillStyle = {
         transform: [
@@ -359,11 +358,11 @@ interface RowProps {
   arriveDelay: number;
   fillMs: number;
   /** 'scroll': what the dot shows right now (it lights up when the fill reaches it). */
-  dotStatus?: TimelineStatus;
+  dotStatus?: TimelineStatus | undefined;
   /** 'scroll': the fill has reached this dot — pops it. */
-  lit?: boolean;
+  lit?: boolean | undefined;
   /** 'scroll': reports the dot centre's y inside the list. */
-  onNode?: (y: number) => void;
+  onNode?: ((y: number) => void) | undefined;
 }
 
 function Row({
@@ -383,7 +382,7 @@ function Row({
   lit,
   onNode,
 }: RowProps) {
-  const { colors, radius, dark, font } = useKit();
+  const { colors, radius, dark, font, shadow } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const compact = variant === 'compact';
   const card = variant === 'card';
@@ -399,9 +398,9 @@ function Row({
   const gapBelow = compact ? 14 : card ? 12 : scroll ? 32 : 26;
   const entrance = !still && !scroll;
 
-  const enter = useRef(new Animated.Value(entrance ? 0 : 1)).current;
-  const fill = useRef(new Animated.Value(still ? 1 : 0)).current;
-  const pop = useRef(new Animated.Value(1)).current;
+  const [enter] = useState(() => new Animated.Value(entrance ? 0 : 1));
+  const [fill] = useState(() => new Animated.Value(still ? 1 : 0));
+  const [pop] = useState(() => new Animated.Value(1));
   const wasLit = useRef(!!lit);
   const [lineH, setLineH] = useState(0);
 
@@ -508,15 +507,8 @@ function Row({
     </>
   );
 
-  const cardShadow: ViewStyle =
-    Platform.OS === 'android'
-      ? { elevation: current ? 3 : 1 }
-      : {
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: current ? 6 : 3 },
-          shadowOpacity: dark ? 0.35 : current ? 0.08 : 0.04,
-          shadowRadius: current ? 16 : 10,
-        };
+  // boxShadow via the kit: the same soft card shadow on iOS, Android and web.
+  const cardShadow: ViewStyle = shadow(current ? 'md' : 'sm');
 
   const dotWrap = scroll
     ? { transform: [{ scale: pop }] }
@@ -693,8 +685,8 @@ function Dot({
 }) {
   const { colors, radius, dark } = useKit();
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
-  const draw = useRef(new Animated.Value(still ? 1 : 0)).current; // JS: dash offsets
-  const pulse = useRef(new Animated.Value(0)).current; // native: halo
+  const [draw] = useState(() => new Animated.Value(still ? 1 : 0)); // JS: dash offsets
+  const [pulse] = useState(() => new Animated.Value(0)); // native: halo
   const current = status === 'current';
   const marked = status === 'error' || (status === 'done' && checks);
 
@@ -884,12 +876,9 @@ function Sheen({ id, size }: { id: string; size: number }) {
   );
 }
 
+/** A soft tinted glow as boxShadow, identical on iOS, Android and web. */
 function glow(color: string): ViewStyle {
-  return Platform.OS === 'ios'
-    ? { shadowColor: color, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 5 }
-    : Platform.OS === 'android'
-      ? { elevation: 2 }
-      : {};
+  return { boxShadow: `0px 2px 10px ${alpha(color, 0.3)}` };
 }
 
 function srcOf(image: TimelineImageSource) {
@@ -905,12 +894,15 @@ function TimelineGallery({ images, dim }: { images: TimelineImageSource[]; dim:
     styles.gallery,
     { borderRadius: radius.md, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06), opacity: dim ? 0.6 : 1 },
   ];
-  const tile = (i: number, flex: ViewStyle) => (
-    <Photo key={i} uri={shown[i].uri} delay={i * 90} style={[flex, { borderRadius: radius.scale(4) }]} more={i === 2 && extra > 0 ? extra : 0} />
-  );
+  const tile = (i: number, flex: ViewStyle) => {
+    const image = shown[i];
+    return image ? (
+      <Photo key={i} uri={image.uri} delay={i * 90} style={[flex, { borderRadius: radius.scale(4) }]} more={i === 2 && extra > 0 ? extra : 0} />
+    ) : null;
+  };
 
   if (shown.length === 1) {
-    return <View style={[frame, { aspectRatio: shown[0].ratio }]}>{tile(0, styles.fill)}</View>;
+    return <View style={[frame, { aspectRatio: shown[0]?.ratio }]}>{tile(0, styles.fill)}</View>;
   }
   if (shown.length === 2) {
     return (
@@ -934,7 +926,7 @@ function TimelineGallery({ images, dim }: { images: TimelineImageSource[]; dim:
 function Photo({ uri, delay, style, more }: { uri: string; delay: number; style: StyleProp<ViewStyle>; more: number }) {
   const { colors, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
-  const shown = useRef(new Animated.Value(0)).current;
+  const [shown] = useState(() => new Animated.Value(0));
   return (
     <View style={[styles.photo, { backgroundColor: colors.muted }, style]}>
       <Animated.Image