@shopify/flash-list

npx expo install @shopify/flash-list

import { FlashList } from "@shopify/flash-list";
import { StyleSheet, Text, View } from "react-native";
 
interface Post {
  id: string;
  title: string;
}
 
const ESTIMATED_ROW_HEIGHT = 88;
 
export function PostFeed({ posts }: { posts: Post[] }) {
  return (
    <FlashList
      data={posts}
      estimatedItemSize={ESTIMATED_ROW_HEIGHT}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.title} numberOfLines={2}>
            {item.title}
          </Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}
 
const styles = StyleSheet.create({
  row: { paddingHorizontal: 16, paddingVertical: 12, backgroundColor: "#fff", minHeight: ESTIMATED_ROW_HEIGHT },
  title: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  separator: { height: 8 },
});

import { memo, useCallback } from "react";
import { FlashList } from "@shopify/flash-list";
import { Image, StyleSheet, Text, View } from "react-native";
 
interface Product {
  id: string;
  name: string;
  price: string;
  imageUrl: string;
}
 
const ESTIMATED_ROW_HEIGHT = 96;
 
const ProductRow = memo(function ProductRow({ item }: { item: Product }) {
  return (
    <View style={styles.row}>
      <Image source={{ uri: item.imageUrl }} style={styles.thumb} />
      <View style={styles.meta}>
        <Text style={styles.name} numberOfLines={1}>
          {item.name}
        </Text>
        <Text style={styles.price}>{item.price}</Text>
      </View>
    </View>
  );
});
 
export function ProductFeedScreen({ products }: { products: Product[] }) {
  const renderItem = useCallback(
    ({ item }: { item: Product }) => <ProductRow item={item} />,
    [],
  );
 
  return (
    <View style={styles.screen}>
      <FlashList
        data={products}
        estimatedItemSize={ESTIMATED_ROW_HEIGHT}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        drawDistance={250}
        contentContainerStyle={styles.list}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  list: { paddingVertical: 8 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: "#fff",
    minHeight: ESTIMATED_ROW_HEIGHT,
  },
  thumb: { width: 72, height: 72, borderRadius: 8, backgroundColor: "#e2e8f0" },
  meta: { flex: 1 },
  name: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  price: { fontSize: 14, color: "#2563eb", marginTop: 4 },
});

## FlashList migration: ProductFeedScreen
 
- [ ] npx expo install @shopify/flash-list
- [ ] Swap import: FlatList → FlashList from @shopify/flash-list
- [ ] Add estimatedItemSize (measure average row in DevTools or design spec)
- [ ] Set minHeight on row container to match estimate
- [ ] Wrap row component in memo()
- [ ] Stabilize renderItem with useCallback
- [ ] Audit variable row heights - overrideItemLayout if needed
- [ ] Test fast flick scroll on physical Android device
- [ ] Verify ListHeaderComponent / ListFooterComponent / empty state
- [ ] Confirm numColumns grid layout if applicable
- [ ] Profile before/after - React DevTools + FPS overlay

// Before
import { FlatList } from "react-native";
 
<FlatList
  data={posts}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <PostRow item={item} />}
/>
 
// After
import { FlashList } from "@shopify/flash-list";
 
const ROW_HEIGHT = 88;
 
<FlashList
  data={posts}
  estimatedItemSize={ROW_HEIGHT}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <PostRow item={item} />}
/>

<FlashList
  data={messages}
  estimatedItemSize={72}
  overrideItemLayout={(layout, item) => {
    layout.size = item.hasAttachment ? 160 : 72;
  }}
  renderItem={({ item }) => <MessageRow item={item} />}
/>

import type { ListRenderItem } from "@shopify/flash-list";
 
const renderItem: ListRenderItem<Product> = ({ item }) => <ProductRow item={item} />;