ERROR - VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Flatlist has its own ScrollView you can scroll through the list using that so there is no need to put a flatlist into a ScrollView that is why its giving a warning, the both scrollview will clash and one of them (mostly the parent one) works.

Avoid using FlatList with the same orientation. Instead, restructure your code like this --

  <ScrollView contentContainerStyle={style}>
    Other components
    {
      data.map((item)=> <Somthing item={item}/>)
    }
    Other components
  </ScrollView>

The error is self explanatory and it should be in a developers best interest to avoid these kind of things even when it's just a false alarm. Your particular situation could use the following solution:

<FlatList
  data={data}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={() => (
    <SomeComponents>
      ...Some components those need to be on top of the list
    </SomeComponents>
  )}
  ListFooterComponent={() => (
    <SomeComponents>
      ...Some components those need to be below the list
    </SomeComponents>
  )}
  renderItem={({ item, index}) => (somethings)}
/>

Another note, if you need more complex list that needs header and footer for the list itself, you can try SectionList.

Your component FlatList and ScrollView have the same orientation(vertical), so you need put your component inside a ScrollView with horizontal orientation like this:

<View>
    <ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
    <View>
    <ScrollView horizontal={true} style={{ width: "100%" }}>
        <FlatList />
    </ScrollView>
    </View>
    </ScrollView>
</View>

Solution 1: Use FlatList props ListHeaderComponent and create all of your page top section in that. Something like this:

This will not show any warning or error.

Solution 2: Because only parent view will scroll (ScrollView) and not the child FlatList, so to get rid of the warning you can pass a prop scrollEnabled={false} to the FlatList.

If it doesn't go then import LogBox from react-native and write this in your component

useEffect(() => {
  LogBox.ignoreLogs(["VirtualizedLists should never be nested"])
}, [])

hopefully, the warning will be removed.

Anyone want to solve this issue can use a custom VirtualizedScrollView like this:

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

const VirtualizedScrollView = props => {
  return (
    <FlatList
      {...props}
      data={[]}
      keyExtractor={(e, i) => 'dom' + i.toString()}
      ListEmptyComponent={null}
      renderItem={null}
      ListHeaderComponent={() => (
        <>{props.children}</>
      )}
    />
  );
};

export default VirtualizedScrollView;

Then if you use FlatList inside VirtualizedScrollView, it won't get the warning/error.

<VirtualizedScrollView>
  <FlatList 
    /*--- your props ---*/
  />
</VirtualizedScrollView>

There is a npm package where I get this code, you can also use this package

You can solve the 2 vertical ones(I'm assuming their side by side, separated with a segemented control?) by using the same flat list and switching out the data when it's switched. If they're just two vertical flat list's one after another use the SectionList.

For the horizontal one you can try putting the Horizontal FlatList in the ListHeaderComponent of the vertical FlatList and see what happens. It can be janky if you use a vertical FlatList in a vertical scroll view but maybe with two different axis it might be ok. The other option is two only show a few items in the horizontal scrollview and have a "Show More".

The last option is too re design/rethink the page so it's not doing so much. On mobile less is more and developers/designers like to get in the mindset of porting desktop thinking onto mobile. Might be worth a shot.

I used the SectionList approach to solve this & wanted to post a code example because I found the Section data required by React Native to be clear but also quite prescriptive.

 renderList = ({empty, posts}: {empty: boolean, posts: Array<Object>}) => (
    <SectionList
      sections={[
        {type: 'MAP', data: [{}]}, // Static sections.
        {type: 'PROFILE', data: [{}]},
        {type: 'POSTS', data: posts} // Dynamic section data replaces the FlatList.
      ]}
      keyExtractor={(item, index) => index}
      renderItem={({item, section}) => {
        switch (section.type) {
          // Different components for each section type.
          case 'MAP':
            return <MapView />;
          case 'PROFILE':
            return <Profile />;
          case 'POSTS':
            return <Post item={item} />;
          default:
            return null;
        }
      }}
      ItemSeparatorComponent={() => <Separator />}
      ListFooterComponent={() => <>{empty && <EmptyList />}</>}
    />
  );

What's nice is that the content feels logically quite separate, so you can add sections easily or have different dynamic data sources.

(If you're building a form & want better keyboard handling, you could also try a KeyboardAwareSectionList from react-native-keyboard-aware-scroll-view.)

Flatlist has an integrated scrollview itself, so you can resolve this error by removing ScrollView Component, And let just the Fatlist component

Error ? you are trying to render a FlatList component inside a scrollview component, this is what is throwing the warning.

solution Render the components using Flatlist's ListHeaderComponent={} prop, i.e in your flatlist add the prop as follows

const FlatList_Header = () => {
    return (
        <View style={{
            height: 45,
            width: "100%",
            backgroundColor: "#00B8D4",
            justifyContent: 'center',
            alignItems: 'center'
                    }}
        >
 
        <Text style={{ fontSize: 24, color: 'white' }}> Sample FlatList Header </Text>
 
        </View>
    );
  }
<FlatList
    data={BirdsName}
    renderItem={({ item }) => <ItemRender name={item.name} />}
    keyExtractor={item => item.id}
    ItemSeparatorComponent={ItemDivider}
    **ListHeaderComponent={FlatList_Header}**
    ListHeaderComponentStyle={{ borderBottomColor: 'red', borderBottomWidth: 2 }}
      />

Note the use of the ListHeaderComponent in the code above, that should supress the warning.

Use flatList like this ListHeaderComponent and ListFooterComponent:

<FlatList ListHeaderComponent={
    <ScrollView
        style={styles.yourstyle}
        showsVerticalScrollIndicator={false}
    >
        <View style={styles.yourstyle}>
        </View>
    </ScrollView>
    }
    data={this.state.images}
    renderItem={({ item, index }) => {
        return (
            <View
                style={styles.yourstyle}
            >
                <Image
                    source={{
                        uri: item,
                    }}
                    style={styles.yourstyle}
                    resizeMode={"contain"}
                />
                <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                    style={styles.yourstyle}
                >
                    {item.name}
                </Text>
            </View>
        );
    }}
    keyExtractor={({ name }, index) => index.toString()}
    ListFooterComponent={
        <View style={styles.yourstyle}></View>
    }
/>

Solution: I have also encountered same problem with flatlist. Then the package below sold my problem.

'react-native-virtualized-view'

import { ScrollView } from 'react-native-virtualized-view'

if ScrollView is Vertical change Flatlist Horizontal

<ScrollView >
<FlatList
   horizontal
   data={lenders}
   keyExtractor={(_, index) => index}
   renderItem={(item) => {
            return <Text>item</Text>
      }}
   />

In my case it was happening due to nesting of ScrollView.

Try replacing some of the ScrollView from children components with React.Fragment.