How to change the current gesture handler?

[xkrsz]

Hi, I'm trying to achieve a drag and drop on an element that can begin only by performing a long press. My aim is to wait for the long press handler to activate and immediately allow the pan handler to take over.
My approach seems incorrect, I cannot find any API for doing such things. How would I go about implementing such feature? Thanks a lot.

[neiker]

Hi @krszwsk have you found a solution on this?

I have the same problem #445

[osdnk]

Hello @krszwsk @neiker
I made an example how to achieve it:

<TapGestureHandler
  ref={this.tapRef}
  maxDurationMs={1000}
>
  <Animated.View>
    <PanGestureHandler
      waitFor={this.tapRef}
      onGestureEvent={this._onGestureEvent}
      onHandlerStateChange={this._onHandlerStateChange}>
      <Animated.View
        style={[
          styles.box,
          {
            transform: [
              { translateX: this._translateX },
              { translateY: this._translateY },
            ],
          },
          this.props.boxStyle,
        ]}
      />
    </PanGestureHandler>
  </Animated.View>
</TapGestureHandler>

[neiker]

@osdnk thank you for your response, but in my case seems don't work because my press and hold elements are inside a ScrollView. Using waitFormeans PanGestureHandler will be fired on TapGestureHandler failed not matter what. It's ok in the case the reason was the timeout (maxDurationMs) but if the reason was it failed because maxDist reason, it should be the ScrollView than receive the event.

This is my code:

render() {
    const { widget } = this.props;
    const { dragging } = this.state;

    return (
      <TapGestureHandler
        onHandlerStateChange={this._onTapHandlerStateChange} // This will made the widget `selected`
        ref={this.tapRef}
        maxDurationMs={500}
        numberOfTaps={1}
        maxDist={5} // User move they finger so ScrollView must receive the event
      >
        <Animated.View>
          <PanGestureHandler
            onGestureEvent={this._onPanGestureEvent}
            onHandlerStateChange={this._onHandlerStateChange}
            minPointers={1}
            maxPointers={1}
            waitFor={widget.selected ? undefined : this.tapRef} // Wait only if the widget is not selected
          >
            <Animated.View
              style={[
                styles.item,
                {
                  transform: [
                    { translateX: this._translateX },
                    { translateY: this._translateY },
                  ],
                },
              ]}
            >
              <Widget widget={widget} dragging={dragging} />
            </Animated.View>
          </PanGestureHandler>
        </Animated.View>
      </TapGestureHandler>
    );
  }

Here is where I'm testing this:
neiker/canvas-old@e13615c

[osdnk]

So maybe try to set minDist same as maxDist (or minimally smaller). Then it will be activated for a while

[neiker]

@osdnk do you mean to set minDist on the PanGestureHandler? Don't work, PanGestureHandler still receive the gesture.

render() {
    const { widget } = this.props;
    const { dragging } = this.state;

    return (
      <TapGestureHandler
        onHandlerStateChange={this._onTapHandlerStateChange} // This will made the widget `selected`
        ref={this.tapRef}
        maxDurationMs={500}
        numberOfTaps={1}
        maxDist={10}
      >
        <Animated.View>
          <PanGestureHandler
            onGestureEvent={this._onPanGestureEvent}
            onHandlerStateChange={this._onHandlerStateChange}
            minPointers={1}
            maxPointers={1}
            waitFor={widget.selected ? undefined : this.tapRef} // Wait only if the widget is not selected
            minDist={9}
          >
            <Animated.View
              style={[
                styles.item,
                {
                  transform: [
                    { translateX: this._translateX },
                    { translateY: this._translateY },
                  ],
                },
              ]}
            >
              <Widget widget={widget} dragging={dragging} />
            </Animated.View>
          </PanGestureHandler>
        </Animated.View>
      </TapGestureHandler>
    );
  }

[neiker]

@osdnk can you reopen the issue so it's more visible?

[jennmueng]

I have the same issue too. The PanGestureHandler is within a ScrollView and it activates every time the TapGestureHandler fails.

Alternatively, is there a method to make PanGestureHandler activate ONLY when LongPressGestureHandler is active?

[jgoodhcg]

I'm trying do some drag and drop within a scroll view initiated by long press too.
I thought I could achieve this with simultaneousHandlers prop but the pan gesture handler cancels before the long press activates.

[Asupkay]

Hello @krszwsk @neiker
I made an example how to achieve it:

<TapGestureHandler
  ref={this.tapRef}
  maxDurationMs={1000}
>
  <Animated.View>
    <PanGestureHandler
      waitFor={this.tapRef}
      onGestureEvent={this._onGestureEvent}
      onHandlerStateChange={this._onHandlerStateChange}>
      <Animated.View
        style={[
          styles.box,
          {
            transform: [
              { translateX: this._translateX },
              { translateY: this._translateY },
            ],
          },
          this.props.boxStyle,
        ]}
      />
    </PanGestureHandler>
  </Animated.View>
