Menu
I know these kind of questions have in the stackoverflow before. But I cannot the find the correct solution for this problem.
Have any solution for put <FlatList/> inside of the <ScrollView></ScrollView> in react-native?
here is my code...
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
</ScrollView>
Error gives as follow:
ERROR VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
544
asked Nov 01 '25 05:11
I found the solution for that. I put my <ScrollView></ScrollView> component codes inside of <FlatList> ListHeaderComponent props.
Here is how it looks. I'm pretty sure this should works for every-one
I found that solution from here. you can refer it and can understandable it very easily. How to Fix 'VirtualizedLists should never be nested inside plain ScrollViews' Warning
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
ListHeaderComponent={ //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={require('../assets/Interview.png')}
width="100%"
height="0"
style={styles.logo2}
/>
</View>
}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With