react-dnd: Touch backend not working

Hi -

The documentation does not address this but is the touch backend supposed to simply add touch based dragging or it excludes the regular dragging (in which case is there an all in one backend?..)? I ask because I had setup a basic card for dragging which was working fine on the HTML5 Backend but when I switched to the TouchBackend it stopped working.

  const [{isDragging}, drag, preview] = useDrag({
    item: {
      type: ItemTypes.CARD,
    },
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    })
  })

// structure of how I laid out the draggable component.
<div ref={preview}>
  <div ref={drag}>
  // some svg icon as handler
  </div>
</div>

Any help is appreciated. Thanks.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 3
Comments: 15 (1 by maintainers)

Most upvoted comments

I have the same issue - preview not showing up while using TouchBackend

VladislavRUS on Aug 9, 2020

Ah that seems to have done it! Although now the preview when I drag is not working. Is

        collect: (monitor) => ({
            isDragging: monitor.isDragging(),            
        }),

Not supported or called something else?

nerdogram on Jul 20, 2020

did you add options like this? <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>

TheHaff on Jul 20, 2020

@tommasini I had similar problem. If you use conditon of var in props it does not work. I swited condition for component and worked for me.

Before

<DndProvider backend={isMobile ? TouchBackend : HTML5Backend} ...>

After

{!isMobile && <DndProvider backend={HTML5Backend}>...</DndProvider>}
{isMobile && <DndProvider backend={TouchBackend}>...</DndProvider>}

petrleocompel on Apr 6, 2021

Hello, TouchBackend is not working. I’m importing like the documentations tells.

And i’m passing the provider enabling the mouse events.

I try to call also the onTouchStart, onTouchMove and onTouchEnd in the draggable item and nothing happens. Im using google chrome to simulate the mobile device, but tried later with my device and didn’t work as well but I think It would never work with my device because I dont have acces to the third party libraries.

I really need an answer, thank you people!

I appreciate help or another solution!

Stay safe ❤️

tommasini on Jan 29, 2021

I would recommend you @william-hotmart to disable SSR on certain component. That might fix your issue. Or you can make Wrapper around DndProvider with SSR partial disable. “Partial SSR disable” i mean on SSR return plain div on client on Rerender decide if it’s HTML5Backend or TouchBackend and initialize DnD provider.

Right now I am not sure if there wont be some problem with missing DnD context. I’m trying to make some workaround in SSR. I will try to provide my workaround solution in few days.

The problem might be this function getGlobalContext.

What I have right now in mind is something like this example - so it might remount DnDProvider in browser because of the key.

export const CustomDndProvider = ({children}) => {
    if (isSSR()) {
         // Default SSR fallback !! might need different "manager" for overriding "context" which might cause our problem !!
         return <DndProvider key="ssr-fallback" backend={HTML5Backend}>{children}</DndProvider>
    }
    if (isMobile()) {
         return <DndProvider key="TOUCH" backend={TouchBackend}>{children}</DndProvider>
    }
    return <DndProvider key="HTML5" backend={HTML5Backend}>{children}</DndProvider>
}

petrleocompel on Apr 21, 2021

@kdfriedman sadly yours did not work for me. I’m using SSR (nextjs).

Reason why i ended up with

{!isMobile && <DndProvider backend={HTML5Backend}>...</DndProvider>}
{isMobile && <DndProvider backend={TouchBackend}>...</DndProvider>}

petrleocompel on Apr 8, 2021