react-native-scroll-bottom-sheet

react-native-scroll-bottom-sheet copied to clipboard

Current Behavior

Very weird behavior. If I use Pressable, the click is detected once over 100 of the times. With TouchableHighlight, it works perfectly!

How to reproduce

When I replace in the code below TouchableHighligth with Pressable, it doesn't work

<ScrollBottomSheet
        style={{ backgroundColor: "#f8f8f8" }}
        ref={bottomSheetRef}
        componentType="FlatList"
        // snapPoints={[128, "50%", windowHeight]}
        snapPoints={[100, windowHeight]}
        initialSnapIndex={1}
        onSettle={(index) => {
          console.log(index);
        }}
        renderHandle={() => (
          <View style={scrollBottomSheet.header}>
            <View style={scrollBottomSheet.panelHandle} />
          </View>
        )}
        data={groupContext.state.userGroupList}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <TouchableHighlight
              onPress={() => {
                console.log("onPress detected on item");
              }}
              onLongPress={() => {
                console.log("longPress detected on item");
              }}
            >
              <Text>{item.id}</Text>
            </TouchableHighlight>
          );
        }}
        contentContainerStyle={scrollBottomSheet.contentContainerStyle}
      />

Your Environment

	version
Platform (Android, iOS or both)
react-native-scroll-bottom-sheet
react-native
react-native-gesture-handler
react-native-reanimated

TouchableHighlight works ONLY if you import it from react-native-gesture-handler, not react-native!

TouchableHighlight works ONLY if you import it from react-native-gesture-handler, not react-native!

This fix works only in Android, but not on iOS.

The following one works for both: https://gorhom.github.io/react-native-bottom-sheet/troubleshooting/#pressables--touchables-are-not-working-on-android

Please close this issue.