Learning React Native by building a Stacker clone
I made React Native game over the weekend. It’s a simple clone of Stacker and you can play it by installing Expo Client on your phone and following this link.
If you don’t want to install the app, you can play the text based browser version here (warning: it’s not pretty). Here is the source.
The goal of the game is to stack boxes on top of each other. Each time you tap the screen the currently moving box stops and another box above it starts moving. Wait until the moving box is on top of the stack and tap the screen. If the boxes don’t align over the top of each other you lose. Get to the top of the screen and you win. Here is a video:
How I built it #
I found an amazing tutorial at http://www.reactnativeexpress.com/. It takes about a day to complete and covers sufficient material to create advanced phone applications. I especially liked the intro section where you actually get a React Native app running on your phone within minutes. And you don’t even need XCode installed!
A very nice feature of the tutorial is the coding sandbox embedded in every lesson. This is provided by Expo Snack which is an insanely powerful web IDE that allows you to build and preview a React Native app using nothing but a modern browser. It also publishes the app straight to your phone and auto-reloads it as you update your code base.
Once I completed the tutorial, I used Expo to create the Stacker clone in React Native (source). Total development time was about 5 hours. The board dimensions and box speed are easily modified by tweaking a few variables.
Future improvements #
The rendering engine redraws the entire board for every frame, however, React Native still provides a smooth experience. I could optimize performance by only re-rendering the moving box. The data structure is a two dimensional array representing the board, however, only five pieces of data are required to implement the data logic:
- the board width
- the board height
- the column index where the boxes are being stacked
- the row index that is currently active
- the column index of the moving box in the active row
It would also be nice to have a score/level indicator and slightly increase the speed each time the player wins. A global high score for the entire world would be a nice addition as well. I’ll probably add these next time I need a refresher.