</TapGestureHandler>

My code:

    return (
      <View style={styles.body}>
        <PanGestureHandler
          waitFor={this.tapRef}
          onGestureEvent={this._onGestureEvent}
          onHandlerStateChange={this._onPanHandlerStateChange}>
          <Animated.View>
            <TapGestureHandler
              ref={this.tapRef}
              onHandlerStateChange={this._onTapHandlerStateChange}
              key={item.key}
              numberOfTaps={1}
              maxDurationMs={2000}
            >
               <Animated.View
                style={{
                  width: Dimensions.get('window').width/3,
                  height: Dimensions.get('window').width/3,
                  transform: [
                    { translateX: this._translateX },
                    { translateY: this._translateY },
                  ]
                }}
              >
                <Craving info={item} showName={this.props.showNames}/>
              </Animated.View>
            </TapGestureHandler>
          </Animated.View>
        </PanGestureHandler>
      </View>
    );

I attempted to use this without a ScrollView and still ran into issues where the PanGestureHandler does not wait for the TapGestureHandler. In fact they both fire BEGAN the first time I touch it. Each time after that TapGestureHandler will first BEGAN and then FAIL after the alloted time but PanGestureHandler will then not BEGAN I think this is because the pan is evaluated before the tap. I put a print out in onTapHandlerStateChange and onPanHandlerStateChange and I can see that the onPanHandlerStateChange fires BEGAN before the onTapHandlerStateChange fires BEGAN so technically the TapGestureHandler is in UNDETERMINED which allows the pan gesture to start.

NOTE: Switched the places of Tap and Pan gesture handler this cause Tap to change state to BEGAN before the pan, but this did not solve the issue where pan does not wait for tap even though tap is in BEGAN state.

Any help would be greatly appreciate.

[jgoodhcg]

I also tried playing around with minDist on the pan handler. I still can't get the scroll, pan, and long press to all work with the experience I want. Long press to activate then drag in one continuous press.

Decided to swap the long press for a double tap to initiate the drag mode on elements.

[astralfalcon]

I am also looking to activate my PanHandler after a LongPress in a scroll view.

[kimdhoe]

I'm trying to achieve a similar effect: long-press items inside ScrollView to drag them around. I used LongPressGestureHandler and simultaneousHandlers like below:

<LongPressGestureHandler
  simultaneousHandlers={this.props.panRef}
  onHandlerStateChange={this.handleLongPressStateChange}
>
  <Animated.View>
    <PanGestureHandler
      ref={this.panRef}
      maxPointers={1}
      onGestureEvent={this.handleGestureEvent}
      onHandlerStateChange={this.handleGestureEvent}
    >
      <Animated.View
        style={{ transform: [{ translateX: this.translateX }, { translateY: this.translateY }] }}
      >
        <Text style={styles.entryText}>
          Hello World
        </Text>
      </Animated.View>
    </PanGestureHandler>
  </Animated.View>
</LongPressGestureHandler>

Then, the condition for calculating Y-position would be:

translateY = cond(
  and(eq(this.panState, State.ACTIVE), eq(this.longPressState, State.ACTIVE)),
  [/* ... */],
  [/* ... */],
)

Now, I've been stuck at the ScrollView part. Pan handler consumes gesture events, so scrolling doesn't work if a touch starts from inside items. Wondering if it's possible to allow scrolling until a long-press happens.

What I'm trying to achieve is something like reordering feature in Any.do or Todoist.

[mxmzb]

@kimdhoe have you found a workaround by now by any chance?

[kulyk]

Hey everyone,

I've finally found a way to implement drag-and-drop on long-press inside the FlatList. In my case, I don't need to rearrange the list items order. I have a dropzone on a screen and I need no handle cases when users drag the list item on it.

Anyway, I hope my code snipped would help you to deal with your particular scenario.
I'm sharing the most general piece of code. If you have any specific questions, ask me

I found out it's, most likely, impossible to use both LongPressGestureHandler and PanGestureHandler when we're dealing with the FlatList. Looks like it's impossible to pass the gesture to Pan when the LongPress is activated.

LongPressGestureHandler also provides coordinates, so it's possible to use it instead of PanGestureHandler.

import React from 'react'
import { Animated, FlatList, Platform, View } from 'react-native'
import { LongPressGestureHandler, State } from 'react-native-gesture-handler'
import Modal from 'react-native-modal'

const MEASURE_TIMEOUT = Platform.select({
  android: 300,
  ios: 100,
})

class DraggableList extends React.Component {

  // translateX and translateY are not calculated for LongPressGestureHandler
  // This variables are used to get them
  x0 = null
  y0 = null

  listItemRefs = {}

  listItemMeasurements = {}

  measureTimeouts = {}

  // stores the position of our dragged element
  translate = new Animated.ValueXY({ x: 0, y: 0 })

  state = {
    dragging: null,
  }

  onGestureEvent = (event) => {
    const { x, y } = event.nativeEvent
    // calculate and set translationXY variables while dragging
    const translateX = x - this.x0
    const translateY = y - this.y0
    this.translate.setValue({ x: translateX, y: translateY })
  }

  onHandlerStateChange = (event) => {
    const { state } = event.nativeEvent
    if (state === State.ACTIVE) {
      this.onDragStart(event)
    }
    if (state === State.END || state === State.CANCELLED) {
      this.onDragEnd(event)
    }
  }

  onDragStart = (event) => {
    const { dragging } = this.state
    const { x, y } = event.nativeEvent
    // Finds the dragged list item
    // and renders it's copy over the FlatList
    const itemKey = this.findTouchedItemKey(x, y)
    if (itemKey && dragging !== itemKey) {
      this.x0 = x
      this.y0 = y
      this.setState({ dragging: itemKey })
    }
  }

  onDragEnd = (event) => {
    // Handle a momement when user drop the item somewhere

    // Clear initial touch gesture coordinates
    this.x0 = null
    this.y0 = null
  }

  removeHoverComponent = () => {
    this.setState({ dragging: null })
  }

  findTouchedItemKey = (touchX, touchY) => {
    const itemKeys = Object.keys(this.listItemRefs)
    const touchedItemKey = itemKeys.find((itemKey) => {
      const shape = this.listItemMeasurements[itemKey]
      if (!shape) {
        return false
      }
      return checkPointBoxIntersection(touchX, touchY, shape)
    })
    return touchedItemKey
  }

  measureAll = () => {
    // Coordinates are recalculated once their position
    // on the viewport changes. Otherwise, it's impossible
    // to find and highlight the touched item
    const itemKeys = Object.keys(this.listItemRefs)
    itemKeys.forEach(this.measureListItem)
  }

  measureListItem = (key) => {
    // setTimeout is required, otherwise all measurements will be 0
    if (this.measureTimeouts[key]) {
      clearTimeout(this.measureTimeouts[key])
    }
    this.measureTimeouts[key] = setTimeout(
      this._measureListItem(key),
      MEASURE_TIMEOUT
    )
  }

  _measureListItem = (key) => () => {
    const { dragging } = this.state
    const element = this.listItemRefs[key]
    if (!element || dragging) {
      return
    }
    element.measureInWindow(this._onItemMeasured(key))
  }

  _onItemMeasured = (key) => (x, y, width, height) => {
    this.listItemMeasurements[key] = { x, y, width, height }
  }

  setListItemRef = (key) => (ref) => {
    this.listItemRefs[key] = ref
    // Each item is measured, so it's possible
    // to calculate which list item is actually dragged
    // In my case I have a multicolumn FlatList, so
    // I use x, y, width and height
    this.measureListItem(key)
  }

  renderItem = ({ item, index }) => {
    const { draggedItemStyle, renderItem, keyExtractor } = this.props
    const { dragging } = this.state
    const itemKey = keyExtractor(item)
    const active = itemKey === dragging
    const ListItem = renderItem({ item, index, active })
    const wrapperStyle = []
    if (active) {
      // style your dragged item
      wrapperStyle.push(draggedItemStyle)
    }
    // `collapsable` prop is a must for Android
    // without it the measureInWindow won't work
    // as the View can be removed from the UI tree
    // as an optimization
    return (
      <View
        collapsable={false}
        style={wrapperStyle}
        ref={this.setListItemRef(itemKey)}
      >
        {ListItem}
      </View>
    )
  }

  renderHoverDraggingElement = () => {
    const { data, renderItem } = this.props
    const { dragging } = this.state

    // That's a hack for my particular case
    const index = data.findIndex((i) => i.id === dragging)
    const item = data[index]

    const ListItem = renderItem({ item, index, active: true })
    const { x, y } = this.listItemMeasurements[dragging]

    const style = {
      position: 'absolute',
      left: x,
      top: y,
      transform: [...this.translate.getTranslateTransform()],
    }
    return <Animated.View style={style}>{ListItem}</Animated.View>
  }

  render() {
    const { dragging } = this.state

    // For Android maxDist is set to Number.MAX_SAFE_INTEGER
    // with default value, the drag gesture will be canceled
    // https://kmagiera.github.io/react-native-gesture-handler/docs/handler-longpress.html#maxdist

    return (
      <>
        <LongPressGestureHandler
          maxDist={Number.MAX_SAFE_INTEGER}
          onGestureEvent={this.onGestureEvent}
          onHandlerStateChange={this.onHandlerStateChange}
        >
          <FlatList
            {...this.props}
            onMomentumScrollEnd={this.measureAll}
            renderItem={this.renderItem}
          />
        </LongPressGestureHandler>
        <Modal
          isVisible={Boolean(dragging)}
          animationIn="fadeIn"
          animationOut="fadeOut"
          hasBackdrop={false}
          style={styles.modal}
        >
          {dragging ? this.renderHoverDraggingElement() : <View />}
        </Modal>
      </>
    )
  }
}

