Not working in mobile

[riocallos]

Cannot drag puzzle pieces

[shankie-codes]

I'm not a contributor on this project, but I've done a hack of this to get it working on mobile. Basically, the react-dnd component that it uses has two backends: the one that this project uses (html5) and one that supports touch.

I've forked this project and then, on component mount, detect whether the user is using a touch device and then load the appropriate backend.

It's a bit of a faff – but could be integrated into this project with a small amount of work.

[fBruzja]

@shankie-san Could you please explain how have you managed that in a bit more detail? I am trying to do that in react-native, but to no avail...

[shankie-codes]

Sure @fBruzja . I'm a bit short on time so can't explain in detail, but what I've done here https://github.com/shankie-san/hollys-face/blob/master/src/components/Puzzle.js might be of use to you (sorry about this repo – it's a quick-and-dirty personal project).

Maybe with React Native you'll need to configure react-dnd with an appropriate backend for RN?

I guess the solution for this project would be the option to override the DND backend with one that you provide yourself...

[fBruzja]

@shankie-san I think this is enough to get me started on. Thank you, much appreciated!

[shankie-codes]

You're very welcome.

…

On Thu, 23 Apr 2020 at 10:28, Franc Bruzja ***@***.***> wrote: @shankie-san <https://github.com/shankie-san> I think this is enough to get me started on. Thank you, much appreciated! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAT45XWXOOFNWGMQSJ7T64DROAC5VANCNFSM4IVQSHIQ> .

-- Andrew Shankie +44 (0)7843616844 Proper Design 1 Fox Lane, Cardiff, CF24 1JN +44 (0) 292000 4234

[kunaltyagi9]

Hi @fBruzja, Have you resolved this?

[kunaltyagi9]

@fBruzja @shankie-codes I did this as per the latest update of the libraries, but I am not able to drag puzzle pieces on mobile

<DndProvider backend={TouchBackend}>
      <Puzzle
        image="https://upload.wikimedia.org/wikipedia/en/6/68/John_Coltrane_-_Blue_Train.jpg"
        onDone={() => alert("Wow!")}
        level={3}
      />
</DndProvider>