@expokit/cli 0.4.0 → 0.4.2

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

@@ -1,6 +1,8 @@
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
+  Easing,
   PanResponder,
   Pressable,
   StyleSheet,
@@ -98,6 +100,9 @@ type FlatProps = CalendarBaseProps & {
   onChange?: (value: CalendarValue) => void;
 };
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const CELL_H = 48;
 const CIRCLE = 38;
 const CIRCLE_TOP = 2;
@@ -205,6 +210,7 @@ export function Calendar(props: CalendarProps) {
   const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const fmt = useFormatters(locale);
+  const reduce = useReduceMotion();
 
   const [inner, setInner] = useState<CalendarValue>(defaultValue ?? null);
   const current = value !== undefined ? value : inner;
@@ -252,7 +258,11 @@ export function Calendar(props: CalendarProps) {
     setLeaving({ month: prev, dir });
     slide.stopAnimation();
     slide.setValue(0);
-    Animated.spring(slide, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start(({ finished }) => {
+    // Reduce Motion: a short cross-fade in place (the translate interpolations are flat).
+    const anim = reduce
+      ? Animated.timing(slide, { toValue: 1, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true })
+      : Animated.spring(slide, { toValue: 1, useNativeDriver: true, ...motion.gentle });
+    anim.start(({ finished }) => {
       if (finished) setLeaving(null);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -267,7 +277,8 @@ export function Calendar(props: CalendarProps) {
     if (next !== 'days' && view === 'days') setPickYear(visible.getFullYear());
     setView(next);
     viewAnim.setValue(0);
-    Animated.spring(viewAnim, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    if (reduce) Animated.timing(viewAnim, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(viewAnim, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
   };
 
   /* selection */
@@ -332,11 +343,13 @@ export function Calendar(props: CalendarProps) {
     manyKeys: many ? many.map(toDateKey).join('|') : undefined,
     tint,
     fullLabel: fmt.full,
+    reduce,
     onDayPress,
   };
 
   const W = width || 320;
-  const dir = dirRef.current;
+  // Reduce Motion: months swap with a fade only, no sideways slide.
+  const dir = reduce ? 0 : dirRef.current;
   const prevDisabled = view === 'days' ? monthIndex(visible) - 1 < minM : view === 'months' ? pickYear * 12 - 1 < minM : false;
   const nextDisabled = view === 'days' ? monthIndex(visible) + 1 > maxM : view === 'months' ? (pickYear + 1) * 12 > maxM : false;
   const decadeStart = Math.floor(pickYear / 12) * 12;
@@ -381,7 +394,7 @@ export function Calendar(props: CalendarProps) {
           >
             {title}
           </Animated.Text>
-          {monthPicker ? <Chevron turned={view !== 'days'} color={view === 'days' ? colors.mutedForeground : tint} /> : null}
+          {monthPicker ? <Chevron turned={view !== 'days'} color={view === 'days' ? colors.mutedForeground : tint} reduce={reduce} /> : null}
         </Pressable>
         <View style={styles.navs}>
           {showJump ? (
@@ -392,7 +405,9 @@ export function Calendar(props: CalendarProps) {
               hitSlop={4}
               style={({ pressed }) => [styles.todayBtn, { borderRadius: radius.capsule(32), backgroundColor: pressed ? colors.secondary : colors.muted }]}
             >
-              <Text style={[styles.todayText, ff, { color: tint }]}>Today</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.todayText, ff, { color: tint }]}>
+                Today
+              </Text>
             </Pressable>
           ) : null}
           <NavButton dir={-1} disabled={prevDisabled} onPress={() => step(-1)} />
@@ -404,12 +419,12 @@ export function Calendar(props: CalendarProps) {
         <Animated.View
           style={{
             opacity: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-            transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [1.04, 1] }) }],
+            transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 1.04, 1] }) }],
           }}
         >
           <View style={styles.weekRow} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
             {weekdays.map((w) => (
-              <Text key={w.long} numberOfLines={1} style={[styles.weekday, ff, { color: colors.mutedForeground }]}>
+              <Text key={w.long} numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.weekday, ff, { color: colors.mutedForeground }]}>
                 {w.short}
               </Text>
             ))}
