could you please take a look at this @jakub-gonet ? thanks ❤️

I'm working on minDistFromEdge here: https://github.com/software-mansion/react-native-gesture-handler/pull/1310

Description

This PR implements a new feature for the PanGestureHandler:

• minDistFromEdge: A prop that specifies how far away from the view's edges the touch has to be so the gesture handler activates.

Test plan

• I've used the prop and verified that it doesn't activate if I start within 20px from the right edge, otherwise it activates:

  <PanGestureHandler minDistFromEdge={{ top: 0, left: 0, bottom: 0, right: 20 }} />
  

• I've removed the prop and verified that no side effects were introduced

Description

We're developing an app which has a similar layout as Snapchat: A horizontal tab view which contains 5 views where the user can swipe between to switch views.

Notice how there is a map on the first (left) screen. Since the map also has a pan gesture handler, we have overlapping gesture handlers. (Horizontal swipe gesture for navigating screens).

Snapchat solves this quite elegantly, by only allowing a horizontal swipe gesture if the user started the gesture from the right screen edge, everything else is a map pan gesture, which we're also trying to achieve.

Unfortunately, this is currently not possible, since the map (react-native-maps or mapbox-gl) uses native UIPanGestureRecognizers and we have no way of interacting with those handlers using the RNGH API - meaning it is unpredictable which gesture handler picks up the gesture.

https://user-images.githubusercontent.com/15199031/105031667-ea075080-5a55-11eb-9ff5-b87a3d3d29f0.mov

I've given this some thought on how we could possibly implement this feature, and came up with the following solutions (ordered from best to worst imo):

1. Create a maxDistFromEdge property for <PanGestureHandler>s, which only activates the handler if the user started the gesture from within {maxDistFromEdge}px the view bounds. So if we set said property to 20, the <PanGestureHandler> only activates if the user started the gesture from within 20px or less of the view's (screen's) left, top, right or bottom bounds. Ideally we want this to be an object, so you can for example specify:

   <PanGestureHandler
     maxDistFromEdge={{ left: 0, top: 0, right: 20, bottom: 0 }} />
   

2. Edit the map view native module to give the native UIPanGestureRecognizer a margin-right of 20px so it doesn't trigger if the user starts the gesture from within 20px of the right screen border, and then we somehow create a ref and pass that to the horizontal swipe gesture <PanGestureHandler>'s waitFor prop. (not very flexible)
3. Edit the map view native module to give the native UIPanGestureRecognizer a margin-right of 20px, and edit our horizontal swiper setup to give the <PanGestureHandler> a margin left of SCREEN_WIDTH - 20, so they don't visually overlap (bad and ugly idea)

For solution 1 (my fav), this answer on stackoverflow shows how easy this would be implemented on iOS.

I'd love to hear some opinions here, cc @jakub-gonet @kmagiera @osdnk . If you have better and simpler ideas, I'd love to hear 'em. If not, I could start implementing the maxDistFromEdge property on iOS, but I'll need some help for the android side.

Any news about this issue?

@jakub-gonet maybe not directly related to the issue, but I'm having problems with using a <PanGestureHandler> over a map.

The idea is to provide the Snapchat look and feel, where you have horizontal views in which you can swipe between. One of the views is a map, which obviously also has a pan gesture handler to enable panning on the map.

Now I'm trying to define an "area of activation", aka I want the horizontal view <PanGesturerHandler> to only activate if it has been started from the edge of the screen, otherwise ignore the gesture and let the map's pan gesture handler handle it.

Is this possible with RNGH, or do I have to tweak the native map gesture handlers?

Actually, managed to get the Jest issue working myself. Pretty straight-forward. Just include the following line in your jest setup (or in the offending file)

import 'react-native-gesture-handler/jestSetup';

@pke did you ever manage to solve the issue? Running into it as well

Why import it 2 times?

Description

When registering rnn components that are wrapped in providers, the third param needs to provide the concrete component. See https://wix.github.io/react-native-navigation/api/component#registercomponent

proposing changes such as X axis to X-axis with a dash as its a more commonly used way to represent the concept. multi touch -> multi-touch for the same reason as well as other small grammatical changes

setting coverSreen={false} on modal works. But need my modal cover the screen

Don't use enabled, instead edit your onGesture/onHandlerStateChange to do (or not) your logic. And put back simultaneousHandlers={scrollRef} so the scrollview can work too. I have some minor perf issue with my solution that involve a state but I will try to publish something when this is sorted out. I was shocked to not be able to find such a trivial problem: sortable list inside a scrollview that can be sorted with just tiny handle (very common thing on sortable list)...

@MoOx I see, how d you set the state and have the PanGestureHandler activate without the user "lifting" the finger? I tried with the below, the problem is that the state correctly flips to true and activates the PanGestureHandler but only after I "lift" my finger and basically stop the LongPressGestureHandler.

Snippet (note the enabled on PanGestureHandler and the onGestureEvent state flipping active to true):

        <PanGestureHandler
          ref={panRef}
          enabled={active}
          waitFor={longPressRef}
          onHandlerStateChange={({ nativeEvent }) =>
            console.log("PANGESTURE ", nativeEvent.state)
          }
          {...{ onGestureEvent }}
        >
          <Animated.View>
            <LongPressGestureHandler
              ref={longPressRef}
              minDurationMs={1000}
              maxDist={10}
              onGestureEvent={() => setActive(true)}
              onHandlerStateChange={({ nativeEvent }) => {
                console.log("LONG PRESS", nativeEvent.state);
                console.log("LONG PRESS, PAN GESTURE SHOULD NOW ACTIVATE");
              }}
            >