If you need to rearrange items order, take a look at the next repositories: react-native-sortable-grid, react-native-draggable-flatlist. I wouldn't use them as they both look abandoned, but maybe they would help you to come out with a solution.

[Stefan28BU]

Your solution just saved my ass, �I am implementing a drag and drop component inside a scrollview, similar with the tinder profile photo reorder component, this is the only solution that I can make it to work

[vpetrykov]

This solution is still relevant! :D
Using LongPressGestureHandle you can set an action to execute once an event has started!
Thanks, author for a nice solution :)

[lafiosca]

Thanks for the approach suggestion @kulyk ! For those using the LongPressGestureHandler on individual views, I found that for Android I also needed to add shouldCancelWhenOutside={false}. Otherwise, if the touch ever got outside of the view being dragged, the gesture would cancel. (This didn't happen on iOS.)

[samiede]

While I'm still stuck at the long press problematic, I might have a solution for you @kimdhoe .

For enabling scrolling while dragging, I check the scroll positions distance to the edges of the screen and then use the scrollTo method of the scrollview:

cond(and(
  eq(state, State.ACTIVE), greaterOrEq(absoluteY, windowHeight - 50)),
 call(
    [currentScrollPosition],
    ([value]) => store.scrollView.getNode().scrollTo({ x: 0, y: value + 10, animated: true })
))

I use an Animated.Value to track the currentScrollPosition. I also add the scrollPosition to the items while scrolling so it remains on the edge of the screen visually, it works really smoothly

Edit: I missunderstood, you also only want to activate the pan handler after a long press and have the scrollview consume touches otherwise.
This doesn't work for me either.

[Svarto]

Did anyone find a working solution to this?

[pkpbynum]

Hi all!

I know this is a pretty old issue, but since RN Reanimated 2 is coming out I thought I'd test it with this "drag-and-drop on long press". The intention was to emulate the "up next" queue like that in the iOS music app.

I tried building it as a higher-order component here. Below is a screencast of it in action. It allows reordering elements in the list, adding/removing elements, and also scrolling in the parent ScrollView (since scrolling causes the long press to be rejected, the scroll view inherits the responder). Disclaimer: it's not tested on Android at all.

My implementation uses a ScrollView rather than a Flatlist (I'm sure it could be refactored), but it's the same general idea as @kulyk's solution: It uses the LongPressGestureHandler's onActive trigger as a substitute for the PanGestureHandler. It also stores all of the children offsets in a class external to the React state, and completely decouples the ordering of the rendered children from their positions. Because of this, in order to get the real ordering of the child elements, you need to use a method exposed by the component. This is triggered by the "Print IDs" button in my example.

Screen.Recording.2021-01-15.at.11.02.45.PM.mov

[GiridharKarnik]

Great solution, though the caveat is that when you drag a row all the way to the edges of the scrollView, the scroll vie does not scroll.

[vantreeseba]

export default function Card({ task, onRemove, onDrop }) {
  let panRef = React.useRef(null);
  let touchPos = React.useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
  let [dragging, setDragging] = React.useState(false);

  const handleLongPressStateChange = (evt) => {
    if (evt.nativeEvent.state == State.ACTIVE) {
      setDragging(true);
    }
  };
  const onPanGestureEvent = (evt) => {
    if (dragging) {
      const {
        nativeEvent: { translationX: x, translationY: y },
      } = evt;

      touchPos.setValue({ x, y });
    }
  };

  return (
    <LongPressGestureHandler
      minDurationMs={400}
      maxDist={20}
      simultaneousHandlers={panRef}
      onHandlerStateChange={handleLongPressStateChange}
    >
      <PanGestureHandler
        ref={panRef}
        onGestureEvent={onPanGestureEvent}
        onHandlerStateChange={(evt) => {
          if (dragging && evt.nativeEvent.state == State.END) {
            setDragging(false);
            touchPos.setValue({ x: 0, y: 0 });
            onDrop(5);
          }
        }}
      >
        <Animated.View
          key={`task-${task.id}-${task.done}`}
          style={[
            tw("my-1 flex-col border-2 border-yellow-300 items-stretch"),
            tw(dragging ? "border-yellow-500 z-10" : ""),
            {
              transform: touchPos.getTranslateTransform(),
            },
          ]}
        >
          <CardHeader
            style={tw(dragging ? "bg-yellow-200" : "")}
            task={task}
            onRemove={onRemove}
          />
          <CardBody task={task} />
        </Animated.View>
      </PanGestureHandler>
    </LongPressGestureHandler>
  );
}

Seems to work fine for me.

Hopefully this helps someone.

[kashive]

This worked for me. 🙏

[jsindos]

This doesn't seem to let a ScrollView scroll when nested inside of it.

[jadhaidar]

Hello everyone, I too am facing a similar issue. Got a PanGestureHandler nested inside a ScrollView, and only want to activate the PanGestureHandler after a long press delay, otherwise delegate the pan events to the scroll view.

Seems like a pretty straightforward and common use case. Has anyone been able to pull it off without "hacks" or "workarounds"?

The docs seem to suggest that the following code should work:

const Cursor = (props) => {
  const longPressRef = useRef();

  const onGestureEvent = useAnimatedGestureHandler(...);

  return (
    <LongPressGestureHandler ref={longPressRef}>
      <Animated.View>
        <PanGestureHandler waitFor={longPressRef} {...{ onGestureEvent }}>
          <Animated.View style={[styles.cursor, cursorStyle]}>
            <Box style={styles.cursorBody} />
          </Animated.View>
        </PanGestureHandler>
      </Animated.View>
    </LongPressGestureHandler>
  );
};

export default Cursor;

But it doesn't. The PanGestureHandler activates immediately after the user starts swiping, not waiting for the LongPressGestureHandler. Am I missing something here?

[andreialecu]

There's a video on youtube that shows how to implement this with PanGestureHandler:

https://www.youtube.com/watch?v=Ia2y0GDEuPc

[CallumHemsley]

I couldn't find a way without having an external useState variable like so: const [isTouched, setIsTouched] = useState(false); This is then set to true or false upon long touch or release: (I'm using re-animated so gesture handler slightly different)

const longPressEventHandler = useAnimatedGestureHandler<LongPressGestureHandlerGestureEvent>(
    {
      onActive: (_) => {
        runOnJS(setIsTouched)(true);
      },
      onEnd: (_) => {
        runOnJS(setIsTouched)(false);
      },
    },
    [isTouched]
  );

Then finally within my panGestureEventHandler I simply inject isTouched as a dependency and check it's true before doing anything like so:

onActive: (event, ctx) => {
        if (isTouched) {
            ...code here
        }
      },

Hope this helps someone even though it's not the cleanest.
This could be cleanly fixed by adding a minDurationMs prop to the PanGestureHandler?

[f-ricci]

Here is a suggested change you can make. This way you avoid a re-rendering.

const isActive = useSharedValue(true);

const longPressEventHandler = useAnimatedGestureHandler<LongPressGestureHandlerGestureEvent>(
    {
      onActive: (_) => {
        isActive.value = true;
      },
      onEnd: (_) => {
        isActive.value = fale;
      },
    },
    []
  );

[theartificialguy]

Hi, I'm trying to achieve a drag and drop on an element that can begin only by performing a long press. My aim is to wait for the long press handler to activate and immediately allow the pan handler to take over.
My approach seems incorrect, I cannot find any API for doing such things. How would I go about implementing such feature? Thanks a lot.

Did you finally achieve it? If so can you please post your answer, I'm still struggling with this!!

[ucheNkadiCode]

OH MY GOD!! Thank you so much, I refactored your code into a PanGesture since its the most common gesture and got rid of some of the callbacks that were not relying on dependent values.

  const isLongPressed = useSharedValue(false);
  const isManualPanGestureActive = useSharedValue(false);
  const touchStartX = useSharedValue(0);
  const touchStartY = useSharedValue(0);
  const prevTranslationX = useSharedValue(0);
  const prevTranslationY = useSharedValue(0);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const coolAnimatedStyle = useAnimatedStyle(() => {
    return {
      // backgroundColor: withSpring(
      //   isLongPressed.value ? "yellow" : appTheme.colors.backgroundColor
      // ),
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
        { scale: withSpring(isLongPressed.value ? 1.04 : 1) },
      ],
      zIndex: isManualPanGestureActive.value ? 3 : 0,
    };
  }, [isLongPressed, translateX, translateY, isManualPanGestureActive]);

  const selectedCardBorderStyle = useAnimatedStyle(() => {
    return {
      borderColor: isLongPressed ? "yellow" : "black",
    };
  }, [isLongPressed]);

  const longPressGesture = Gesture.LongPress()
    .minDuration(500)
    .onStart(() => {
      isLongPressed.value = true;
    });

  const panUpdateCallback = useCallback(
    (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
      "worklet";
      // You basically need to take where you started and add in how you move
      if (isLongPressed.value) {
        isManualPanGestureActive.value = true;
      }

      if (isManualPanGestureActive) {
        translateX.value = touchStartX.value + event.translationX;
        translateY.value = touchStartY.value + event.translationY;
      }
      console.log(`TranslateX is now ${translateX.value}
      TranslateY is now ${translateY.value}`);
      console.log(`isLong pressed equals ${isLongPressed.value}`);
    },
    [
      isLongPressed,
      translateX,
      translateY,
      touchStartX,
      touchStartY,
      prevTranslationX,
      prevTranslationY,
      isManualPanGestureActive,
    ]
  );
  const panGesture = Gesture.Pan()
    .onStart((event) => {
      // We make sure to update the touchStart of X and Y at the beginning of pan gesture.
      // Initially this is (0, 0) in reference to how much we are TRANSFORMING the x and y values of the card.
      // REMEMBER, translateX and translateY are saying how much do you want to transform the relative position of this object as you move it around.
      // It's an animation so it is not bound by the View it's in
      touchStartX.value = translateX.value;
      touchStartY.value = translateY.value;
      console.log(
        `We started a panGesture with contextX ${touchStartX.value} and contextY ${touchStartY.value}`
      );
    })
    .onUpdate(panUpdateCallback)
    .onEnd((event) => {
      // You need to update where you're going to start from next time, this can be done in the end or in the very beginning
      // We update long press at the end of panning because we don't want it to end
      // You also need to put any updates in the withSpring callback because that value isn't immedately set
      // Or in the case that you're setting everyting to 0, just say = 0 on each variable
      isLongPressed.value = false;
      translateX.value = withSpring(0, undefined, () => {
        // touchStartX.value = translateX.value;
      });
      translateY.value = withSpring(0, undefined, () => {
        isManualPanGestureActive.value = false;
        // touchStartY.value = translateY.value;
      });
    });

  const composed = Gesture.Simultaneous(longPressGesture, panGesture);