@@ -422,7 +437,7 @@ export function Calendar(props: CalendarProps) {
                   styles.leaving,
                   {
                     opacity: slide.interpolate({ inputRange: [0, 0.7], outputRange: [1, 0], extrapolate: 'clamp' }),
-                    transform: [{ translateX: slide.interpolate({ inputRange: [0, 1], outputRange: [0, -leaving.dir * W * 0.6] }) }],
+                    transform: [{ translateX: slide.interpolate({ inputRange: [0, 1], outputRange: [0, reduce ? 0 : -leaving.dir * W * 0.6] }) }],
                   },
                 ]}
               >
@@ -446,7 +461,7 @@ export function Calendar(props: CalendarProps) {
             { minHeight: gridH ? gridH + 28 : undefined },
             {
               opacity: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-              transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] }) }],
+              transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.94, 1] }) }],
             },
           ]}
         >
@@ -488,7 +503,9 @@ export function Calendar(props: CalendarProps) {
                       },
                     ]}
                   >
-                    <Text style={[styles.pickText, ff, { color: selected ? readableOn(tint) : isNow ? tint : colors.foreground }]}>{label}</Text>
+                    <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.pickText, ff, { color: selected ? readableOn(tint) : isNow ? tint : colors.foreground }]}>
+                      {label}
+                    </Text>
                   </View>
                 )}
               </Pressable>
@@ -520,6 +537,7 @@ interface MonthGridProps {
   manyKeys?: string;
   tint: string;
   fullLabel: (d: Date) => string;
+  reduce: boolean;
   onDayPress: (d: Date) => void;
 }
 
