I have two flatLists nested inside of a scrollView so I am able to scroll my entire page. However, I know that you are not supposed to nest flatLists in scrollViews for multiple reasons.
How can I render two flatLists while still being able to scroll throughout the entire page? The GIF at the bottom of the post is the desired behavior I want.
I created a snack post here as well as provided some example code below.
export default function App() {
return (
<View style={{ alignItems: 'center', marginTop: 100, flex: 1}}>
<FlatListB/>
<FlatListA/>
</View>
);
}
return (
<FlatList
data={newData}
renderItem={renderItem}
onEndReached={fetchMoreBars}
onEndReachedThreshold={0.1}
/>
);
return (
<FlatList
data={newData}
renderItem={renderItem}
onEndReached={fetchMoreBars}
onEndReachedThreshold={0.1}
horizontal={true}
/>
);
https://giphy.com/gifs/7V07FvYyn8ZG3nwVVU - This GIF was created by nesting FlatListB and FlatListA in a ScrollView
CodePudding user response:
If you would like to prevent nested flatLists in scrollView, you may use ListHeaderComponent
props in FlatList.
FlatListA.js:
<FlatList
data={newData}
renderItem={renderItem}
onEndReached={fetchMoreBars}
onEndReachedThreshold={0.1}
ListHeaderComponent={<FlatListB />}
/>
App.js
export default function App() {
return (
<FlatListA/>
);
}
This should work if 2 flatlists are not scrolling in same direction (Vertical / Horizontal).
CodePudding user response:
try this code
const Data = [1,2,3,4,1,1,1,1,1,1,1,]
const Horizontal = () => {
const Data = [1,2,3,4,1,1,1]
return <FlatList
horizontal
data={Data} renderItem={() => {
return <View style={{height:100,width:100,backgroundColor:'pink',margin:2}}>
</View>
}}/>
}
const ListHeaderComponent = () => {
return <Horizontal/>
}
<View >
<FlatList
ListHeaderComponent={ListHeaderComponent}
data={Data} renderItem={() => {
return <View style={{height:100,width:100,backgroundColor:'white',margin:2}}>
</View>
}}/>
</View>