Ultimately it should be placed in BOLD that only one gesture fires and shuts down the rest UNLESS you use Gesture.Siultaneous()

This actually worked!!! I was looking for 10 hours for a solution like this. I found this to be the cleanest because I am currently using React Native reanimated Swipeable but this allowed me to wrap Swipeable in the GestureDetector and Animated.View. Again thank you so much!

[alex461919]

Here is a working version. The code is pretty dirty.

<ScrollView style={[{ width: '100%', flex: 1, paddingHorizontal: 8 }]}>
            {list.map(item => (
                <Item key={item.key} {...{ item }} />
            ))}
</ScrollView>

const Item: React.FC<{ item: IListIitem }> = ({ item }) => {
    const isLongPressed = useSharedValue(false);
    const isManualPanGestureActive = useSharedValue(false);
    const startPointX = useSharedValue(0);
    const startPointY = useSharedValue(0);
    const prevTranslationX = useSharedValue(0);
    const prevTranslationY = useSharedValue(0);
    const currentTranslationX = useSharedValue(0);
    const currentTranslationY = useSharedValue(0);
    const animatedStyles = useSharedValue<AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>>({
        zIndex: 0,
    });

    const onLongPressStart = useCallback(
        (event: GestureStateChangeEvent<LongPressGestureHandlerEventPayload>) => {
            console.log('longPress start');
            isLongPressed.value = true;
        },
        [isLongPressed],
    );

    const longPressGesture = Gesture.LongPress().minDuration(100).onStart(onLongPressStart);

    const onManualGestureTouchesDown = useCallback(
        (event: GestureTouchEvent, stateManager: GestureStateManagerType) => {
            startPointX.value = event.changedTouches[0].absoluteX;
            startPointY.value = event.changedTouches[0].absoluteY;
            currentTranslationX.value = prevTranslationX.value;
            currentTranslationY.value = prevTranslationY.value;

            animatedStyles.value = {
                transform: [{ translateX: currentTranslationX.value }, { translateY: currentTranslationY.value }],
                //  zIndex: 1,
            };
        },
        [currentTranslationX, currentTranslationY, startPointX, startPointY, prevTranslationX, prevTranslationY, animatedStyles],
    );

    const onManualGestureTouchesUp = useCallback(
        (event: GestureTouchEvent, stateManager: GestureStateManagerType) => {
            isManualPanGestureActive.value = false;
            isLongPressed.value = false;
            prevTranslationX.value = currentTranslationX.value;
            prevTranslationY.value = currentTranslationY.value;
            animatedStyles.value = {
                transform: [{ translateX: currentTranslationX.value }, { translateY: currentTranslationY.value }],
                zIndex: 0,
            };         
        },
        [
            isManualPanGestureActive,
            isLongPressed,
            prevTranslationX,
            currentTranslationX,
            prevTranslationY,
            currentTranslationY,
            animatedStyles,
        ],
    );
    const onManualGestureTouchesMove = useCallback(
        (event: GestureTouchEvent, stateManager: GestureStateManagerType) => {
            if (isLongPressed.value) {
                isManualPanGestureActive.value = true;
            }
            if (isManualPanGestureActive.value) {
                currentTranslationX.value = event.changedTouches[0].absoluteX - startPointX.value + prevTranslationX.value;
                currentTranslationY.value = event.changedTouches[0].absoluteY - startPointY.value + prevTranslationY.value;
                animatedStyles.value = {
                    transform: [{ translateX: currentTranslationX.value }, { translateY: currentTranslationY.value }],
                    zIndex: 1,
                };
            }
        },
        [
            currentTranslationX,
            currentTranslationY,
            isLongPressed,
            isManualPanGestureActive,
            startPointX,
            startPointY,
            prevTranslationX,
            prevTranslationY,
            animatedStyles,
        ],
    );

    const manualGesture = Gesture.Manual()
        .onTouchesMove(onManualGestureTouchesMove)
        .onTouchesUp(onManualGestureTouchesUp)
        .onTouchesDown(onManualGestureTouchesDown);

    const composed = Gesture.Simultaneous(longPressGesture, manualGesture);

    const uah = useAnimatedStyle(() => animatedStyles.value);

    return (
        <GestureDetector gesture={composed}>
            <Animated.View style={[uah]} layout={Layout.duration(1000)}>
                <Box backgroundColor={item.color} m={8} p={8}>
                    <Text>{item.name}</Text>
                </Box>
            </Animated.View>
        </GestureDetector>
    );
};

