Dev Diary – Hangman in React Native – Part 2

This is the second part of my dev diary building hangman in React Native.

In part one I looked at the “competition” and created a simple prototype . It was more of a still image with what I was roughly aiming for, but that’s ok. In this part, I’m going show the progress I’ve made so far, the new things I’ve learned and what’s next.

Sign-Up To Get the Code

As with all of my games, I release the source code. It’s yours to do with whatever you like.

Want to re-skin the app and publish it in the app store feel free. I’d love to hear how you use my stuff.

Only those who sign-up to my Game Development mailing list will get the code.



* indicates required

Progress So Far

I have so far concentrated on getting the layout and game functional. It’s not pretty, but the player can:

  • Start a new game
  • See how many lives they have left
  • Guess letters
  • Lose the game
  • Win the game
  • Start a new game

See for yourself:

Hangman Functional Animated Gif

Hangman Functional Animated Gif

What’s more, all these features work in both the Android version (above) and the web version. Try the HTML 5 version of Hangman for yourself.

New Techniques

Flexbox

React Native uses flexbox so I had no choice to use that for my last app, but I’d not used it much for a web app. Rather than worry about older browsers, I just went for it this time.

Most of the styles from the React Native app ported straight across. For others, it was a simple case of swapping “justify-content” for “align-items” and adding a “display: flex”.

Massive credit goes to Dave Geddes for creating Flexbox Zombies Story Course. If you want to learn flexbox, I cannot recommend it enough.

NavigationExperimental

The top level component in my last react native app ended up with a big “if…else if….else if….” block at the top. It worked, but wasn’t particularly flexible. I also couldn’t get the android back button to work.

After some research, it sounded like I needed to use Navigator. As that’s been deprecated, I switched to NavigationExperimental.

I got up to speed thanks to Linton Ye’s post http://www.reactnativediary.com/2016/06/23/navigation-examples-1.html.

What’s Next?

I have a few minor things to add like hints and categories, but the main thing is making it look better.

I’d like to avoid just switching images, but at the moment I don’t know how. Watch this space!

Let me know your thoughts

I’d love to hear what you think about it so far. Please leave any comments or questions below.

No comments yet, your thoughts are welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *