React Native + Expoでアプリを作る際に入れるべきオススメのUIライブラリ

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}
/>