[ditinex]

Guys,
adding a activeOffsetX={[-10, 10]} to PanGestureHandler works like a charm. I only tested in Android, try your luck with iOS.

My code is not completed/organized yet, I am pasting my code so far, it will get you started.

import React, {useRef, useEffect, useState, useCallback} from 'react';
import {
  ScrollView,
  Text,
  StyleSheet,
  View,
  ImageBackground,
  useWindowDimensions,
} from 'react-native';
import {
  GestureHandlerRootView,
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
  TapGestureHandler,
  LongPressGestureHandler,
  State,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedReaction,
  useAnimatedStyle,
  useAnimatedRef,
  useSharedValue,
  useAnimatedScrollHandler,
  withSpring,
  runOnJS,
  scrollTo,
  cancelAnimation,
} from 'react-native-reanimated';
import {login, google, facebook} from 'src/assets';
import {InputBox, KeyboardHandledView} from 'src/components';
import useStyle from 'src/hooks/useStyle';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Icon1 from 'react-native-vector-icons/Ionicons';
import style from './style';

const listToObject = list => {
  const values = Object.values(list);
  const object = {};

  for (let i = 0; i < values.length; i++) {
    object[values[i].id] = i;
  }

  return object;
};

const DAFT_PUNK = 'Daft Punk';

