Drag behaviour is different when in a <Portal>

[IPWright83]

Describe the bug Within a <Portal> it is not possible to drag the modal to dismiss. This is different to the behaviour if not within a <Portal>

Reproduce I've tried to produce a demo, but <Portal> doesn't appear to be working correctly on here properly. But at least it shows the code: https://snack.expo.io/jdceQJOmJ

Working (no <Portal>):

Broken (with <Portal>):

Dependencies:

• react-native-modalize: 2.0.8
• react-native 0.64.0
• react-native-gesture-handler 1.10.3
• @react-navigation/bottom-tabs: 5.11.10

[fmedinac]

I had the same issue. After some digging, I found out that I was missing to finalize react-native-gesture-handler installation for Android.

// MainActivity.java

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

[marcosabb]

I had the same issue. After some digging, I found out that I was missing to finalize react-native-gesture-handler installation for Android.

// MainActivity.java

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

It worked like a charm, thanks!

[andac-ozcan]

Adding RNGestureHandlerEnabledRootView into MainActivity also solved my issue. 🙏

[pqminh]

special thanks @fmedinac