How I built a super-simple game using React-Native

Today I released a simple React-Native game on the App Store with the aim of providing some tips on how to handle small React-Native projects like this one. The game is, of course, completely open-source, you can find the repository on and in the . GitHub App Store Protip: You can find this same Medium article in the and on . They might be easier on the eyes given the fact that there's some code ahead. GitHub's README.md my personal website Tap The Number! is a simple React-Native game where you have to tap the tiles that appear on the screen in a specific order. Even if developing this game didn’t take too much time (I should have put in it ~20 hours I guess) it has been a fun ride and I’d like to share some tips and some info on the complexities I found during its development. The stack and the dependencies React-Native Tap The Number is built entirely with , which has been an obvious choice for me given the fact that I love React/React-Native and I use it on a daily basis at my current workplace. React-Native comes with , a test framework that shines when coupled with React.Related dependencies: React-Native Jest State management: MobX I started this project using for handling the state management, but after a while I noticed that, being a simple project, it was slowing me down, so I seized the opportunity and implemented . , but this time I tried using its and à la Redux, and I really liked it!Related dependencies: Redux MobX This is not the first time I used MobX provider inject Static type checking: Flowtype is a static type checker. I’ve been using it for a while now and it saved me A LOT of time. I can’t praise it enough. Flowtype I strongly suggest you to give it a try, or better still stick with it for some days for seeing its real benefits. Related dependencies: Linting: ESlint and Prettier I wasted way too much time in the past tweaking my ESlint configuration.Now I’m super happy with and with , which takes care of all the code styling of my application.Related dependencies: a minimal ESlint config Prettier Importing from absolute path: babel-plugin-module-resolver I use for importing files from the path. Related dependencies: babel-plugin-module-resolver src Playing audio files: react-native-sound If you need to play an audio file in a React-Native application you must use some kind of external library at the moment because it is not (yet) implement in React-Native out of the box.To me is the most complete library at the moment and it worked fine on this application. react-native-sound P.S.: I’m pulling the library directly from its Github Master branch because the latest version available on NPM does not support React-Native 0.40 yet. Related dependencies: Simple animations: react-native-animatable For simple animations is the de-facto standard on React-Native.Related dependencies: react-native-animatable Project structure Enough with the dependencies! Let's see the project structure: The project structure I used may seem over-engineered at first, but this setup paid off almost instantly (continue below). A bit of history I started working on this game with a totally different idea in my mind: I wanted to play a bit with , and you’ll see that at some point I even implemented an when tapping Tile.Unfortunately I had to drop the idea because React-Native suffers from small lags when you run multiple animations (in my case when tapping on tiles rapidly), but it seems that something is changing thanks to . React-Native ART if you take a closer look at the commit history animation similar to the Twitter’s heart one Native Driver At the time, I had already created the game engine and some components, so, instead of throwing away the project, I decided to turn it into this game. Interesting stuff Config files are your friends I tried to gather all the variables that describe the app behaviour in the directory. The for example exposes all the application dimensions: config config/metrics.js This setup, coupled with hot-reloading, came in super handy even for a simple game like this, because I’ve been able to concentrate most of the variables I needed to change in a single directory. Relative dimensions React-Native is not a game-development framework and one of the things you’ll miss a lot, if you’ll ever try to build a game with it, is a proper way to handle the camera/viewport.Tap The Number is a simple game though, so using relative dimensions is more than enough for its use case.Using relative dimensions means that instead of defining the dimensions of the views using the logical pixel units (which is the default unit of React-Native) you should define the dimensions relative to the device size (or to their parents).Following this approach will make your game resize automatically on bigger/smaller devices (even on tablets!) but it also has many drawbacks in my opinion: The more the app grows, the more dimensions you’ll have to define and keep track of; Handling screen rotation might become difficult (Tap The Game works only in portrait mode) ; If you’re using some native components you’ll might not be able to resize them ; Speaking about dimensions, In Tap The Number I did something that I’m bit ashamed of: I tied the game engine to the device size, as you can see in of : getRandomTilePosition utils/boardUtils.js When the app initializes the game board the above function searches for available tiles positions using a while-loop. I’m aware that this function , and that it can break if the device has a weird width / height ratio, but considering that: can be optimized in many different ways I’m targeting only iOS (>= iPhone 5); The maximum number of tiles on the board is 6; The tile size is 28% of the device width; …I decided to opt for this solution for the sake of simplicity (and for keeping the code readable, but feel free to correct me if it seems too unreasonable). One last thing: keep in mind that the React-Native component does not scale the text based on the device size.This is one of the reasons I always use a custom wrapper over the built-in component, so that I can change its default behaviour/font/color easily.To get the scaled font size you should do the following: MobX (and src/utils) tips Let’s be honest here: I love Redux and I use it daily, but for simple applications like this, MobX is more then enough. In fact, if you’re not interested in middlewares or in having a centralized pattern for dispatching actions, in my opinion MobX might be a better choice than Redux. One thing I just recently started using with MobX is the + combo, which provides a nice abstraction on connecting components to the store (in a similar way to the Redux's ). provider inject mapStateToProps Another thing I’ve found really useful has been using abusing the and folders: from my experience the MobX actions tend to get cluttered, so I prefer to keep them easy to read by minimizing the verbosity of the code. Talking about my utils functions... I'm a bit sad because they are not super pure -- they use the files internally -- but if your application is bigger than mine I'd advise you to make them accepts those configs as parameters to make them testable. src/utils src/services src/config P.S.: use values whenever possible if you need to compute an observable value (just like Redux's selectors). @computed Animations, part 1: The animations library I used In Tap The Number I animated the components in three different ways: React-Native-Animatable is a wrapper of React-Native Animated API which exposes many simple animations and allows you to use them both programmatically and in a declarative way, embracing React's philosophy. If you don't need complex animations, interpolations or timings, is a solid choice. react-native-animatable react-native-animatable React-Native Animated API I used the Animated API for the TimeBar animation in : I wanted to achieve an effect that required some manual tweaking, and the Animated API is the most flexible one of the lot. Specifically, I wanted to animate the TimeBar width and the TimeBar color from grey to red. src/containers/Playground/TimeBar LayoutAnimation is a powerful way to animate the transitions between layout changes without the need to specify the animation behaviour. You just call or before calling and React-Native will animate the component that has been subjected to a layout change. You can see an example of it in , where I animated the tile depth by calling just before . The drawback of LayoutAnimation is, as you may have already guessed, that it provides much less control than the other animation alternatives. React-Native LayoutAnimation LayoutAnimation.spring() one of the other available configurations setState src/components/Tile.js LayoutAnimation.spring() this.setState({ isTouched: true }); Otherwise you’ll have to keep track of the animations state in your component’s state (e.g: which adds a nice amount of unneeded complexity to your component's lifecycle. this.setState({ isContainerFadingOut: true }) Animations, part 2: React and animations I’ll go straight to the point here: In my opinion animations don’t get along nicely with React (and React-Native), and they never will. I know that it might be a controversial opinion, but having tried many different libraries both on React-Native (and on React, for example React-Motion), I still think that animations move against the declarative React pattern. Don’t get me wrong here, you can still achieve a clean code while using small animations, but when you’ll start linking animations one after another you’ll end up doing it programmatically: Otherwise you’ll have to keep track of the animations state in your component’s state (e.g: which adds a nice amount of unneeded complexity to your component’s lifecycle. this.setState({ isContainerFadingOut: true }) …And last opinion: I don’t think that the clashing of the imperative nature of animations with the React's "declarativeness" can be solved easily (I’ll be super happy to be proved wrong though): after all, animating hard. IS Android support I was planning to release this game on too at first, but I had some issue that I’ve not been able to solve easily. The most annoying one was my inability to use custom fonts on Android: I tried linking the assets folder using (which works perfectly on iOS) and adding the fonts manually, but it seems that , while other works perfectly even when using the first method.The other issue I faced was a sluggish responsiveness in the animations (specifically when using LayoutAnimation), but I guess that I could have easily fixed them by investigating the issue a bit more. Android react-native link some fonts don't link correctly at all Thanks to… I’m not a creative guy at all: every single thing I used in this application is just a re-iteration of stuff I had already seen before.So, without further ado, here are all the sources I can think of that I used to build this simple game: for the iOS assets; Asset Catalog Creator that I’ve found on Images (sorry, I don’t know who the author is); The game background image Google for the sound effects; freesound.org that inspired the design of the tiles; This Slack image Mostaza, the startup where I work, for all the support (and for the App Store account too!) All the libraries I already linked and talked about in this post; Forks, comments and critics are warmly welcomed, I just hope that this app example might be helpful to someone sooner or later!