Is it ok to nest LegendLists inside ScrollViews?

[TowhidKashem]

I understand that putting a FlatList inside a Scrollview gets rid of all it's performance characteristics by making virtualization not possible. Is the same true of LegendList or is it ok to nest them inside Scrollviews?

[jmeistrich]

It's common to put multiple horizontal LegendLists inside of a vertical LegendList. The Movies example in the example app does that. But I'm not sure what would happen with a vertical LegendList inside a ScrollView... What are you trying to do?

[TowhidKashem]

Thanks for the response. I was just trying to reuse a premium template for a screen with lots of complex animations tied to the user's scroll position, it used a scrollview in the template. But needed 3 list screens loaded inside tabs via react-native-tab-view, it would have been a lot of work to try and figure out how to keep the animations working after changing the layout which is why I bought the premium template in the first place lol, so I thought about just putting the tabs with the legend lists directly inside the scrollview but then I saw the RN error I usually see "Don't nest virtualized lists in scrollviews....". Anyway don't worry about it, I was able to fiddle around and get it to work without the scrollview and just using the Lists directly!

Just one more question if you don't mind, will loading a Legend List inside a TabView from react-native-tab-view mess with the virtualization at all? I don't get any warnings when I do this, but just wanted to be safe and confirm:

import { SceneMap, TabView } from 'react-native-tab-view';

  const renderScene = SceneMap({
    photos: () => (
      <Gallery
        ListHeaderComponent={ListHeaderComponent}
        onScroll={scrollHandler}
        contentInsetAdjustmentBehavior="never"
      />
    ),
    likes: () => (
      <Favorites
        ListHeaderComponent={ListHeaderComponent}
        onScroll={scrollHandler}
        contentInsetAdjustmentBehavior="never"
      />
    ),
    personas: () => (
      <Personas
        ListHeaderComponent={ListHeaderComponent}
        onScroll={scrollHandler}
        contentInsetAdjustmentBehavior="never"
      />
    )
  });

      <TabView
        navigationState={{
          index: activeTabIndex,
          routes
        }}
        renderScene={renderScene}
        renderTabBar={() => null}
        onIndexChange={setActiveTabIndex}
        initialLayout={{ width: WINDOW_WIDTH }}
        swipeEnabled={false}
        animationEnabled={false}
        // TODO: not working atm + needs to be improved
        renderLazyPlaceholder={() => (
          <Skeleton width={WINDOW_WIDTH} height={WINDOW_HEIGHT / 2} />
        )}
        lazy
        style={{
          // Start the scrollable area just below the collapsed header
          marginTop: insets.top + HEADER_COLLAPSED_HEIGHT,
          flex: 1
        }}
      /> 

those 3 components (Gallery/Personas/Favorites) all export legend lists:

return (
    <LegendList
      {...props}
      ref={legendListRef}
      keyExtractor={keyExtractor}
      data={botIds}
      renderItem={renderItem}
      ListFooterComponent={renderFooter}
      numColumns={NUM_COLUMNS}
      emptyTitle="No favorites yet"
      emptyIcon="heart"
      isError={isError}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.3}
      initialScrollOffset={0}
      animated
      recycleItems
    />
  );

[DragomirAndrei19]

I'd still be curious about this.

My current use-case is having a global bottom sheet component (custom) that has inside a scrollview which wraps whatever content you put there (mostly to accomodate landscape on phones).

Is that ideal? Probably not, but the question still stands :D