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

Answer 1

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