React Native press and hold, drag finger to another touchable and capture touch by that view

Question

In my React Native app I'm trying to have a button that the user can long press, and without lifting their finger, able to interact with another view. Here is roughly what I want:

Think of it like how 3D touch/long press worked prior to iOS 13/14 (depending on place in system and device): user either 3D touched or long pressed a button, for example an app icon, and a contextual menu popped up. Then, users could, without lifting the finger, hover onto one of the buttons and release their finger, triggering the button tap.

I have complete control over my buttons, touchables, and views (even the tab bar is custom, as opposed to the illustrations I made above).

How can I achieve this? (I'm on React Native 0.63)

Answer 1

There may be a better solution to this but off the top of my head I would use the Gesture Responder System

https://reactnative.dev/docs/gesture-responder-system

You can have a one container view that wraps tab bar and buttons. Then listen to the onResponderMove event to decide when these buttons should appear. This may happen for example when the locationY exceeds some value.

You can also use the onResponderRelease event (again with the help of locationX and locationY parameters) to determine if the finger was released above the button.