Home > Software engineering >  React Native ScrolView Giving warning for Flatlist
React Native ScrolView Giving warning for Flatlist

Time:01-14

I am creating UI for my new project and the screen length is large so I put the Scrollview so that User can scroll the screen and on the same screen I am using SIX flautists to render some data but When I run my application on IOS simulator then I am getting warning on almost every screen where I am using Flatlist under Scrollview please check the attached screen shot

enter image description here

CodePudding user response:

The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated

By the way SafeAreaView doesn't work for me, the only way to solve is.you can use SafeArea like this 

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

CodePudding user response:

This is happening because it isn't recommended to work with a FlatList within a ScrollView. A workaround tho would be to add a property to your FlatList like so :

<FlatList 
data={yourdata} 
nestedScrollEnabled ----> Add this 
/>

Hope it solves your problem

  •  Tags:  
  • Related