react native - I cannot scrolling down with two flatlist

Question

I can scroll only in case when I change SafeAreaView to ScrollView but I get this error

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

{subCategoryIsLoading ? (
        <ActivityIndicator
          size='large'
          color={primColor}
          style={{marginTop: 150}}
        />
      ) : (
        <SafeAreaView>
          <View style={styles.containerSubCategory}>
            <FlatList
              showsVerticalScrollIndicator={false}
              data={filterCatTrue()}
              keyExtractor={item => item._id}
              renderItem={({item}) => {
                return (
                  <View style={styles.containerImages}>
                    <TouchableHighlight onPress={() => console.log(item._id)}>
                      <Image
                        source={{
                          uri: `${urlImages}subCategories/${item.image}`,
                        }}
                        style={styles.imageSubCategory}
                      />
                    </TouchableHighlight>
                  </View>
                )
              }}
            />
            <FlatList
              horizontal={false}
              numColumns={2}
              showsVerticalScrollIndicator={false}
              columnWrapperStyle={{
                justifyContent: 'space-between',
              }}
              data={filterCatFalse()}
              keyExtractor={item => item._id}
              contentInset={{bottom: 60}}
              renderItem={({item}) => {
                return (
                  <View style={styles.containerImagesWide}>
                    <TouchableHighlight>
                      <Image
                        source={{
                          uri: `${urlImages}subCategories/${item.image}`,
                        }}
                        style={styles.imageSubCategoryWide}
                      />
                    </TouchableHighlight>
                  </View>
                )
              }}
            />
          </View>
        </SafeAreaView>
      )}

Answer 1

Virtualized lists, that means 'SectionList' and 'FlatList' for example, are performance-optimized meaning they improve memory consumption when using them to render large lists of content. The way this optimization works is that it only renders the content that is currently visible in the window, usually meaning the container/screen of your device. It also replaces all the other list items same sized blank space and renders them based on your scrolling position.

Now If you put either of these two lists inside a ScrollView they fail to calculate the size of the current window and will instead try to render everything, possibly causing performance problems, and it will of course also give you the warning mentioned before.

Check this post, it perfectly explains your problem.