28:["$","div",null,{"className":"mb-4 rounded border border-border overflow-hidden","children":[["$","div",null,{"className":"px-4 py-2 border-b border-border bg-surface-2","children":["$","p",null,{"className":"text-xs font-semibold text-text","children":"Render a performant list with FlatList"}]}],["$","div",null,{"className":"divide-y divide-border","children":[["$","div","0",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#EC489920","color":"#EC4899"},"children":1}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Basic FlatList usage"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"import { FlatList, Text, View, StyleSheet } from 'react-native'\n\nconst data = [\n { id: '1', name: 'Item One' },\n { id: '2', name: 'Item Two' },\n // ... many more items\n]\n\nexport default function ProductList() {\n return (\n item.id}\n renderItem={({ item }) => (\n \n {item.name}\n \n )}\n ItemSeparatorComponent={() => }\n ListEmptyComponent={() => No items found}\n ListHeaderComponent={() => Products}\n />\n )\n}"}],"$undefined","$undefined"]}]]}],["$","div","1",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#EC489920","color":"#EC4899"},"children":2}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Add pull-to-refresh"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"\n }\n // ...\n/>"}],"$undefined","$undefined"]}]]}],["$","div","2",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#EC489920","color":"#EC4899"},"children":3}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Add infinite scroll"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":" : null}\n // ...\n/>"}],"$undefined","$undefined"]}]]}]]}]]}]

Native UI Components