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

DORSETRIGS

3 min read

·

01-09-2024

19

0

Share

Resolving the Conflict Between Pressable and ScrollView on iOS in React Native

Developing user-friendly React Native apps often involves seamlessly integrating scrolling with interactive elements. However, a common issue arises on iOS when nesting Pressable components within a ScrollView. This can lead to frustrating user experiences, where scrolling becomes unresponsive, and Pressable elements trigger unintended actions. Let's explore this conflict and discover solutions to ensure a smooth and intuitive experience.

The Problem: Scrollview & Pressable Conflict

The core issue lies in the way iOS handles touch events. When a user touches a Pressable element within a ScrollView, the system struggles to differentiate between a tap intended for the Pressable and a gesture meant for scrolling. This ambiguity can cause scrolling to become sluggish or completely cease, leading to an unintuitive user experience.

Here's a breakdown of the key factors contributing to this issue:

• Pressable's Large Touch Area: Pressable components often have a larger touch area than their visual representation. This extends the area where a touch event will be detected, leading to a higher chance of interfering with scrolling.
• iOS Touch Handling: iOS prioritizes handling touch events within the bounds of a Pressable element. Even if the user's finger is primarily moving for scrolling, the Pressable element might capture the touch event, interrupting the scrolling gesture.

The Solution: Leveraging ScrollView & Pressable Attributes

Fortunately, there are several ways to mitigate this conflict and achieve a smooth scrolling experience. Let's look at a few effective techniques:

1. ScrollView's onScrollBeginDrag & onScrollEndDrag:

   import React from 'react';
   import { Pressable, ScrollView, View } from 'react-native';
   
   const DashboardScreen = () => {
       const handleScrollBeginDrag = () => {
           // Prevent Pressable from triggering during scrolling
           // You could disable pressable here (e.g., using a state variable)
           console.log('Scroll started');
       };
   
       const handleScrollEndDrag = () => {
           // Re-enable Pressable after scrolling ends
           // You could re-enable pressable here (e.g., using a state variable)
           console.log('Scroll ended');
       };
   
       return (
           <ScrollView showsVerticalScrollIndicator={false} 
                       onScrollBeginDrag={handleScrollBeginDrag}
                       onScrollEndDrag={handleScrollEndDrag}>
               <Pressable>
                   <View>...</View>
               </Pressable>
           </ScrollView>
       );
   };
   
   export default DashboardScreen;
   

   By utilizing onScrollBeginDrag and onScrollEndDrag events, you can control the responsiveness of Pressable elements during scrolling. You can temporarily disable the Pressable when scrolling starts and re-enable it when scrolling ends, preventing accidental activations during scrolling.

2. Pressable's disabled Attribute:

   import React, { useState } from 'react';
   import { Pressable, ScrollView, View } from 'react-native';
   
   const DashboardScreen = () => {
       const [isScrolling, setIsScrolling] = useState(false);
   
       const handleScrollBeginDrag = () => {
           setIsScrolling(true);
       };
   
       const handleScrollEndDrag = () => {
           setIsScrolling(false);
       };
   
       return (
           <ScrollView showsVerticalScrollIndicator={false} 
                       onScrollBeginDrag={handleScrollBeginDrag}
                       onScrollEndDrag={handleScrollEndDrag}>
               <Pressable disabled={isScrolling}>
                   <View>...</View>
               </Pressable>
           </ScrollView>
       );
   };
   
   export default DashboardScreen;
   

   Another approach is to use the disabled attribute of the Pressable component to control its responsiveness. By setting disabled to true when scrolling starts and false when scrolling ends, you ensure that the Pressable doesn't interfere with scrolling.

3. Pressable's onPressIn & onPressOut:

   import React, { useState } from 'react';
   import { Pressable, ScrollView, View } from 'react-native';
   
   const DashboardScreen = () => {
       const [isPressed, setIsPressed] = useState(false);
   
       const handlePressIn = () => {
           setIsPressed(true);
       };
   
       const handlePressOut = () => {
           setIsPressed(false);
       };
   
       return (
           <ScrollView showsVerticalScrollIndicator={false}>
               <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
                   <View>...</View>
               </Pressable>
           </ScrollView>
       );
   };
   
   export default DashboardScreen;
   

   This approach utilizes the onPressIn and onPressOut events of the Pressable component to detect when a user begins and ends pressing the element. By tracking the isPressed state, you can selectively disable scrolling during the press gesture, allowing for smooth scrolling once the press is released.

Further Optimization

To enhance the user experience even further, you might consider the following strategies:

• Adjust Pressable's hitSlop: The hitSlop property of Pressable controls the clickable area beyond the visual bounds of the component. You can experiment with reducing the value of hitSlop to minimize the area where touch events are detected, thus reducing the chances of interfering with scrolling.

• Reduce Visual Overlap: If your Pressable element overlaps significantly with other content within the ScrollView, reducing the overlap can help prevent unintended touch events and improve scrolling behavior.

By understanding the core conflict between Pressable and ScrollView on iOS and employing the techniques discussed above, you can achieve a seamless scrolling experience within your React Native apps.

Remember: Always test your solutions thoroughly on real iOS devices to ensure optimal performance and user satisfaction.