shopify-flash-list

@amazon-devices/shopify__flash-listは、高速でパフォーマンスに優れたリストコンポーネントを提供します。FlashListは、React Nativeから提供されているFlatListに似ています。FlatListでサポートされるプロパティは、FlashListでもサポートされます。FlashListは、FlatListコンポーネントを置き換えてestimatedItemSizeプロパティを追加するだけで試すことができます。また、FlashListでは、サポートされるプロパティのリストが拡張され、最適なパフォーマンスの実現に役立つプロパティが追加されています。このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリとVega向けReact Nativeとの互換性は、ライブラリがターゲットとしているVega向けReact Nativeバージョンとの間でのみ保証されます。アプリのビルドに使用しているVega向けReact Nativeのバージョンを上げる場合は、ベストプラクティスとして、Vega向けReact Nativeに依存するライブラリのバージョンもアップグレードすることをお勧めします。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。

React Native 0.72
React Native 0.83

"dependencies": {
...
"@amazon-devices/shopify__flash-list": "~2.0.0"
}

"dependencies": {
...
"@amazon-devices/shopify__flash-list": "~2.0.9000000000"
}

npm installコマンドを使用して、依存関係を再インストールします。

例

以下の例では、共通のデータセットとコンポーネントを使用します。重複を避けるために、例では一部のアイテムが削除されています。

import React from "react";
import { Text, TouchableOpacity } from "react-native";

export const randomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;

export const DATA = Array.from({ length: 1000 }, (_, i) => ({
  title: `アイテム${i + 1}`,
  bgColor: randomColor(),
  height: Math.floor(Math.random() * (140 - 60) + 60),
}))

interface ItemProps {
  item: {
    bgColor: string;
    title: string;
    height?: number;
    width?: number;
  }
}

export const Item = (props: ItemProps) => (
  <TouchableOpacity style={{ backgroundColor: props.item.bgColor, flex: 1 }}>
    <Text style={{ height: props.item.height, width: props.item.width, fontSize: 20, fontWeight: "500" }}>{props.item.title}</Text>
  </TouchableOpacity>
)

FlashListコンポーネントの例

import { FlashList } from "@amazon-devices/shopify__flash-list";
import React from "react";
import { Dimensions, Text, View } from "react-native";

import { DATA, Item } from "./common";

export const App = () => (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Item item={item} />}
      ListHeaderComponent={
        <View style={{ flex: 1, height: 100, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 24, fontWeight: "600" }}>FlashList Demo</Text>
        </View>
      }
      estimatedFirstItemOffset={100}
      estimatedItemSize={100}
      estimatedListSize={{
        height: Dimensions.get('screen').height,
        width: Dimensions.get('screen').width
      }}
    />
  )

無限スクロールのFlashListの例

import { FlashList } from "@amazon-devices/shopify__flash-list";
import React, { useState } from "react";
import { Dimensions, Text, View } from "react-native";

import { Item } from "./common";

const randomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;

export const App = () => {
  const [data, setData] = useState(Array.from({ length: 20 }, (_, i) => ({
    title: `アイテム${i + 1}`,
    bgColor: randomColor(),
    height: Math.floor(Math.random() * (140 - 60) + 60),
  })));

  const loadMoreData = () => {
    const newData = Array.from({ length: 20 }, (_, i) => ({
      title: `アイテム${data.length + i + 1}`,
      bgColor: randomColor(),
      height: Math.floor(Math.random() * (140 - 60) + 60),
    }))
    setData(items => items.concat(newData));
  }

  return (
    <FlashList
      data={data}
      renderItem={({ item }) => <Item item={item} />}
      ListHeaderComponent={
        <View style={{ flex: 1, height: 100, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 24, fontWeight: "600" }}>InfiniteScrollのデモ</Text>
        </View>
      }
      estimatedFirstItemOffset={100}
      estimatedItemSize={100}
      estimatedListSize={{
        height: Dimensions.get('screen').height,
        width: Dimensions.get('screen').width
      }}
      onEndReached={loadMoreData}
    />
  )
}

MasonryFlashListの例

MasonryFlashListは、多数の列を持つFlashListコンポーネントです。

import { MasonryFlashList } from "@amazon-devices/shopify__flash-list";
import React from "react";
import { Dimensions, Text, View } from "react-native";

import { DATA, Item } from "./common";

export const App = () => (
    <MasonryFlashList
      data={DATA}
      numColumns={3}
      renderItem={({ item }) => <Item item={item} />}
      estimatedFirstItemOffset={100}
      estimatedItemSize={100}
      estimatedListSize={{
        height: Dimensions.get('screen').height,
        width: Dimensions.get('screen').width
      }}
      ListHeaderComponent={
        <View style={{ flex: 1, height: 100, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 24, fontWeight: "600" }}>MasonryListのデモ</Text>
        </View>
      }
    />
  );

APIリファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、専用のドキュメントページ（英語のみ）を参照してください。 FlashListライブラリは、FlatListコンポーネントでサポートされるすべてのプロパティに対応しています。また、以下に示すようにパフォーマンスを最適化するためのプロパティが追加されています。

コンポーネント

コンポーネント	説明
`FlashList`	React Nativeの`FlatList`と同等のコンポーネント。パフォーマンスを最適化するためのプロパティが追加されています。
`AnimatedFlashList`	`Animated`に`FlashList` APIのサポートを追加します。
`MasonryFlashList`	列を含む`FlashList`。各列も`FlashList`コンポーネントです。
`AutoLayoutView`	`FlashList`内で使用され、レイアウトの再計算を行うネイティブコンポーネント。
`CellContainer`	リスト内の1つのセルを表すネイティブコンポーネント。

