Cant drag component on modal

[hak11]

how to make component dragable on modal.

drag components work perfectly in screen, but when I put a component in the modal, it makes it non-dragged

package.json

{
     ...,
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "expo": "~39.0.2",
    "react-native-drax": "^0.7.2",
   ....
}

import {
    View, Modal
} from 'react-native'

<Modal
 animationType="slide"
 transparent={false}
 visible={true}
>
<DraxProvider>
  <DraxScrollView>
      <DraxView ...... />
      <DraxView ...... />
      <DraxView ...... />
      <DraxView ...... />
  </DraxScrollView>
</DraxProvider>
</Modal>

[lafiosca]

Could you try wrapping the DraxProvider around the outside of the Modal instead of nesting under it?

[hak11]

still can't @lafiosca , this is snack link if you want see or try it https://snack.expo.io/@joe-pasartrainer/drag-&-drop

[lafiosca]

Thank you, I’ll try to take a look when I’m able. I haven’t used the built-in Modal component in a long time, so I’m not sure how exactly it works or why it would interfere.

[hak11]

thank you @lafiosca

[ayratkin]

same problem. react-native-drax doesnt work in native modal component((( @lafiosca

[LunatiqueCoder]

We'll take a look at it, but if you want to hurry up the process, a reproduction example would be great. You can start from here: https://snack.expo.dev/@lunatiquecoder/expo-drax-example

Add a <Modal />, reproduce the issue, and definitely you'll get the help you want faster!

EDIT: sorry, I just saw there is a reproduction provided. Taking a look at it sometime this week.

[LunatiqueCoder]

I just did a few simple checks on https://snack.expo.dev/@lunatiquecoder/expo-drax-example. If you put the<DraxProvider /> outside the modal, it seems to be displaying the dragged/released hover views BEHIND the modal children. This can be observed by using transparent={true} prop on the <Modal /> component:

🎥 VIDEO

https://github.com/nuclearpasta/react-native-drax/assets/55203625/a94ab335-95da-4e8f-b325-58acabf744b5

❌ Other NOT WORKING examples:


---

However, if you nest everything under the <Modal />, it seems to work:

✅ WORKING examples:

I believe this can be fixed/improved in the next major version. Will be looking deeper into it as we advance and come back with more information or updates.