ScrollViewの中にFlatListを入れた時のエラーの対処法。【ReactNative Expo】

ScrollViewの中に、FlatListを入れた時に次のようなエラーが出たことはありませんか？

このエラーは、ScrollViewの中に同じような縦スクロールができるものを入れると親が優先されるよ。というものです。

例えば、ScrollViewの中に、FlatListなどを入れたりするのも１つの例です。

解除の方法は、どちらかを消せば良いわけですが、

どうしても、ScrollView と FlatListどちらも残したいんだ！！

っていう場合があるかと思います。

例えば、ScrollViewの中に、複数のFlatListが入っていて全体をスクロールさせたい場合などですね。

今回は、どうしても、ScrollViewとFlatListを共存させたい時に、エラーが出ないようにする方法を紹介します。

超簡単なので、覚えておいてください！

【結論】解決方法

子要素の同方向のスクロールを解除することです。

例えば、ScrollView の中に、FlatListが入っている場合だと、

FlatListの中に、scrollEnabled={false} を入れることです。

<ScrollView>
            <View>
              <FlatList
                data={data1}
                renderItem={({ item }) => renderCard(item)}
                keyExtractor={(item) => item.id}
                scrollEnabled={false}
              />
            </View>
            <View>
              <FlatList
                data={data2}
                renderItem={({ item }) => renderCard(item)}
                keyExtractor={(item) => item.id}
                scrollEnabled={false}
              />
            </View>

      </ScrollView>

FlatList内に、scrollEnabled={false}を入れることで、エラーは解除されます。

なぜ解決できるか。

今回のエラーの原因は、スクロールができるコンポーネントの中に、スクロールができるコンポーネントを入れていることです。

そのため、解決法は、親か子のどちらか一方の要素のスクロールを解除、無くしてあげることで解決します。

ScrollView やFlatLIstの要素の一つをなくす解決法もありますが、

どうしてもFlatListを使いたい場合などは、FlatLIstをスクロールしないようにしてあげることで解決するでしょう。

まとめ

今回は、VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.のエラー解決法、親と子どちらもスクロールできるコンポーネントを入れてしまった時に出るエラーの解決法について解説しました。

あなたがexpo開発を続けている限り、またどこかで会えるでしょう。ではまた！