Not Dragging On Android Modals

[jvincent-dev]

Describe the bug Dragging to reorder doesn't work on Android when in a Modal component.

To Reproduce https://snack.expo.io/@teamlocasaur/draggableflatlist-bug

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• Platform: Android
• React Native or Expo version: Expo 38 (40 on Snack)
• Reanimated version: 1.9.0 (~1.13.0 on Snack)
• React Native Gesture Handler version: 1.6.1 (~1.8.0 on Snack)

Additional context It works on regular views on Android, but not on Modals. No issues on iOS.

[computerjazz]

this is a react-native-gesture-handler issue -- can you try this solution and see if it works? https://github.com/software-mansion/react-native-gesture-handler/issues/139#issuecomment-790329701 if so i'll likely include it in the package itself

[jvincent-dev]

Hello, thank you for the response.

It did not work for me. Here's the updated snack. I've also tried it on my nexus tablet and it still doesn't seem to work.

[huurray]

same isssue. only android problem

[huurray]

https://github.com/software-mansion/react-native-gesture-handler/issues/139#issuecomment-760244006 this comment helped me

[jvincent-dev]

adding coverScreen={false} to the modal component doesn't seem to do anything either.

[tommeier]

same for us, downgrading to v2.3.3 works once more

[adamsolomon1986]

this worked for me: from react-native-gesture-handler:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

 <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
.....your draggable list here
</GestureHandlerRootView>

[jvincent-dev]

Hello, thank you for the response.

It did not work for me. Here's the updated snack. I've also tried it on my nexus tablet and it still doesn't seem to work.

I've tried the GestureHandlerRootView on an Expo Snack ^ and I'm not sure why it's not working. Are you using Expo @adamsolomon1986?

I've also tried downgrading to v2.3.3, no luck either.

[adamsolomon1986]

Hello, thank you for the response. It did not work for me. Here's the updated snack. I've also tried it on my nexus tablet and it still doesn't seem to work.

I've tried the GestureHandlerRootView on an Expo Snack ^ and I'm not sure why it's not working. Are you using Expo @adamsolomon1986?

I've also tried downgrading to v2.3.3, no luck either.

I'm using bare workflow

[jvincent-dev]

I see, so applying GestureHandlerRootView to Expo bare workflow works, but not on managed. Maybe it has to do with the compatible Expo versions of rn-gesture-handler and rn-reanimated for the managed workflow?

[joseviniciusnunes]

this is a react-native-gesture-handler issue -- can you try this solution and see if it works? software-mansion/react-native-gesture-handler#139 (comment) if so i'll likely include it in the package itself

does not work when used in conjunction with react-navigation, I don't know why

If you create Modal at the root of the project without using react-navigation, gestures work normally

[srivastavapooja]

Facing same issue. draggable flautist is not working in android inside a modal.

[findersen]

Faced the same problem, doesn't work in modal window. Still no solution?

[Isaacmeedinaa]

Is there any current solution for this?

[BenjaminGolba]

this is a react-native-gesture-handler issue -- can you try this solution and see if it works? software-mansion/react-native-gesture-handler#139 (comment) if so i'll likely include it in the package itself

This solution worked for me. Got a standalone (from react-navigation) modal. Thanks!

[marcosrdz]

this worked for me: from react-native-gesture-handler:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

 <GestureHandlerRootView style={{width:'100%', height:'100%'}}>
.....your draggable list here
</GestureHandlerRootView>

This worked for me

[AndreyBuvria]

Encountered the problem a while ago and as said above it is react-native-gesture-handler issue.

So solution to the problem I found in react-native-gesture-handler documentation and all you need is to wrap the content of <Modal> in gestureHandlerRootHOC function.

const Component = gestureHandlerRootHOC(() => {
    return (
      ...
   );
 });

 return (
     <Modal>
       <Component />
     </Modal>
 );

https://docs.swmansion.com/react-native-gesture-handler/docs/1.x/#usage-with-modals-on-android