Touch not tracked correctly in screens with presentation='modal' (iOS only)

[fbeccaceci]

This picture is the example app in the SortableGrid section, page "Playground" with presentation changed to "modal" on iOS, found this problem in my app and happens in the example as well

As you can see the center of the cross is not aligned with my mouse cursor (same happens with my finger on real devices), this doesn't happen in non-modal screens (i'm using enableActiveItemSnap={true})

It may looks a minor inconvenience but there are 2 main problems:

• It changes the draggable rect of the item, it cannot be dragged from around the bottom border (still inside of item borders)
• In random cases that i haven't identified this misalignment increase noticeably, making the both the items dragging a lot below the finger and it can be dragged only from around the top border

I did a bit of investigation, this problems seems to be caused by this:

const containerMeasurements = measure(containerRef); in DragProvider.tsx inside of handleDragStart function

for some reasons i don't know measure() returns a slightly wrong (about 16px on average) pageY value, which causes the misalignment and the change in the hitbox due to this check a few lines below

if (
  touchX < itemPosition.x ||
  touchX > itemPosition.x + dimensions.width ||
  touchY < itemPosition.y ||
  touchY > itemPosition.y + dimensions.height
) {
  fail();
  return;
}

I'm experiencing this problem both in an app of mine and the example app, tested with Fabric, i haven't tested with the old arch

[MatiPl01]

Hi @fbeccaceci!
Thank you for very detailed issue description. I haven't tested what happens on screens with presentation set to modal. I will look into this in the next days and see what can be done to fix it.

[fbeccaceci]

It seems to be a problem with react-native-gesture-handler, i opened this issue on their repo software-mansion/react-native-reanimated#7099 and let's see what they say

I managed to reproduce the same behaviour in an empty project without react-native-sortables, https://github.com/fbeccaceci/ReanimatedMeasureExample

I don't know if there is something that could be done to this library to workaround this in the mean time

[MatiPl01]

It seems to be a problem with react-native-gesture-handler, i opened this issue on their repo software-mansion/react-native-reanimated#7099 and let's see what they say

I managed to reproduce the same behaviour in an empty project without react-native-sortables, https://github.com/fbeccaceci/ReanimatedMeasureExample

I don't know if there is something that could be done to this library to workaround this in the mean time

It seems to me that gesture handler may return correct values, whilst the measure function returns incorrect ones. I talked with guys from reanimated team in the company meeting and they told me that measure reads values from a different place (from a ShadowNode), whilst gesture handler read them from the native view props, thus you can see the difference in the result.

I also encountered some other measurement problems with reanimated's measure function before, which returned incorrect measurement values, so it's very likely that this function is giving us wrong results.

I didn't have time to look into this yesterday. I will take a look today/tomorrow and come back to you once I know more about what happens in there.

[MatiPl01]

Hey @fbeccaceci!
I've just released a new version where I changed the touch position calculation logic not to use the measure function from reanimated. Could you please test it out and let me know if it works for you after the upgrade?

[fbeccaceci]

Looks good to me