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?
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.
Through the following links, you can try/watch the result of this project
What is React Native?
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.
What is Expo?
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.
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:
node –v // check node version
npm -v // check the node package manager version
Since we have npm installed now, we can use it for the Expo package, so let’s type in the console the following command:
npm i -g expo-cli //this will install expo globally
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
expo init RockPaperScissors
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.
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
npm start // pick one
yarn start // pick one
expo start // pick one
After the project loading, you should be able to see a page like this:
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:
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:
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.
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.
In your builds section on the expo.io website you can now see, download and try your new Android App!
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.
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.
/// webpack.config.js, focus on the interesting part...env,
// Passing true will enable the default Workbox + Expo SW configuration.
offline: true, // Here!
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:
npx serve web-build
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.
Host the PWA on Netlify
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.
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.
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.
Installing the PWA App
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.