VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

[Tj3n]

This warning is showing when I'm using FlatList inside ParallaxScrollView, is there anyway to fix this or i'm doing something wrong?

Here's the code that I'm using, everything is working fine as expected, just the warning keep showing.

    <View style={styles.container}>
      <ParallaxScrollView
        backgroundColor="blue"
        parallaxHeaderHeight={HeaderHeight}
        renderBackground={() => (
          <ExploreHeaderBackground customSource={CatAsset[secondary.imgName]} />
        )}
        renderForeground={() => (
          <ExploreHeader headerShown customTitle={secondary.name} customDescription="" />
        )}>
        <FlatList
          data={items}
          renderItem={({ item }) => <ExploreListingCell poi={item} />}
          keyExtractor={(item) => item.storeId}
        />
      </ParallaxScrollView>
    </View>

[mm7mod]

facing the same issue

[kamarmack]

Getting this warning as well. This https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-583884268 comment seems to indicate that in most cases it should be OK.

[Tj3n]

I actually have found a fix for this, you can put your FlatList into the renderScrollComponent and the warning is gone, probably it replace the default ScrollView with the FlatList itself so there won't be problem:

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

return (
<ParallaxScrollView
          backgroundColor="white"
          parallaxHeaderHeight={HeaderHeight}
          renderBackground={() => (
              <ExploreHeaderBackground customSource={CatAsset[secondary.imgName]} />
          )}
          renderForeground={() => (
            <ExploreHeader headerShown customTitle={secondary.name} customDescription="" />
          )}
          renderScrollComponent={(props) => (
            <AnimatedFlatList
              {...props}
              ListHeaderComponent={
                <ExploreHeader headerShown customTitle={secondary.name} customDescription="" />
              }
              data={items}
              renderItem={renderItem}
              keyExtractor={(item) => item.storeId}
            />
          )}
        />
)

Still, it seems like the renderForeground is no longer working and the FlatList got pushed to top, so I have to manually add the renderForeground view to the FlatList header

[5115191]

same issue