FlatList inside a FlatList does not scroll

Question

Snack: https://snack.expo.io/@mr3mo/snack-flatlist

I am trying to render a screen where it will show various graphs and one or more tables. The screen needs to be scrollable.

I used a ScrollView for the parent scroll before but this was giving me a warning as it is not a good practice to include FlatLists inside a ScrollView due to performance reasons.

So I created this VirtualizedView which is a FlatList where all the components of my screen are rendered in the ListHeaderComponent.

Unfortunately this causes my child FlatList to not be scrollable.

I have tried many things, including setting a maxHeight, flexGrow etc. without much luck.

Any help would be appreciated. Thank you

Please check your snack it's having some error. – Rohit Aggarwal Mar 12 '21 at 15:23 — Rohit Aggarwal, Mar 12 '21 at 15:23
Hi @Rohit, I have fixed the snack. – mr3mo Mar 12 '21 at 15:39 — mr3mo, Mar 12 '21 at 15:39

score 0 · Accepted Answer · answered Mar 15 '21 at 04:00

I was able to fix this problem.

The trick is to wrap the List inside a ScrollView component and wrap the whole screen component inside the VirtualizedVIew component I shared in the snack.

This is what my LogsScreen.jsx file looks like:

import { VirtualizedView } from "../components";
...
return (
  <View>
    <VirtualizedView>
      ...
    <ScrollView>
      <FlatList>
      ...
      </FlatList>
    </ScrollView>
    </VirtualizedView>
   </View>
)

Inside VirtualizedView.jsx:

import React from 'react';
import { FlatList, View } from 'react-native';

export default function VirtualizedView(props) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <>{props.children}</>
      )}
      ListFooterComponent={<View style={{height: 20}}/>}
    />
  );
}

FlatList inside a FlatList does not scroll

1 Answers1