I have 3 flatlists inside of a scrollview; x2 horizontal (in components and and the other vertical;
return (
<ScrollView>
<View style={styles.body}>
<Text style={styles.titlesnopadding}>Watch</Text>
<View style={{height:200}}>
<Watch/>
</View>
<Text style={styles.titles}>Match reports</Text>
<View style={{height:100}}>
<MatchReports typeOfProfile='Men'/>
</View>
<Text style={styles.titles}>Latest News</Text>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<View>
<Image style={styles.img} source={{ uri: chkValue(item.jetpack_featured_media_url) }} />
<View>
<Text style={styles.textbck}>{item.title.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
<Text style={styles.summary}>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}{"\n"}{Moment(item.date, "YYYYMMDD").fromNow()}</Text>
</View>
</View>
)}
/>
)}
</View>
</ScrollView>
);
};
I keep getting the warning;
VirtualisedLists should never be nested inside plain ScrollViews with the same orientation - user another VirtualisedList-backed container instead.
I've searched around and can only find examples were the code has placed items in a fixed header / footer scenario, but I want the user to be able to horizontally scroll the relevant flatlists, but if they then scroll vertically it scrolls all of the content (baring the footer navigation tabs, which are working fine).
What else can I use other than the scrollview?