nysamnang/react-native-raw-bottom-sheet

Press Events Not Working in Android

imdanielpiva opened this issue ยท 6 comments

This problem is pretty much the same the one described in #29.

The components inside the RBSheet component just doesn't fire the onPress event, I'm quite sure it's not a problem with my content component, as I've had used it before inside another bottom sheet library.

I could not dive more into helping debugging this problem inside the library source code due tight time, but hope this info helps somehow.

Physical Device:

Android 9
Motorola Moto G7 Power
// package.json

"react": "16.8.6",
"react-native": "0.60.3",
"react-native-raw-bottom-sheet": "^2.0.5"
{ /* App.tsx; Basically the representation of the source code */ }
<RBSheet
    height={450}
    duration={0}
    animationType="slide"
    closeOnDragDown={false}
    ref={ref => RBSheetRef = ref}
    customStyles={{
        wrapper: {
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        backgroundColor: "#00000012"
    },
    container: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff0"
    }
  }}
>
   { /* My component to use as content of the <RBSheet />  */ }
    <BottomSheetContent
        list={files.list}
        hasError={files.hasError}
        isLoading={files.isLoading}
        errorMessage={files.errorMessage}
        onCloseButtonClick={closeBottomSheet}
        onPress={file => navigateToPDFInvoicePage(file)}
        date={(selectedSummaryItem && selectedSummaryItem.refDate) || new Date()}
    />
</RBSheet>

@imdanielpiva That's very strange! As you can see in my example, I use Touchable inside each of them and the Press Events are working pretty good. Anyway, I'm gonna track this issue and thank you for the snippet code.

Hi, @nysamnang, thank you for your response, and sorry for not updating this issue when I figured it out just about 2 hours after having opened the issue.

The problem actually is that if we use the Touchables components from react-native-gesture-handler then it won't work, I'm not sure why and couldn't dig into the problem, it just won't work, I've seen some compatibility issues of react-native-gesture-handler lately. But using the Touchables from react-nativedid the trick, so anyone who will combine react-native-raw-bottom-sheet and react-native-gesture-handler be aware of this!

Would it be reasonable add this information to the README?

By the way, awesome work!

@imdanielpiva Thank you very for figured out the issue otherwise maybe I don't how to run into this problem. You said that the issue occurred when we combine RBSheet with react-native-gesture-handler but I don't agree at all because I see the snippet code in the issue #29 I think those components are not react-native-gesture-handler's component. It really makes me wonder!!!

Well, there's just another bit of information that I forgot to mention that may help about this issue: besides of all my Touchables being imported from react-native-gesture-handler, all of them were children of a ScrollView also from react-native-gesture-handler!

I really might be talking some nonsense here ๐Ÿ˜„

You probably already know this, but the main feature of react-native-gesture-handler is that they don't use the React Native Gesture Responder System at all , they implement it natively for each platform, and I think that there might be a conflicting issue in some scenarios mixing the React Native Gesture Responder System and the react-native-gesture-handler implementation.

@imdanielpiva @nysamnang

I am facing same issue, please help me to solve the same.

Within the bottom sheet not able to call "TouchableOpacity" from "react-native" / "react-native-gesture-handler" packages.

i am in this issue around 6 hours, please help me.

@ccs1428 make sure u imported TouchableOpacity from react-native package not using the TouchableOpacity from react-native-gesture-handler

i had the same problem as u then i realize i imported the TouchableOpacity from react-native-gesture-handler