I am trying to get to scroll multiple flat-lists inside a scroll-view component. Two of the Flat-lists are horizontal and the latter scrolls vertically. The Vertical scroll is not scrolling. I found a way to use the max-Height property of the Flat-List to get it to scroll but as the max-Height value decreases, the height of the component decreases as well rendering the component in a tiny little box. Any solution to this problem?
'''
<View style={styles.container}>
<ScrollView style={{ flex: 1, width: "100%" }} nestedScrollEnabled={true}>
<View style={flatlistContainer}>
<Text style={releaseText}>New Releases</Text>
<FlatList
contentContainerStyle={{
alignItems: "center",
}}
horizontal={true}
keyExtractor={FreshGenre.id}
data={FreshGenre}
renderItem={(item) => {
return (
<FreshGenreItems
genreTitle={item.item.title}
GenreCoverImage={item.item.coverImg}
style={{ width: 300 }}
/>
);
}}
/>
</View>
<View style={[{ ...flatlistContainer }, { height: "20%" }]}>
<Text style={{ color: "white", fontSize: 24 }}>ALBUMS</Text>
<FlatList
contentContainerStyle={{
alignItems: "center",
}}
horizontal={true}
keyExtractor={FreshGenre.id}
data={FreshGenre}
renderItem={(item) => {
return (
<FreshGenreItems
genreTitle={item.item.title}
GenreCoverImage={item.item.coverImg}
style={{ width: 110, height: "50%" }}
/>
);
}}
/>
</View>
<View
style={{
width: "100%",
}}
>
<Text style={discoverText}>Discover</Text>
<FlatList
keyExtractor={Updates.id}
style={{ height: "100%" }}
maxHeight={200}
data={Updates}
renderItem={(item) => {
return (
<FreshItemBox
songComposer={item.item.composer}
title={item.item.title}
downloads={item.item.Downloads}
/>
);
}}
/>
</View>
</ScrollView>
</View>
);
};
'''
Any help with this issue?
