Deploy a Rock Paper Scissors Mobile App Easily with React-Native and Expo

It’s time to build your first React-Native app and have fun learning about this technology… Ready?

Consuelo Sanna
Mar 8 · 9 min read
Rock Paper Scissor — React Native + Expo Tutorial

This React Native tutorial is aimed at introducing React Native and give some basics knowledge about what it is and how to create a simple app and deploy it.

There are no pre-requisites for this tutorial, but you mind find it easier to follow it if you already know a bit about React and JavaScript. I will try to summarize some basic concepts about the technology that will be used in this tutorial, if you are already familiar with that feel free to skip to the juicier part of the article :)

Through the following links, you can try/watch the result of this project

web : https://consuelo-sanna-rps.netlify.app/
code : https://github.com/consuelo-sanna/React-native-RPSGame
app : https://expo.io/@consuelosanna/projects/RPSGame

React Native is a cross-platform development library built on top of React by Facebook, for mobile development platforms. It ensures almost instant compatibility with iOS, Android systems and also Universal Windows Platform. The code used by this framework is not platform-specific, which means you need to code only once and the open architecture will ensure the code can run on multiple platforms.

Expo is a framework and a platform for universal React applications. It’s a set of tools that help you develop, build and deploy React-native applications. With the managed workflow you only write JavaScript / TypeScript and Expo tools and services take care of everything else for you, if you are familiar with React it is like Create React App.

Environment Setup

There are different approaches to start a react-native application, I will follow the easiest which is by using Expo. Let’s install NodeJS and Expo.

NodeJS
To install NodeJS go to this website, download the right version, and install it following the instructions. Once you have done that you can check typing in the console:

Expo
Since we have npm installed now, we can use it for the Expo package, so let’s type in the console the following command:

All right, the environment is now ready to start developing, I will also suggest in this section to create the following accounts that we will use later to deploy our app, here is the list:

  • Expo: this will allow us to load the build and distribute it
  • Github: here we can store the code and automatically link it to our deployment server
  • Netlify: thanks to this platform we can deploy one web version of our app.

Create a New React Native App

This command initiates our project called RockPaperScissors. After typing this command we can now see several template options, in this tutorial we will use the “blank” one from the managed workflow as shown in the picture below.

Choose a Template Terminal View

As the command says this will create our new project with dependencies and a structured tree folder. We can now install it by typing:

Expo Note: You may see several peerDependencies warnings when installing the dependencies for a new project. These are caused by some external packages having overly strict or unnecessary dependencies, and it's a work in progress to clean them up. They won't cause any harm to your project.

Start the project

In the package.json file, it’s possible to see that there are available a few scripts that will allow starting the project and some exploration. You can choose between different commands, Expo will handle your favorite one. After entering the right directory you can finally start your project

After the project loading, you should be able to see a page like this:

Expo Metro Bundler

From this page we can choose where to run the application, there are several options but for the beginning, I will suggest using the web browser but it is a personal choice.

Through the QR code, if scanned it will open the app directly on your device ( you would need the Expo Go app installed ! ). As long as your server is running, you can view the app on Expo Go on your mobile device and see the changes being made dynamically.

You can also choose “iOS Simulator” or “Android device/emulator”; for those options, you will need to install XCode for iOS and Android Studio for Android.

Create the Landing Screen

The default message says ‘ Open up App.js to start working on your app’, so let’s open the App.js file and write some code. Since this is a tutorial on React-Native I will put the code mainly in this file, obviously feel free to refactor it once you have grasped the basic concept. App.js will look like this:

There are a few different components, their main functions are the following

  • View: it can be seen as a classic div, it has to wrap what you want to be rendered
  • Text: you can’t just put the text without wrapping in it
  • StyleSheet: in iOS or Android there is no CSS, so with this we can change the style of our components.

This is App.js after some changes:

Now you should see something like the following picture in the display:

Landing Screen View

Refactor and Images

We could now keep going with our project, but before the next step, I suggest re-organizing it a little bit. Start creating a src folder and inside of it a components folder and at the same level the folder images and inside the folder signs. The folder structure is the following:

Project folder structure

Inside assets you can change the icon and splash image of your application.
You can choose the image that you like the most for this project, inside my git you can find the one that I used if you want.

Create Playing Screen