@@ -541,6 +559,7 @@ const MonthGrid = memo(function MonthGrid({
   manyKeys,
   tint,
   fullLabel,
+  reduce,
   onDayPress,
 }: MonthGridProps) {
   const weeks = useMemo(() => buildWeeks(month, weekStartsOn, fixedWeeks), [month, weekStartsOn, fixedWeeks]);
@@ -595,6 +614,7 @@ const MonthGrid = memo(function MonthGrid({
                 highlight={highlightedDates?.[key]}
                 tile={tiles && inMonth && !inBand}
                 tint={tint}
+                reduce={reduce}
                 onPress={onDayPress}
               />
             );
@@ -620,6 +640,7 @@ interface DayCellProps {
   highlight?: string;
   tile: boolean;
   tint: string;
+  reduce: boolean;
   onPress: (d: Date) => void;
 }
 
@@ -638,6 +659,7 @@ const DayCell = memo(function DayCell({
   highlight,
   tile,
   tint,
+  reduce,
   onPress,
 }: DayCellProps) {
   const { colors, radius, font } = useKit();
@@ -646,8 +668,10 @@ const DayCell = memo(function DayCell({
   const pop = useRef(new Animated.Value(selected ? 1 : 0)).current; // native: circle scale + opacity
   const bandIn = useRef(new Animated.Value(band === 'none' ? 0 : 1)).current; // native: band opacity
   useEffect(() => {
-    Animated.spring(pop, { toValue: selected ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [selected, pop]);
+    // Reduce Motion: the selection fills in with a quick fade, no scale pop.
+    if (reduce) Animated.timing(pop, { toValue: selected ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(pop, { toValue: selected ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [selected, pop, reduce]);
   useEffect(() => {
     Animated.timing(bandIn, { toValue: band === 'none' ? 0 : 1, duration: motion.normal, useNativeDriver: true }).start();
   }, [band, bandIn]);
@@ -714,12 +738,13 @@ const DayCell = memo(function DayCell({
                 borderRadius: r,
                 backgroundColor: tint,
                 opacity: pop.interpolate({ inputRange: [0, 0.4], outputRange: [0, 1], extrapolate: 'clamp' }),
-                transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }) }],
+                transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.45, 1] }) }],
               },
             ]}
           />
           <View pointerEvents="none" style={styles.label}>
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.day,
                 ff,
@@ -772,11 +797,15 @@ function NavButton({ dir, disabled, onPress }: { dir: 1 | -1; disabled: boolean;
   );
 }
 
-function Chevron({ turned, color }: { turned: boolean; color: string }) {
+function Chevron({ turned, color, reduce }: { turned: boolean; color: string; reduce: boolean }) {
   const turn = useRef(new Animated.Value(turned ? 1 : 0)).current; // native
   useEffect(() => {
+    if (reduce) {
+      turn.setValue(turned ? 1 : 0);
+      return;
+    }
     Animated.spring(turn, { toValue: turned ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [turned, turn]);
+  }, [turned, turn, reduce]);
   return (
     <Animated.View style={{ transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }] }}>
       <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
@@ -786,6 +815,22 @@ function Chevron({ turned, color }: { turned: boolean; color: string }) {
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   root: { alignSelf: 'stretch' },
   header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, minHeight: 40 },
@@ -793,7 +838,7 @@ const styles = StyleSheet.create({
   title: { fontSize: 17, fontWeight: '400', letterSpacing: -0.3, flexShrink: 1 },
   navs: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   nav: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
-  todayBtn: { height: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
+  todayBtn: { minHeight: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
   todayText: { fontSize: 13, fontWeight: '400' },
   weekRow: { flexDirection: 'row', marginBottom: 6 },
   weekday: { flex: 1, textAlign: 'center', fontSize: 13, fontWeight: '400', letterSpacing: 0.2 },
@@ -821,6 +866,6 @@ const styles = StyleSheet.create({
   dot: { width: 5, height: 5, borderRadius: 2.5 },
   pickGrid: { flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', paddingTop: 4 },
   pickCell: { width: '33.333%', height: 56, alignItems: 'center', justifyContent: 'center' },
-  pickInner: { minWidth: 76, height: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
+  pickInner: { minWidth: 76, minHeight: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
   pickText: { fontSize: 15, fontWeight: '400' },
 });

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

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useId, useRef, useState, type ComponentRef } from 'react';
+import React, { createContext, useContext, useEffect, useId, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Image,
   Platform,
@@ -67,6 +68,7 @@ export function Card({
   const interactive = !!(onPress || onLongPress || pressable);
   const corner = radius.scale(18);
   const gid = 'card' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
 
   const scale = useRef(new Animated.Value(1)).current;
   const glow = useRef(new Animated.Value(0)).current;
@@ -87,15 +89,17 @@ export function Card({
 
   const border = (surfaces[variant].borderWidth as number | undefined) ?? 0;
 
+  // Reduce Motion: no press squish and the spotlight doesn't grow; the glow still fades in and out.
   const pressIn = (e: GestureResponderEvent) => {
-    Animated.spring(scale, { toValue: 0.975, useNativeDriver: true, ...motion.snappy }).start();
+    if (!reduce) Animated.spring(scale, { toValue: 0.975, useNativeDriver: true, ...motion.snappy }).start();
     if (highlight === 'none') return;
     moveSpot(e);
     Animated.spring(glow, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start();
   };
   const pressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-    if (highlight !== 'none') Animated.timing(glow, { toValue: 0, duration: 420, useNativeDriver: true }).start();
+    if (reduce) scale.setValue(1);
+    else Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    if (highlight !== 'none') Animated.timing(glow, { toValue: 0, duration: reduce ? 150 : 420, useNativeDriver: true }).start();
   };
   // Touch coordinates are relative to whichever child was hit, so work from page coordinates.
   const clipRef = useRef<ComponentRef<typeof View>>(null);
@@ -125,7 +129,7 @@ export function Card({
               transform: [
                 { translateX: spot.x },
                 { translateY: spot.y },
-                { scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) },
+                { scale: glow.interpolate({ inputRange: [0, 1], outputRange: reduce ? [1, 1] : [0.4, 1] }) },
               ],
             },
           ]}
@@ -288,6 +292,22 @@ function shadow(opacity: number, y: number, blur: number, elevation = 2): ViewSt
   return { shadowColor: '#000', shadowOpacity: opacity, shadowRadius: blur / 2, shadowOffset: { width: 0, height: y }, elevation };
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   clip: { overflow: 'hidden' },
   spot: { position: 'absolute', top: 0, left: 0 },

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { alpha, useKit } from '@/lib/kit';
@@ -39,6 +39,7 @@ export function Checkbox({
   style,
 }: CheckboxProps) {
   const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const corner = shape === 'circle' ? size / 2 : Math.min(size / 2, radius.sm + 1);
@@ -50,12 +51,17 @@ export function Checkbox({
   const burst = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
+    // Reduce Motion: a short fill fade, no burst ring and no press squish.
+    if (reduce) {
+      Animated.timing(progress, { toValue: on ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+      return;
+    }
     Animated.spring(progress, { toValue: on ? 1 : 0, useNativeDriver: false, speed: 14, bounciness: 0 }).start();
     if (on) {
       burst.setValue(0);
       Animated.timing(burst, { toValue: 1, duration: 450, useNativeDriver: true }).start();
     }
-  }, [on, progress, burst]);
+  }, [on, progress, burst, reduce]);
 
   const toggle = () => {
     if (checked === undefined) setInner(!on);
@@ -72,8 +78,8 @@ export function Checkbox({
       accessibilityState={{ checked: on, disabled }}
       disabled={disabled}
       onPress={toggle}
-      onPressIn={() => Animated.spring(press, { toValue: 0.82, useNativeDriver: true, speed: 50 }).start()}
-      onPressOut={() => Animated.spring(press, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 0 }).start()}
+      onPressIn={() => !reduce && Animated.spring(press, { toValue: 0.82, useNativeDriver: true, speed: 50, bounciness: 0 }).start()}
+      onPressOut={() => !reduce && Animated.spring(press, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 0 }).start()}
       style={[styles.row, { opacity: disabled ? 0.5 : 1 }, style]}
     >
       <Animated.View style={{ transform: [{ scale: press }] }}>
@@ -139,6 +145,22 @@ export function Checkbox({
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
   box: { borderWidth: 2, alignItems: 'center', justifyContent: 'center' },

package/registry/chip-group/files/src/components/ui/chip-group.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   ScrollView,
@@ -56,6 +57,10 @@ export interface ChipGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 const SIZES: Record<ChipGroupSize, { h: number; px: number; font: number; check: number }> = {
   sm: { h: 30, px: 12, font: 13, check: 14 },
   md: { h: 36, px: 14, font: 14.5, check: 16 },
@@ -84,6 +89,7 @@ export function ChipGroup({
   style,
 }: ChipGroupProps) {
   const { colors } = useKit();
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const items: ChipOption[] = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const [inner, setInner] = useState<string[]>(defaultValue);
@@ -114,6 +120,7 @@ export function ChipGroup({
       showCheck={showCheck}
       multiple={multiple}
       disabled={disabled || o.disabled}
+      reduce={reduce}
     />
   ));
 
@@ -148,9 +155,10 @@ interface ChipProps {
   showCheck: boolean;
   multiple: boolean;
   disabled?: boolean;
+  reduce: boolean;
 }
 
-function Chip({ option, active, onPress, variant, size, tint, showCheck, multiple, disabled }: ChipProps) {
+function Chip({ option, active, onPress, variant, size, tint, showCheck, multiple, disabled, reduce }: ChipProps) {
   const { colors, radius, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   // p: colours, check width + stroke (JS driver). press: squish (native, on the outer view).
@@ -158,11 +166,15 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
   const press = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
-  }, [active, p]);
+    // Reduce Motion: the chip swaps state at once (no widening, no check draw).
+    if (reduce) p.setValue(active ? 1 : 0);
+    else Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+  }, [active, p, reduce]);
 
-  const pressTo = (to: number) =>
+  const pressTo = (to: number) => {
+    if (reduce) return;
     Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+  };
 
   const look: Record<ChipGroupVariant, { bg: [string, string]; border: [string, string]; fg: [string, string] }> = {
     solid: {
@@ -201,7 +213,7 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
           style={[
             styles.chip,
             {
-              height: size.h,
+              minHeight: size.h,
               borderRadius: radius.capsule(size.h),
               paddingHorizontal: size.px - 1,
               backgroundColor: p.interpolate({ ...range, outputRange: l.bg }),
@@ -238,6 +250,7 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
           {option.label ? (
             <Animated.Text
               numberOfLines={1}
+              maxFontSizeMultiplier={FONT_CAP}
               style={[styles.label, ff, { fontSize: size.font, color: p.interpolate({ ...range, outputRange: l.fg }) }]}
             >
               {option.label}
@@ -245,6 +258,7 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
           ) : null}
           {option.count !== undefined ? (
             <Animated.Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.count,
                 ff,
@@ -260,6 +274,22 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   wrap: { flexWrap: 'wrap' },