プロパティ

プロパティ	説明
`estimatedItemSize`	レンダリング前に、アイテムのおおよそのサイズを`FlashList`に伝える単一の数値。`FlashList`は、初回の読み込みの前やスクロール中にこの情報を使用して、画面に描画する必要のあるアイテムの数を決定します。
`disableAutoLayout`	`FlashList`のデフォルトのレイアウトは、カスタムの`CellRendererComponent`実装と競合する可能性があります。これは、レイアウトによって子コンポーネントにいくつかの修正が適用されるためです。`disableAutoLayout`を`true`に設定すると、この動作を無効にできます。
`disableHorizontalListHeightMeasurement`	`FlashList`では、水平リストのサイズの測定を試みるために、事前に余分なリストアイテムが描画されます。このときに`initialScrollIndex`が使用されていると、リストのコンテンツがごく少ない場合に問題が発生することがあります。この動作を無効にすることができます。
`drawDistance`	高度なレンダリングのための描画距離。
`estimatedFirstItemOffset`	最初のアイテムがリストウィンドウの先頭からどのくらい離れた位置に描画されるか、つまり、リストの最初のアイテム（ヘッダー以外）のオフセットを指定します。`initialScrollIndex`プロパティを使用する場合は必須です。
`estimatedListSize`	リストの可視領域の高さと幅の推定値。スクロールコンテンツのサイズではありません。このプロパティを定義すると、リストがすぐにレンダリングされるようになります。定義されていない場合は、最初にリストのサイズを測定する必要があるため、初回レンダリング時に若干の遅延が発生します。
`onBlankArea`	`FlashList`が、リストのスクロール中または初回の読み込み中に、ユーザーに表示される空白領域を計算したことを通知します。
`onLoad`	リストが画面上へのアイテムの描画を完了したときに発生するイベント。アイテムの描画にかかった時間を表す`elapsedTimeInMs`も報告されます。
`getItemType`	アイテムの型を指定できます。リストにさまざまな型のアイテムが含まれている場合のリサイクルの動作が改善されます。
`overrideItemLayout`	サイズの推定値を明示的に指定したり、アイテムがまたがる列の範囲を変更したりするために使用されます。
`overrideProps`	デバッグに限定することが推奨されます。リストの内部プロパティが、指定された値で置き換えられます。

FlashListは、FlatListと同様に内部でScrollViewを使用しているため、そのプロパティを継承しています。

実装の詳細

React NativeのFlatListでサポートされているプロパティのすべてに、FlashListで同等のプロパティがあるとは限りません。FlashListでサポートされていないReact Nativeのプロパティについては、以下の一覧を参照してください。

サポートされていないプロパティ
- columnWrapperStyle
- debug
- listKey
- onScrollToIndexFailed
- windowSize
サポートされていないメソッド
- flashScrollIndicators()
- hasMore
- getChildContext
- getNativeScrollRef()
- getScrollRef
- getScrollResponder()
基盤となる実装の違いにより、FlashListに移植しても意味のないプロパティ
- disableVirtualization
- getItemLayout
- initialNumToRender
- maxToRenderPerBatch
- recordInteraction
- setNativeProps
- updateCellsBatchingPeriod
Vegaで現在サポートされていないプロパティ
- refreshControl
- refreshing

ItemItemSeparatorComponentの既知の問題 Perfettoトレースによると、ItemItemSeparatorComponentを使用する場合、スクロール時にJSスレッドで問題が発生することがあります。

keyプロパティの使用

React NativeのFlatListからFlashlistに移行する場合は、アイテムコンポーネントとその入れ子のコンポーネントからkeyプロパティをすべて削除する必要があります。keyプロパティを使用すると、FlashListでビューをリサイクルできなくなり、Flashlistのパフォーマンス最適化の効果が失われます。たとえば、次のコードスニペットでは、TextコンポーネントとViewコンポーネントでkeyプロパティが使用されています。

const MyNestedComponent = ({ item }) => {
  return <Text key={item.id}>入れ子のテキスト</Text>;
};

const MyItem = ({ item }) => {
  return (
    <View key={item.id}>
      <MyNestedComponent item={item} />
      <Text>{item.title}</Text>
    </View>
  );
};

Flashlistを最適化するには、次のようにkeyプロパティを削除します。

const MyNestedComponent = ({ item }) => {
  return <Text>入れ子のテキスト</Text>;
};

const MyItem = ({ item }) => {
  return (
    <View>
      <MyNestedComponent item={item} />
      <Text>{item.title}</Text>
    </View>
  );
};

keyプロパティの詳細については、Shopifyのドキュメント（英語のみ）を参照してください。

サポートされているバージョン

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~2.0.0	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
~2.0.9000000000	0.24	`OS 1.2 (2101020054720)`	0.83

Vegaライブラリとサービス

インストール

例

FlashListコンポーネントの例

無限スクロールのFlashListの例

MasonryFlashListの例

APIリファレンス

コンポーネント

プロパティ

実装の詳細

keyプロパティの使用

サポートされているバージョン

関連リソース

​インストール

​例

​FlashListコンポーネントの例

​無限スクロールのFlashListの例

​MasonryFlashListの例

​APIリファレンス

​コンポーネント

​プロパティ

​実装の詳細

​keyプロパティの使用

​サポートされているバージョン

​関連リソース

インストール

例

FlashListコンポーネントの例

無限スクロールのFlashListの例

MasonryFlashListの例

APIリファレンス

コンポーネント

プロパティ

実装の詳細

keyプロパティの使用

サポートされているバージョン

関連リソース