The playing screen is the core of our app and logic, inside src/components let’s create the file PlayScreen.js, with the following code inside:

This is a little bit more complicated than the previous one. There is now a state and a useEffect that depends on that state; inside the useEffect the countdown happens, while the button triggers the countdown.
The randomImg function randomly chooses an image from the emojis array while the bgColors change the background for an easy but nice visual effect.

Combine the Two Screen Pages

In the project we now have two independent pages, we need to combine those to finish our app. To do so, let’s work on the App.js file.

The variable isPlay contains a boolean state that indicates when the user press “Play” and the PlayScreen needs to be rendered.. that’s all!

Build the APK

We are now ready to build the APK, thanks to Expo there is nothing to worry about, in the terminal we have to type one command according to the desired platform.

After putting this command in the terminal we will choose the APK option because this is a tutorial, if you want to publish the app you’ll need an app-bundle.

For the name there are precise rules, to make it simple you have to avoid namespace conflicts, you can find all about it here.
It will now ask you how you want your APK to be identified; there are precise rules for the name and you should choose one that will avoid clashing with other namespaces, it is usually recommended to use reverse domain name notation. For study purposes, a good idea is to use your name and then the app name… for example, I used sanna.consuelo.RPSGame.

Generate new keystore option

For the keystore let’s follow the suggestion and choose to generate a new keystore. It will take a little bit, as Expo said in the terminal you can close it and watch the build directing on the expo.io website. If sadly the process does not correctly build the APK, you might need to install Java.. link here!

Ok, once it is finished you should see something like the following image.

Succesfully Build Android APK

In your builds section on the expo.io website you can now see, download and try your new Android App!

expo.io build section

Since I also want my app to be installable in the browser, I can decide to create a Progressive Web App (PWA). Before running the known command expo build, it is necessary to modify the Webpack config file. This file is currently handled by Expo, to being able to see and work on it we need to eject the file by typing in the console:

This command will allow us to choose which file to eject, remember to use space to select the right option; in our case, we have to select the webpack.config.js file.

Eject Expo Options

Now it is possible to enter the webpack.config.js file and change the option offline to true, save and we are good to go.

Ok, we are now ready to build the PWA, the command is:

With the npm serve package we can already see the build working by doing:

If you don’t have it don’t worry, as told at the beginning of this article we will now proceed to serve this app through Netlify. The first thing to do is to push our project into a repo inside of GitHub; I won’t explain how to do that, but you can follow the official documentation here.

Once you login into your Netlify account, you can drag and drop the web-build of the project inside the sites tab and your site will be live!

You can directly go into the next section if you chose the “drag and drop” option!

Another option is by pressing the green button saying “New site from Git” and then press the “GitHub” option in the Continuous Deployment section.

Continuous Deployment: GitHub option

In the second tab you should see all of your GitHub repositories, if you don’t it might mean that you need to allow Netlify by granting it the necessary permits. It is possible to just give the permit to some repositories, it is entirely up to you.
Once you have completed this configuration, select the correct repository.

In the last step it is possible to choose which branch will Netlify keep watching for some code changes to automatically update the site version; since it is possible to choose even the folder, I suggest selecting the web-build directory.

Basic Building Setting and Publish Directory

As soon as you are satisfied with the settings, pressing the “Deploy site” button will start the deploy and in a few minutes it will be live and you will see the URL. Don’t worry about the name, we can easily change it by going into the site settings.

Download and install PWA button

In the address bar there is now a button, click on it to download the PWA on your PC.

For installing the PWA on mobile devices you just need to go to the same Netlify page with your favorite browser, open up the settings, and Tap “Add to home screen”.

React Native is a really interesting technology and I had a lot of fun doing this project, I really hope you did too!
It is also possible to create apps for Windows and macOS, which means that with one code you can run it pretty much everywhere.
You are now ready to conquer the world with your app, the only limit is your fantasy, I hope you feel now comfortable enough to start your own project, feel free to share it in the comment section below.

This article was inspired by this course.

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Consuelo Sanna

Written by

I am an Italian Software Engineer passionate about technologies and new challenges. I still have a lot to learn and I’ll try to share experiences and solutions

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Consuelo Sanna

Written by

I am an Italian Software Engineer passionate about technologies and new challenges. I still have a lot to learn and I’ll try to share experiences and solutions

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store