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.
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:
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.
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.
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.
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.