{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list",
  "type": "registry:ui",
  "title": "Animated List",
  "description": "Staggered entrance list (FlashList optional).",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/animated-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/animated-list.tsx",
      "content": "import {\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  Animated,\n  FlatList,\n  type FlatListProps,\n  type ListRenderItemInfo,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\ntype AnyFlatList = ComponentType<FlatListProps<unknown>>;\n\nlet cachedFlashList: AnyFlatList | null | undefined;\n\nfunction loadFlashList(): AnyFlatList | null {\n  if (cachedFlashList !== undefined) return cachedFlashList;\n  try {\n    // Optional peer dep — falls back to FlatList when not installed.\n    const mod = require('@shopify/flash-list') as {\n      FlashList?: AnyFlatList;\n    };\n    cachedFlashList = mod.FlashList ?? null;\n  } catch {\n    cachedFlashList = null;\n  }\n  return cachedFlashList;\n}\n\nconst MAX_STAGGER_MS = 1000;\n\ninterface AnimatedCellProps {\n  index: number;\n  /** Delay between staggered items (ms). */\n  itemDelay: number;\n  /** Disable the entrance animation. */\n  animated: boolean;\n  itemContainerStyle?: StyleProp<ViewStyle>;\n  children?: ReactNode;\n}\n\n/** Per-item fade+rise entrance; delay staggers by index. */\nfunction AnimatedCellInner({\n  index,\n  itemDelay,\n  animated,\n  itemContainerStyle,\n  children,\n}: AnimatedCellProps) {\n  const progress = useRef(new Animated.Value(animated ? 0 : 1)).current;\n\n  useEffect(() => {\n    if (!animated) return;\n    Animated.timing(progress, {\n      toValue: 1,\n      duration: 260,\n      delay: Math.min(index * itemDelay, MAX_STAGGER_MS),\n      useNativeDriver: true,\n    }).start();\n  }, [animated, index, itemDelay, progress]);\n\n  return (\n    <Animated.View\n      style={[\n        itemContainerStyle,\n        {\n          opacity: progress,\n          transform: [\n            {\n              translateY: progress.interpolate({\n                inputRange: [0, 1],\n                outputRange: [16, 0],\n              }),\n            },\n          ],\n        },\n      ]}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst AnimatedCell = memo(AnimatedCellInner);\n\nexport interface AnimatedListProps<T>\n  extends Omit<FlatListProps<T>, 'renderItem'> {\n  /** Items to render. */\n  data: readonly T[] | null | undefined;\n  renderItem: (info: ListRenderItemInfo<T>) => ReactElement | null;\n  /** Staggered entrance: delay between items in ms (0 disables animation). Default 50. */\n  itemDelay?: number;\n  /** Disable the entrance animation entirely. */\n  animated?: boolean;\n  /** Style for each animated item wrapper. */\n  itemContainerStyle?: StyleProp<ViewStyle>;\n}\n\n/**\n * AnimatedList — FlatList (or FlashList when installed) with a staggered\n * fade-in-down entrance per item. Zero deps beyond RN Animated.\n */\nfunction AnimatedListInner<T>(\n  {\n    data,\n    renderItem,\n    itemDelay = 50,\n    animated = true,\n    itemContainerStyle,\n    ...listProps\n  }: AnimatedListProps<T>,\n  ref: Ref<FlatList<T>>\n) {\n  const ListImpl = (loadFlashList() ?? FlatList) as ComponentType<\n    FlatListProps<T> & { ref?: Ref<FlatList<T>> }\n  >;\n\n  const renderAnimatedItem = useCallback(\n    (info: ListRenderItemInfo<T>) => (\n      <AnimatedCell\n        index={info.index}\n        itemDelay={itemDelay}\n        animated={animated}\n        itemContainerStyle={itemContainerStyle}\n      >\n        {renderItem(info)}\n      </AnimatedCell>\n    ),\n    [renderItem, itemDelay, animated, itemContainerStyle]\n  );\n\n  return (\n    <ListImpl\n      ref={ref as never}\n      data={data}\n      renderItem={renderAnimatedItem}\n      {...listProps}\n    />\n  );\n}\n\nexport const AnimatedList = forwardRef(AnimatedListInner) as <T>(\n  props: AnimatedListProps<T> & { ref?: Ref<FlatList<T>> }\n) => ReactElement;\n"
    }
  ]
}