const ALBUM_COVERS = {
  DISCOVERY:
    'https://upload.wikimedia.org/wikipedia/en/a/ae/Daft_Punk_-_Discovery.jpg',
  HUMAN_AFTER_ALL:
    'https://upload.wikimedia.org/wikipedia/en/0/0d/Humanafterall.jpg',
  HOMEWORK:
    'https://upload.wikimedia.org/wikipedia/en/9/9c/Daftpunk-homework.jpg',
  RANDOM_ACCESS_MEMORIES:
    'https://upload.wikimedia.org/wikipedia/en/a/a7/Random_Access_Memories.jpg',
};

const SONGS = [
  {
    id: 'one-more-time',
    title: 'One More Time',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.DISCOVERY,
  },
  {
    id: 'digital-love',
    title: 'Digital Love',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.DISCOVERY,
  },
  {
    id: 'nightvision',
    title: 'Nightvision',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.DISCOVERY,
  },
  {
    id: 'something-about-us',
    title: 'Something About Us',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.DISCOVERY,
  },
  {
    id: 'veridis-quo',
    title: 'Veridis Quo',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.DISCOVERY,
  },
  {
    id: 'make-love',
    title: 'Make Love',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.HUMAN_AFTER_ALL,
  },
  {
    id: 'television-rules-the-nation',
    title: 'Television Rules the Nation',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.HUMAN_AFTER_ALL,
  },
  {
    id: 'phoenix',
    title: 'Phoenix',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.HOMEWORK,
  },
  {
    id: 'revolution-909',
    title: 'Revolution 909',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.HOMEWORK,
  },
  {
    id: 'around-the-world',
    title: 'Around the World',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.HOMEWORK,
  },
  {
    id: 'within',
    title: 'Within',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.RANDOM_ACCESS_MEMORIES,
  },
  {
    id: 'touch',
    title: 'Touch (feat. Paul Williams)',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.RANDOM_ACCESS_MEMORIES,
  },
  {
    id: 'beyond',
    title: 'Beyond',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.RANDOM_ACCESS_MEMORIES,
  },
  {
    id: 'motherboard',
    title: 'Motherboard',
    artist: DAFT_PUNK,
    cover: ALBUM_COVERS.RANDOM_ACCESS_MEMORIES,
  },
];

const SONG_HEIGHT = 70;
const SCROLL_HEIGHT_THRESHOLD = SONG_HEIGHT;

const tabs = ['#FFF', '#00FF00', '#0000FF'];

