Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

shopify-flash-list

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に依存するライブラリのバージョンもアップグレードすることをお勧めします。

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

    クリップボードにコピーしました。

     "dependencies": {
 ...
 "@amazon-devices/shopify__flash-list": "~2.0.0"
}
  2. 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 FlashListにAnimated 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のドキュメント（英語のみ）を参照してください。

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

パッケージ名 Amazon NPMライブラリのバージョン Vega OSのビルド番号 Vega SDKバージョン リリースノート
@amazon-devices/shopify__flash-list 2.0.1+1.6.3 OS 1.1 (201010438050) 0.20  

関連リソース

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

Last updated: 2025年10月3日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