Native App – iOS, Android, and Web

[chrisheninger]

I've spent the past couple of months rebuilding the app using React Native... this issue will serve as a placeholder for merging the two codebases together (the native code is currently private).

[julienroulle]

Any update on the react native side? I've been using your project to teach me boardgame.io and i plan to use react-native to create a boardgame based on drag and drop, but i'm stuck since react-dnd is not supported in native .. I'd be glad if maybe we could join forces on this, or at least share your advancement with me :)

[chrisheninger]

Hey @julienroulle– I've got a separate repo that's still private with everything I've done for Native. Most of the game logic stayed the same– but there was a big rewrite of the UI and how I handle dropping the card and tracking where it lands.

I had taken a big break from working on it but just happened to pull it up last weekend and get everything running again– I'll be sure to notify you when I've got it in a place to share. :)

[julienroulle]

how I handle dropping the card and tracking where it lands.

Hey @chrisheninger , This would interest me so much right now as I am trying to do the same. Would you mind sharing your files please? Would be such a huge leap forward for me not to reinvent the wheel ;)

Looking forward for your response, Julien

[chrisheninger]

I'll do what I can to open source all the code soon so you can pull it and try it locally– but I copied the main three files with functions related to drag and drop into a Gist for now.

https://gist.github.com/chrisheninger/f9208ca5f88c3ca3d851ccae536728f8

A quick overview:

• The first component is the main "Matchimals" component– one of the things it does it set up the onCardDrop method which will measure the viewport, determine which cell is closest to where you dropped, and check for whether it's a valid move or not
• The second component is the main "Table" component– we set up pan responders on the entire viewport and track as the user drags the screen/table around. This allows us to accurately determine which cell we are dropping the card onto in the method above
• The third component is the "Card" component itself– it also uses a pan responder to allow the card to be dragged all over the viewport– and when it's dropped it calls the same method from above to see if the drop location was valid and if so, removes the card from the deck and places it on the board.

That's not everything but I hope it's enough to point you in the right direction. It's definitely a bit messy but I was able to get it to work and was happy with the results– I've got a separate branch where I'm experimenting with pinch+zoom along with the pan gesture but it's not in a good enough state to share. 😅

[julienroulle]

Man this looks very promising! Thank you so much for sharing this with me, I'll be sure to share the result with you once I include it in my personal project 👍

[chrisheninger]

You inspired me to get the native app finished so I can post it to the App Store. Thank you! 😄

Here's a little demo video: https://youtu.be/bk5F-ibFFQo

The app is in review now– once it's been approved by Apple and put on the store (it's being released for free) I'll make the code public. 🙂

[chrisheninger]

@julienroulle Just released all the react-native code to this repo. :)

App is available on iOS: https://itunes.apple.com/app/id1348821168 Android: https://play.google.com/store/apps/details?id=com.matchimals

Happy to chat through any of it if you have questions– I'm gonna be rewriting it a bit down the road so I can add pinch-zoom but I think the core bits will remain the same.