React-native-reanimated-bottom-sheet: Fix enabledContentGestureInteraction with selectable <ScrollView>

[karimcambridge]

When enabledContentGestureInteraction is true, you can not select components in a ScrollView, there are workarounds for this (which causes loss of SOME functionality). But will there ever be a fix internally?

[karimcambridge]

If anyone can guide me on how to fix this I would try to make a pull request.

This issue seems to only persist on android and I need this fixed to release my app.

[SocialBrothersDEV]

Same here. TouchableOpacity from 'react-native-gesture-handler' works on android, but not on ios. ToucahbleOpacity from 'react-native' works on ios but not on android..

[karimcambridge]

Seems like if you hold the screen on Android it works.

[Xadinsx]

@karimcambridge yes, holding the screen is the only way that I can scroll on android.

I have been trying a lot of things but for some reason I cant place enabledContentGestureInteraction={true} on android. It makes everything not touchable/scrollable on the Flatlist that I have on my renderContent

[karimcambridge]

Hey @Xadinsx, @SocialBrothersDEV actually gave us the key.

I literally just fixed it. So I was using onPress from List.Item in react-native-paper but what I do now is use Platform.select outside of my react function and select the native-native TouchableOpacity if ios, else if android select the gesture-handler one!

It works great on android and I am waiting on my tester to tell me the result of iOS.

import React, { useState } from 'react';
import { Platform, StyleSheet, TouchableOpacity as TouchableOpacityNative } from 'react-native';
import { List } from 'react-native-paper';
import { TouchableOpacity as TouchableOpacityGesture } from 'react-native-gesture-handler';

const
    TouchableComponent = Platform.select({ // workaround for reanimated-bottom-sheet
            ios: TouchableOpacityNative,
            android: TouchableOpacityGesture,
    });
;

const LocationItem = props => {
    return (
        <TouchableComponent
            onPress={onLocationSelected}
        >
            <List.Item
                style={styles.listItem}
                                //onPress={null} // DON'T USE THIS.
            />
        </TouchableComponent>
    );
};

Thank you @SocialBrothersDEV! Just some minor information like that can solve a persons' horrors.

edit:

OnePlus 6 - Confirmed
iPhone 8 - Confirmed

The fix works!