const Body = ({_this}) => {
  const [Colors, Styles] = useStyle(style);
  const {width: windowWidth} = useWindowDimensions();

  return (
    <GestureHandlerRootView style={[Styles.flex1]}>
      <ScrollView
        horizontal={true}
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={1}>
        {tabs.map((color, index) => {
          return (
            <View
              style={{
                width: windowWidth,
                height: '100%',
                backgroundColor: color,
                padding: 20,
              }}
              key={index}>
              {index == 0 && <DraggableColumn />}
            </View>
          );
        })}
      </ScrollView>
    </GestureHandlerRootView>
  );
};

const DraggableColumn = () => {
  const positions = useSharedValue(listToObject(SONGS));
  const scrollY = useSharedValue(0);
  const scrollViewRef = useAnimatedRef();

  useAnimatedReaction(
    () => scrollY.value,
    scrolling => scrollTo(scrollViewRef, 0, scrolling, false),
  );

  const handleScroll = useAnimatedScrollHandler(event => {
    scrollY.value = event.contentOffset.y;
  });

  return (
    <Animated.ScrollView
      ref={scrollViewRef}
      onScroll={handleScroll}
      scrollEventThrottle={16}
      showsVerticalScrollIndicator={false}
      style={{
        flex: 1,
        position: 'relative',
        backgroundColor: 'white',
      }}
      contentContainerStyle={{
        height: SONGS.length * SONG_HEIGHT,
      }}>
      {SONGS.map((content, index) => (
        <DraggableItem key={index}>
          <Item content={content} />
        </DraggableItem>
      ))}
    </Animated.ScrollView>
  );
};

const DraggableItem = ({children}) => {
  const panRef = useRef(null);
  const longPressRef = useRef(null);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const isSelected = useSharedValue(false);

  const onLongPressEvent = useAnimatedGestureHandler({
    onActive: () => {
      console.log('LONGPRESS : active');
      isSelected.value = true;
    },
    onFinish: () => {
      console.log('LONGPRESS : finish');
    },
  });

  const onDragEvent = useAnimatedGestureHandler({
    onStart: (_event, ctx) => {
      console.log('DRAG : start');
      ctx.x = translateX.value; // store the current translate value in the context object
      ctx.y = translateY.value;
    },
    onActive: ({translationX, translationY}, ctx) => {
      console.log('DRAG : active');
      if (isSelected.value) {
        translateX.value = ctx.x + translationX; // add the offset on every frame of the animation
        translateY.value = ctx.y + translationY;
      }
    },
    onEnd: ({translationY, translationX, velocityX, velocityY}) => {
      console.log('DRAG : end');
      translateX.value = withSpring(0, {velocity: velocityX});
      translateY.value = withSpring(0, {velocity: velocityY});
    },
    onFinish: () => {
      console.log('DRAG : finish');
      isSelected.value = false;
    },
  });

  const style = useAnimatedStyle(() => ({
    width: '80%',
    height: SONG_HEIGHT,
    padding: 10,
    position: isSelected.value ? 'absolute' : 'relative',
    zIndex: isSelected.value ? 99 : 1,
    transform: [
      {translateX: translateX.value},
      {translateY: translateY.value},
      {scale: isSelected.value ? withSpring(1.2) : withSpring(1)},
    ],
  }));

  return (
    <LongPressGestureHandler
      ref={longPressRef}
      onGestureEvent={onLongPressEvent}
      simultaneousHandlers={panRef}
      minDurationMs={800}>
      <Animated.View>
        <PanGestureHandler
          activeOffsetX={[-10, 10]}
          ref={panRef}
          onGestureEvent={onDragEvent}>
          <Animated.View style={style}>{children}</Animated.View>
        </PanGestureHandler>
      </Animated.View>
    </LongPressGestureHandler>
  );
};

const Item = ({content}) => {
  return (
    <View
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        backgroundColor: '#DDDDDD',
      }}>
      <Text>{content.title}</Text>
    </View>
  );
};

export default Body;

[ucheNkadiCode]

I'm gettin a "Maximum call stack exceeded error on this solution. Any suggestions?

[rameez-ailo]

@ucheNkadiCode replace these two methods and the issue will resolve.

useAnimatedReaction(
    () => scrollY.value,
    (scrolling, previousScrolling) => {
      if (scrolling !== previousScrolling) {
        scrollTo(scrollViewRef, 0, scrolling, false);
      }
    }
  );

  const handleScroll = useAnimatedScrollHandler((event: any) => {
    if (event.contentOffset.y !== scrollY.value) {
      const y = event.contentOffset.y;
      scrollY.value = y < 0 ? 0 : event.contentOffset.y;
    }
  });

[GeorgeHop]

Probably this thread should be also related somehow to this questions #2316 , #2222 , #1667? Because there is also some issues with responder with nested scroll view.