React-native-draggable-flatlist: onPress works after delay on Android

[aviemore]

"react-native-draggable-flatlist": "2.0.10", "react-native": "0.61.5",

Simple instance.
```javascript
data={this.props.words}
renderItem={this.renderItem}
...
/>
````

Any touchable components inside of renderItem component works only after some press delay. Only click is not working, it needs press and wait a bit. Looks like it's about 100-200 ms. iOS works perfectly, problem is only on Adroid.

[johandk89]

I have the same issue

[csath]

Have the same issue

[gyurui]

Same issue here. I used this workaround but I am not so satisfied with it:

https://github.com/computerjazz/react-native-draggable-flatlist/issues/99#issuecomment-569099474

[computerjazz]

likely an issue with RNGH: https://github.com/software-mansion/react-native-gesture-handler/issues/920

[computerjazz]

also related: https://github.com/software-mansion/react-native-gesture-handler/issues/745
although that has been closed

[curiousdustin]

Just to add clarification for others:

Using onPressOut as mentioned by @gyurui mentioned is not great because it is triggered in cases you wouldn't want such as:

• Attempting to cancel a press by moving out of the hit area and releasing
• Intending to scroll a list instead of actually press a button contained in the list

[johnnyrockfort]

The same here for us... Any idea when this will be fixed?

[computerjazz]

As this appears to be an upstream bug, I encourage you to help find a fix on the RNGH repo.

[computerjazz]

Can someone try using the Touchables exported from react-native-gesture-handler and see if that solves the issue?

[curiousdustin]

I tried this and ended up with issues with nested touchables. https://github.com/computerjazz/react-native-draggable-flatlist/issues/99#issuecomment-573807397

This seems like a common scenario as you typically want to be able to touch the entire list item, but then also have buttons within the item.

[computerjazz]

Hm yeah, RNGH + Touchables has been an issue for a while 😕
Another related issue on a package created by the author or RNGH, in which he responds:
https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/16#issuecomment-475989947

Unfortunately the solution there (disabling tap) won't work for react-native-draggable-flatlist as we rely on the tap to calculate offsets.

[theashguy]

Hi there all / @computerjazz!

I can confirm that applying the react-native-gesture-handler touchables works well to solve this one. In my case I'm applying them as an alternative component based on the platform to my ListItem as follows (this example is incomplete obviously):

import {
  Platform,
  TouchableHighlight
} from 'react-native';

import {
  FlatList,
  TouchableNativeFeedback
} from 'react-native-gesture-handler';

<FlatList
    ...props...
    renderItem={({ item }) => (
        <ListItem
            ...props...
            Component={Platform.select({
                android: TouchableNativeFeedback as any,
                default: TouchableHighlight
            })}
            onPress={() =>
                // Do your thing
            }
         />
    )}
/>

Likely should still be looked into as a bug, but this workaround is fully functional and doesn't seem to have any negative effects. Enjoy!

[aviemore]

Hi there all / @computerjazz!

I can confirm that applying the react-native-gesture-handler touchables works well to solve this one.
...

I've used workaround with TouchableNativeFeedback for now as well.

[deiucanta]

@computerjazz Are you sure this is a RNGH bug and not something related to the way you setup the tap/pan handlers?

I'm thinking of react-navigation which uses RNGH and there are no issues with react-native touchables inside the screens.

[computerjazz]

I think the issue is specifically with the TapGestureHandler wrapper, which i'm not sure react-navigation has.

[curiousdustin]

That is the same conclusion I came to.

RNGH recommends using their version of the Touchables. However, doing that results in alternate bugs, such as the inability to nest Touchables. (https://github.com/computerjazz/react-native-draggable-flatlist/issues/99#issuecomment-573807397)

If you don't need to nest them, this may work for you.

[deiucanta]

That makes sense. Any way to avoid using TapGestureHandler in react-native-draggable-flatlist?

[computerjazz]

Hm it _might_ be possible to use PanGestureHandler for everything, since we don't technically need to calculate any offsets etc until the user actually begins panning., It would require some rewriting but at this point that seems like a decent option.

EDIT: I did a little exploration and it will be more difficult than I originally thought, since we need to be able to enter a hovering state without panning (i.e. if I longpress on an item and don't move my finger). This means that PanGestureHandler won't be able to give us any useful offset information, so it look like we're stuck with the TapGestureHandler for the time being.

[deiucanta]

@computerjazz what if you set minDist to 0?

[computerjazz]

@deiucanta I'm not sure I follow how that would help -- explain please?

Update on removing TapGestureHandler -- I realized we don't actually need the offset info until we pan, as the cell itself can provide its "pre-pan" offset. I removed the TapGestureHandlers and pushed the change to master, but will need to test thoroughly before I'm convinced it's a bug-free fix.

[deiucanta]

@computerjazz if you set minDist to 0 on the PanGestureHandler I think you will be able to get the offset right away, without having to move the pointer.

[computerjazz]

ah I see. That may work, although I'm worried that may interfere with scroll by capturing the gesture before the scrollview has a chance to grab it.

[computerjazz]

I dropped the latest update with TapGestureHandler removed into a snack if folks want to try to break things: https://snack.expo.io/BJ!3zmkXL

I have tested on android and verified it fixes the onPress issue. That said I expected to have to do a little more work to make up for the lost cell offset calculations, but it seems to work as-is, which is puzzling.

So, good news, it seems to work, not-so-good news, I don't understand why :)

What I _expected_ to see was that the hovering cell's top edge would jump to be directly under your finger on pan, since we no longer provide the offset from touch position to the top of the cell. But what I see is that the cell remains hovering anchored to wherever you originally started the drag from, which is the correct behavior. If others could verify that they also see this correct behavior I'd feel more confident in the change, but I still will want to dig in to understand it better.

EDIT: Figured it out — the activationDistance animated value was correctly compensating for the cell offset:

https://github.com/computerjazz/react-native-draggable-flatlist/blob/master/src/index.tsx#L717-L720

I'll need to think through whether this is correct in all cases. But it's promising!

[computerjazz]

Removed TapGestureHandler in 2.3.0, please let me know if the onPress issue is fixed.

[aviemore]

Updated to 2.3.0. Seems it works 🚀

[aviemore]

@computerjazz
At the same time I noticed some time ago opened issue about nesting this draggable-flatlist was referred to this ticket and the new update doesn't solve it.

The problem is when draggable-flatlist lays inside of scrollview (in my case keyboard-aware-scroll-view), the outer scrollview doesn't trigger the scroll action above draggable-flatlist, but trigger it above usual flatlist.

<ScrollView scrollEnabled ...>  
   <View ... /> // some content
   <Flatlist scrollEnabled={false} ... /> //  <-CAN capture outer scroll
   <DraggableFlatList scrollEnabled={false} ... /> //  <-CANNOT capture outer scroll
<ScrollView/>

I mean I do not need scroll nested draggable-flatlist or flatlist itself, I need to scroll all content as one per page. But it's still stuck above draggable-flatlist. Both platforms.

---

I can open it as new issue, to avoid blocking this ticket.

[computerjazz]

@ivan-kalinin the nested scrollview issue is not related to this.
There are a few related issues, please move to the appropriate one:
https://github.com/computerjazz/react-native-draggable-flatlist/issues/15
https://github.com/computerjazz/react-native-draggable-flatlist/issues/106

[aviemore]

@computerjazz ok, thanks a lot! I think we're ready to close this ticket so.