With React Native, I use the ScrollView component and, inside it, Pressable components.
Often and exclusively on iOS, there seems to be a conflict since scrolling doesn't seem to work if the finger is placed on a Pressable element, as shown in the video :
Since the Pressable element is quite large, it degrades the user experience when scrolling (sometimes the element is even considered pressed and opens).
import React from 'react';
import {Pressable, ScrollView, View} from 'react-native';
const DashboardScreen = () => {
return (
<ScrollView showsVerticalScrollIndicator={false}>
<Pressable>
<View>...</View>
</Pressable>
</ScrollView>
);
};
export default DashboardScreen;
Does anyone have an idea of how to limit the problem? Thanks a lot.
Answer
I had the same problem. Wrapping all the children of ScrollView in a single pressable solved the issue for me:
<ScrollView>
<Pressable>
<View>
<Text>View number 1</Text>
</View>
<Pressable>
<Text>Pressable View</Text>
</Pressable>
</Pressable>
</ScrollView>