Conflict when using "Pressable" in "Scrollview" on iOS

Conflict when using "Pressable" in "Scrollview" on iOS

  

With React Native, I use the here 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 :

Image

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>
© 2024 Dagalaxy. All rights reserved.