While making mobile games is cool, it’s not the easiest thing to get started doing. Even just a few years ago, if you wanted to write a mobile app or game you had to

1. decide which phone operating system you wanted to code for: iOS or Android
2. download the development tools for the operating system you’re coding for, which you have to pay for in iOS
3. code your game in the appropriate language for the OS: Objective-C for iOS and Java for Android
4. deploy it in the appropriate app store

A lot has changed recently and now it’s a lot easier to write mobile applications. Not only are there more languages to choose from for mobile development, Swift for iOS and Kotlin for Android, but now there’s a way to code your apps for both major systems at once: React Native.

React Native is an adaptation of a very popular framework for building websites called React. The basic idea of programming with React is that you can structure your application as a bunch of components that generate, or render, HTML. Using an extension of JavaScript called JSX you can even make your React code look like HTML like this

<div>
 <div class="row">
   <Square class="square" value={buttonVal1} onClick={() => choiceMade(1)}/>
   <Square class="square" value={buttonVal2} onClick={() => choiceMade(2)}/>
 </div>
 
 <p>{playerName}, which will you choose?</p>
</div>

Even without seeing what other code is around this, you might be able to picture what it does: it offers the player, by name, two choices and runs an event handler depending on which choice is made. This shows a mixture of normal HTML elements with user defined components like <Square>, pretty seamlessly integrated. Actual JavaScript code is contained within curly braces.

The use of JSX to mix in HTML-like syntax with the use of more advanced JavaScript features is probably the most recognizable aspect of sites made with React, but the deeper motivation for React as a framework is to be able to write efficient code. It allows the programmer to write individual components that seem very simple, and then under the hood there’s sophisticated code running to only change the display of the web page when absolutely necessary, and to keep components linked by state synced up with each other seamlessly.

React Native, on the other hand, is similar to React but for coding mobile applications. Instead of JavaScript controlling HTML, it becomes JavaScript controlling the “native” user interface components of the mobile operating system. Every mobile OS has code built into it for displaying text or buttons, for handling touch on the screen, or changing the orientation of the phone. All of that code is what people mean by the “native” UI, and that’s what React Native can control with JavaScript.

Now, React Native may be one of the more convenient ways to write mobile apps for different kinds of devices, but it doesn’t have the simplest setup process in the world: not hard, but not trivial either. The easiest way to get started quickly with React Native is to use a combination of two web services: repl.it (https://repl.it) and Expo (https://expo.io). Using these in tandem, you can write your code in the browser with repl.it and then use Expo’s service to load that code to any mobile device that has the Expo app installed.

So, you’ll need to install Expo on your mobile device. It has both an iOS and an Android app. On my phone, Expo looks like

There’ll be a list of default & previously loaded programs beneath the QR code scanner. Now you’re set up for the next part.

If you go to repl.it and make an account, you can choose to make an app in the React Native framework. You’ll see something on the right hand side of the screen like:

and that’s the QR code you’re going to scan with Expo in order to connect your phone and the repl.it code. After scanning the QR code, all you need to do is click “run” whenever you want to update the application on your phone!

At this point, if you’re already familiar with React and React Native you probably will want to read more about Expo specifically. Expo provides its own extensions on top of React Native to help you use the phone’s hardware like the camera or the accelerometer, graphics with OpenGL and SVG, and even connecting to Facebook.

If all of this is new, you should probably start with the official React Native tutorial as well as the React Native tutorial written by repl.it. If you’re mostly used to plain JavaScript you should also learn a bit about the newer features of JavaScript that React uses: https://babeljs.io/learn-es2015/.
If you want to write games with repl.it + Expo there are a few examples I’ve written at the end of this article that are meant to be tutorials on React Native. There’s also a flappy bird clone tutorial from Expo themselves.

And on the subject of games, while there is a game engine for React & React Native, linked below, you can’t use that with this way of loading to your phone through repl.it. If you want to write games with repl.it & Expo you’ll have to rely on the standard React Native and Expo components. You can absolutely do cool things this way, but you’ll need to write your own physics and collision detection code as well as all the other things you might be used to from a game engine like Unity.

Learn More

Simple randomly generated puzzle game

https://repl.it/IpEH/latest

Small example showing of SVG with React Native

https://repl.it/IpM6/latest

OpenGL in React Native

https://repl.it/IpMv/latest

A cute user report of how/when to use React Native for games

https://medium.com/@miguelhaba/my-first-game-with-react-native-40a83aa91274

React Native homepage

https://facebook.github.io/react-native/

Official tutorial

https://facebook.github.io/react-native/docs/tutorial.html

repl.it

https://repl.it/

repl.it React Native tutorial

https://repl.it/community/classrooms/17650

Expo

https://expo.io

Expo documentation

https://docs.expo.io/versions/v17.0.0/index.html

Flappy Bird Clone with Expo

https://docs.expo.io/versions/v17.0.0/tutorials/create-floatyplane-game.html

Game engine for React

https://github.com/FormidableLabs/react-game-kit