React-Native: A Quick and Brief Tutorial
I was going through my documents and I found this tutorial I made a couple of years ago. I decided to post it here. This post will serve as a quick tutorial to react-native.
Introduction
In this quick introduction to application development with React-native, we go over the fundamental concepts that are the main prerequisites for developing our anxiety project’s application. This includes learning how to install and use react-native, choosing the best IDE for it, how to simulate your application both in the computer and on the phone, how to save and retrieve data, how to read from different sensors, how to create a graphical user interface to interact with the user, etc.
What is React-native?
React-Native: Develop Cross-platform Applications
If you want to develop an application for both iOS and Android at the same time using one code, React is the solution! Check out the official guide available at this link to learn more about what it is and who uses it.
Different Platforms and IDEs — A Review
There are a variety of IDEs and platforms for working with React-Native. However, in my opinion, IDEs such as DecoIDE might not be the best choice for this project unless you are completely familiar with them. The reason is that they do not come with convenient documentation and since working with React is not that straightforward, this might lead to more confusion in the future steps. Nevertheless, learning them is an essential need to keep our options open and switch if they provide a more comfortable solution for a specific situation that we might encounter throughout our way.
In this tutorial, I focus on giving a brief overview of some of the famous ways to create and develop a react-native application for Android and iOS. Note that the instructions brought here are mainly for macOS and can be easily applied to Ubuntu or Windows platforms as well, the only point being that X-Code is not available on other platforms.
Important Installation Tips
First, follow the steps in the video below to install the prerequisites for this tutorial.
XCode and Android Studio
For X-Code, just look it up in the App Store and install the complete version on your computer. Also, for the Android Studio, you can download the latest version from Google.
React-native, nodeJS, and yarn
React-native CLI
You should install 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚌𝚕𝚒react-native-cli too via 𝚗𝚙𝚖 since we need it in adding extensions later on. But there is no specific point about that (you might find all the information you need in the official guide), however, since Expo is very important to us, we go over that in a video below.
Expo
Make sure to check the Expo website if you have any problems installing it. The installation is simply possible by 𝚢𝚊𝚛𝚗yarn or 𝚗𝚙𝚖npm.
DecoIDE
DecoIDE is a famous and free development environment for React-Native which is exclusively available for macOS devices. This IDE is available for download at decoide.org. Below you will find a video published on their website named “DecoIDE in 30 seconds” which quickly demonstrates the capabilities of this IDE. The main thing to note about this IDE is that it performs many actions like installing packages using nodeJS or running simulators automatically, whereas due to different set of circumstances you might be forced to make alterations that require you to know how to work with all the different react-native commands in your command prompt (mainly, the Terminal).
My impression about DecoIDE is that it is easy to work with and terribly difficult to use for debugging, therefore, even though it might be a good option for course projects, it is not my optimal choice for a research project.
Conventional Text Editor
Aside from the IDEs similar to the one discussed above and the editors that are to be discussed below, you can use any text editor that you deem fit, too. Basically all the codes are .𝚓𝚜.js files and you can edit them with any text editor that you like (notepad++, notepadqq, Brackets, etc.).
Nuclide (Atom)
Nuclide is an extension to the famous coding platform “Atom” which makes it roughly the best option for professional react-native application developers. To install that, you can follow the guides in the Nuclide.io website. Also, I have provided an instructional video on installing nuclide which is available below:
Different Modules — How to Implement
Graphical User Interface — an Introduction
As an application developer, the first thing you need to know about the new language you are about to learn is: How can I design a user-friendly graphical UI in it?
In this section, we quickly review this in React-Native so that we know how to start designing and developing the UIs that serve our needs best.
Getting Started with the GUI
In the video below, we will go over the important material necessary to know in order to prepare a Graphical User Interface. We will learn how to add modules like Button, Text, etc. We also learn how to navigate between multiple screens. Knowing these, you know the basics of GUI design in react-native and anything else you feel that you need you can easily pick up by looking them up in google and documentations, as the procedure is similar.
Navigation
A Simple Guide to Modules
Saving Data — an Introduction
In the video below you will learn how to store data both temporarily and permanently, using application “state” and 𝙰𝚜𝚢𝚗𝚌𝚂𝚝𝚘𝚛𝚊𝚐𝚎AsyncStorage class.
Future works — Google’s Firebase
Firebase is a platform that might be very useful for our case. It is useful to learn it, therefore, there are some introductory videos in the references. Note that some of the important services are NOT free, and are not necessary at this point.
Sensor Data — an Introduction
To learn that and see an example of how to do that, check out this link. Note that to simulate this application you have to run it on a real phone since simulators do not come with sensor data.Location Data — an Introduction
Clone and learn the codes in the react-native-background-geolocation repository, these are most probably the best resource for learning how to retrieve location data.
Remark: Expo API is very useful for location monitoring too, however, it is said to be difficult to work in the background.
Further Readings and Resources
[1] The Official Documentation
[2] A nice playlist (tutorial to React-Native)