Same kind of problem here. Not sure if that's related to a LongPress nested into a Pan, but I have to listen for BEGIN on Android and ACTIVE for iOS to have something similar on both platform...

Actually I said something wrong: in my case I don't use waitFor on the Pan, because I just cannot (I have multiple LongPress and I don't know the one I should for until you press it... so I use a state to say "go for it" that I use in my onGestureHandler before doing my stuff.

@MoOx hmm, damn it just doesn't work for me. Once LongPressGestureHandler activates, then the PanGestureHandler deactivates and stops working. Somehow the PanGestureHandler also activates before LongPressGestureHandler (i.e. ignores waitFor). It is so weird...

This is the code I am using now, replicating what you just detailed out.

import React from "react";
import { View, Image } from "react-native";
import {
  PanGestureHandler,
  LongPressGestureHandler,
  ScrollView,
} from "react-native-gesture-handler";

import Animated, {
  useAnimatedStyle,
  useAnimatedGestureHandler,
  useSharedValue,
} from "react-native-reanimated";

export default function App() {
  const imageSize = 50;

  const scrollRef = React.useRef(null);
  const longPressRef = React.useRef(null);
  const panRef = React.useRef(null);

  const y = useSharedValue(0);
  const x = useSharedValue(0);
  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      ctx.offsetX = x.value;
    },
    onActive: (event, ctx) => {
      y.value = event.translationY;
      x.value = event.translationX + ctx.offsetX;
    },
  });

  const style = useAnimatedStyle(() => ({
    position: "absolute",
    top: 0,
    left: 0,
    width: imageSize,
    height: imageSize,
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <View
      style={{
        flex: 1,
        paddingTop: 100,
        height: 300,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <ScrollView
        ref={scrollRef}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        style={{ positon: "relative", height: imageSize, borderWidth: 1 }}
        contentContainerStyle={{ width: imageSize * 3 }}
      >
        <PanGestureHandler
          ref={panRef}
          simultaneousHandlers={scrollRef}
          waitFor={longPressRef}
          onHandlerStateChange={({ nativeEvent }) =>
            console.log("PANGESTURE ", nativeEvent.state)
          }
          {...{ onGestureEvent }}
        >
          <Animated.View>
            <LongPressGestureHandler
              ref={longPressRef}
              minDurationMs={0}
              simultaneousHandlers={panRef}
              onHandlerStateChange={({ nativeEvent }) => {
                console.log("LONG PRESS", nativeEvent.state);
                console.log("LONG PRESS, PAN GESTURE SHOULD NOW ACTIVATE");
              }}
            >
              <Animated.View
                style={[
                  {
                    position: "absolute",
                    top: 0,
                    left: 0,
                  },
                  style,
                ]}
              >
                <Image
                  source={require("./assets/example.jpg")}
                  style={{ width: imageSize, height: imageSize }}
                />
              </Animated.View>
            </LongPressGestureHandler>
          </Animated.View>
        </PanGestureHandler>
      </ScrollView>
    </View>
  );
}

Same here. I tried multiple times, and few of the times it worked. Is it the same with you that randomly it works?

Ok if I am correct here is what I got working:

• ScrollView should have a ref, passed to PanGestureHandler via simultaneousHandlers
• PanGestureHandler should have a ref, passed to LongPressGestureHandler via simultaneousHandlers
• LongPressGestureHandler should have a ref, passed to PanGestureHandler via waitFor
• (For faster feedback look during development, you can use minDurationMs={0}

Try this patch 0b0fabc It hasn't been released yet.

hmm, no difference for me. i applied it and restarted with expo start -c to clear cache...

This was added in WIP commit, will be fixed 😄

Try this patch https://github.com/software-mansion/react-native-gesture-handler/commit/0b0fabc96da1d585a740da6476123ecd74a22fec It hasn't been released yet.

That's exactly what I'm trying to do, I don't need the Scrollview to be active while dragging. Only when they have not activated / are in use...

I'm confused what I'm doing wrong, I tried nesting them in the reverse order too and all sort of combination of waitFor but can't get it to work.

Sent from ProtonMail mobile

-------- Original Message -------- On 13 Jan 2021, 17:45, Max Thirouin wrote:

I can't say I have a thing totally working because my setup is a bit more complex but I have a working PanGestureHandler (a list) with multiple nested LongPressGestureHandler (manual handles to star dragging) - but in my situation, I can't have the ScrollView to be usable when you are trying to scroll from the PanGestureHandler are. I tried various waitFor/simultaneousHandlers but I don't have a fully working example yet.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

I can't say I have a thing totally working because my setup is a bit more complex but I have a working PanGestureHandler (a list) with multiple nested LongPressGestureHandler (manual handles to star dragging) - but in my situation, I can't have the ScrollView to be usable when you are trying to scroll from the PanGestureHandler are. I tried various waitFor/simultaneousHandlers but I don't have a fully working example yet.

@MoOx thanks for the reply and having a look! Did you get it to work?

I tried with your edits in my local test environment (as mentioned in the bug report, steps to reproduce), and it still does not work with useRef instead of createRef.

First thing I see: you need to use useRef (hook, for function) instead of createRef (imperative, for class).

Not sure if that syntax will be enough. Maybe if statement is necessary

Maybe you can call it only when there is need to do so.

    this.pressOutTimeout && clearTimeout(this.pressOutTimeout);

If it seems not useful for you maybe we should delete it? If someone will spot there's something missing, git history for that file is up for exploration. For others, I think it might be just noise. Let me know what you think