FlashList v2

最強のテーブルビュー

ほとんどのアプリで使うテーブルビューにおいて圧倒的パフォーマンスと使い勝手を誇るライブラリです

最近v2になってさらに使いやすくなりました

最初から再利用性が考慮されていてメモリに優しい
セルの推定サイズの計算が不要
JSオンリーで設計されてるので何も考えずに入れてすぐ使える
ちらつきやカクつきを抑える最適化をかなり深くまで行ってるらしい

npx expo install @shopify/flash-list expo-dev-client

expo SDKのバージョン次第でv2が入らないです。その場合は直接v2を入れましょう

npm install @shopify/flash-list

以下はサンプルコードです

たったこれだけのコードでテーブルビューが作れます
swiftでUITableViewを実装した経験がある方なら感動するのではないでしょうか

export default function MonsterList() {
  const data = ["スライム", "ドラキー", "ゴーレム", "はぐれメタル"];
  return (
    <FlashList
      data={data}
      keyExtractor={(x) => x}
      renderItem={({ item }) => (
        <View className="flex-row justify-between items-center px-4 py-3 border-b border-gray-200 bg-white">
          <Text className="text-base font-semibold">{item}</Text>
          <Text className="text-xs text-gray-500">
            HP {10 + Math.floor(Math.random() * 90)}
          </Text>
        </View>
      )}
    />
  );
}

expo-image

定番の画像ライブラリ

ディスク/メモリキャッシュ
トランジション（フェード）
WebP/AVIF等の近代フォーマット
contentFit でのトリミング制御

とりあえず画像表示ならこれを使っとけば間違いなしというライブラリです

npx expo install expo-image

内部的にiOSではSDWebImage、AndroidではGlideを使ってくれている。
デフォルトでディスクキャッシュを一定期間してくれます

サンプルコード

<Image
  source={{ uri: post.thumbnailUrl }}
  className="rounded-lg"
  style={{
    width: "100%",
    aspectRatio: 1.5,
    maxHeight: 125,
  }}
  contentFit="contain"
  transition={200}
/>