How to remove dragged view

[ivandortulov]

Description

I downloaded the library and got it up and running pretty quickly.

However, now I have an issue when I drag the view and release it onto a receiver, the view is not removed. It remains visible on the screen. Also, the snapback is not working.

I want the view to always disappear when it is released, i.e. the drag ends. I want the view to snap back into position when it is released somewhere, other than a receiver.

My setup is as follows:

App.tsx

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import SideNavigation from './src/navigation/SideNavigation';
import {DraxProvider} from 'react-native-drax';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const App = () => {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <NavigationContainer>
        <DraxProvider>
          <SideNavigation />
        </DraxProvider>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
};

export default App;

Receiver:

    <DraxView
        receptive
        onReceiveDragDrop={({dragged: {payload}}) => {
          console.log(`received ${payload}`);
        }}>
        <CourtBackgroundImage
          source={
            playing
              ? require('@assets/courtActive.png')
              : require('@assets/court.png')
          }
          style={{opacity: Number(!empty)}}
        />
        <AddCourtButton
          source={require('@assets/addCourtButton.png')}
          style={{opacity: Number(empty)}}
        />
        <PlayersContainer>
          {players.length >= SINGLES_PLAYER_COUNT && (
            <PlayerField>
              <ActivePlayer player={players[0]} textColor={'#fff6d3'} />
              <ActivePlayer player={players[1]} textColor={'#fff6d3'} />
            </PlayerField>
          )}
          {players.length >= DOUBLES_PLAYER_COUNT && (
            <PlayerField>
              <ActivePlayer player={players[2]} textColor={'#fff6d3'} />
              <ActivePlayer player={players[3]} textColor={'#fff6d3'} />
            </PlayerField>
          )}
        </PlayersContainer>
      </DraxView>

Draggable:

<DraxView id={`queue-${queue.id}`} payload={'test'} draggable>
  <QueueExpandBtn source={require('@assets/queue1.png')} />
</DraxView>

Result:

Environment

• React native: 0.72.7
• React native gesture handler: 2.14.0
• Drax version: 0.10.3
• Device: Android Emulator API 31

[LunatiqueCoder]

@ivandortulov There is already an opened issue for this: https://github.com/nuclearpasta/react-native-drax/issues/161

You can try to patch it like in the PR and see if that goes well for you, or you can wait for a newer version (but we currently don't have a deadline, it will take probably a few months).

Another workaround that did the job for us was remounting (not rerendering!) the DraxView with the same props. Indeed, it's ugly, but at least it works...

[ivandortulov]

@LunatiqueCoder Thank you for the answer.

I went with the remount solution and it does work. There is no snapback, but I can live without it.

[LunatiqueCoder]

@ivandortulov happy to help!

[rook218]

@LunatiqueCoder Thanks for the info so far. Is there any update on when this fix might be implemented? I have a very simple use case in my application and wondering if it's worth switching to a different library. Thanks!