Currently, I am working on a functional component that includes a ScrollView. I have connected my android phone to my laptop in order to view the changes on the phone as I make them.
Issue:
The problem I am facing is that when I slide on the right side of the phone screen, the page scrolls correctly. However, if I slide at the center or left side of the phone screen, the page does not scroll properly and instead bounces to the top and bottom.
This is the simplified version of my code:
return (
<TouchableWithoutFeedback style={{ flex: 1 }} onPress={Keyboard.dismiss}>
<SafeAreaView>
<Header title="Organizations" navigation={props.navigation} />
<ScrollView>
<Block mb={spacing.huge}>
<Card>
......
<FlatList
.....
/>
......
</Card>
</Block>
</ScrollView>
</SafeAreaView>
</TouchableWithoutFeedback>
)
I am receiving the following error in the console:
WARN VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
If anyone has any insights on how to resolve this issue, your help would be highly appreciated.