react-native-modalize
react-native-modalize copied to clipboard
Drag behaviour is different when in a <Portal>
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
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);
+ }
+ };
+ }
}
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!
Adding RNGestureHandlerEnabledRootView
into MainActivity also solved my issue. 🙏
special thanks @fmedinac