Hello everyone! In the modern world, people want everything, at once and very quickly: create cool mobile applications in short lines, become a hacker in 2 days, lose 15 kg in one week and other things that actually require a lot of effort. What to do? Fortunately, the guys at Facebook share our desire for a quick result, so they came up with a framework that allows you to create mobile applications for Android and iOS using only one language – JavaScript – and its name is React Native. Therefore, in this article you will learn about what is worth going through to create an application and finally how to run it. Let’s start from the beginning!
What is React Native and how does it work?
You’ve probably noticed certain similarities with the ReactJS library, at least in the name and logo. Therefore, first of all, we should understand what it is. The combination of React Native with the React library allows us to create native mobile applications based on this library. The beauty is that we will develop one application using the JavaScript language, React itself, and subsequently we will not change anything and the application will be available on both platforms. How does it work and how is it achieved? If we look at the sample code that is given on the official React Native web site, then we can see a lot of similarities between web development and between mobile applications that are developed here. That is, in fact, we also use the programming language already known to us, we also import React in order to use JSX in JavaScript and then use the functional component. Here it should be understood that we also have access to hooks, which we will actively use throughout the development, and classes, and any constructs that you can also use in React. There are no restrictions here, and moreover, you can use any features that are in a pure JavaScript. It is important not to forget that when we develop mobile applications for Android and iOS based on React Native technology, we cannot use HTML tags, but we can use components that we import from the library. With the help of these components, we form the entire template and look at the future application. What is the idea? It is clear that the development for both platforms is not very different, but at the same time, due to the fact that we use a common component from React Native, this is a certain abstraction layer that allows us not to think about how it would look for Android or iOS. We use the view component, which is an analogous to the div tag, and use it to form a template. Further, React itself determines that if we are on the Android platform, then we need to use those components that are subject to Android, and the same with the iOS platform. As a result, it turns out that knowing only JavaScript and React, you will be able to develop full-fledged mobile applications for various platforms and at the same time understand only the above-mentioned basics. Let’s take a look at a few features of React Native:
- Declarativeness: Makes it possible to conveniently describe and create components in the form of WHAT we want, not HOW we want.
- Componentness: The ability to create separate independent components with encapsulated state.
- Cross-platform: You write the same code for Android and iOS.
React Native takes our entire application, and when it is launched on Android or iOS on various mobile devices, it simultaneously launches a small virtual machine that allows you to interpret JavaScript and run code that can communicate with native elements right inside operating systems. All a developer needs to do is create an interface and write logic. Ultimately, all the development of a mobile application on React Native boils down to the fact that we will create templates using various components in the library and will write our own logic. In essence, this is all you need to know before you start creating.
You can’t wait to get down to your favorite business – writing code – I understand, and so the lyrics are enough! Let’s code! But later. Everything would be easier if everything was simpler. We need to take some preparatory steps and set up the environment. Here is a list of actions that we need to do:
- Install NodeJS
- Install Expo
- Create application
- Install Android Studio and configure the emulator.
- Install Xcode and configure the emulator (only if you have MacOS)
- Run applications on emulators or directly on your phone.
Expo is a special library that simplifies the development of React Native applications. It is an alternative to building an app using the React Native CLI. The main advantages of Expo are the ready-made implementation of many native components of the phone itself, which allows you to quickly create new applications, as well as an environment that allows you to quickly test the work of the developed application on your smartphone or emulator. To install Expo, run the following command in the console: npm install –global expo-cli.
Developing your React Native App. We can now create our first mobile app using Expo and React Native! All we need to do is execute the command: expo init my-project. In the console, you will be presented with a choice of application generation strategy. Select the item blank. With its help, a JavaScript application with a single screen implementation will be generated. Other options are also possible:
- blank (TypeScript) – the result will be the same as with blank, with the only exception that instead of JavaScript you get a project in TypeScript;
- tabs – an application with multiple screens and using the react-navigation library to switch between them;
- minimal and minimal (TypeScript) – in fact, it will be analogous to creating a project using the React Native CLI with additional libraries from Expo.
After creating the project and downloading all the dependencies, you will see a message that says that the project has been successfully created and you can run it! But before doing this, we need to install mobile phone emulators on the computer so that we can see our application. Let’s do that!
In order to test our application during development, we will need to install phone emulators on a PC. To test the application on Android, the easiest way is to install Android Studio. Everything is simple here, follow the link, download, install and run. Next, you need to install additional components. To do this, go to the settings section and open the following tabs: Preferences -> Appearance & Behavior -> System Settings -> Android SDK. Next, install the required platforms in the SDK Platforms tab. To start, you can install the newest SKD, there should be a check mark next to Android 10.0 (Q). Android Studio will download and install the required components.
An important step if you have MacOS or Linux. If you are working with MacOS or Linux, then you need to take an additional step (if you are using Windows, then you do not need to do this). You need to register the path to the Android SDK in the PATH variable. You can copy this path from Android Studio from the same settings tab from the previous step. To do this, you need to open the .bash_profile file (if it does not exist, then create it in the user root) and write the desired line into it. For example, you can use the command nano .bash_profile. This will open this file in the nano text editor. Next, copy the path to Android SKD and write it to the file as a line: export ANDROID_SDK=/Users/myuser/Library/Android/sdk. If you have MacOS, then in addition you need to add one more line to the .bash_profile file: export PATH = / Users / myuser / Library / Android / sdk / platform-tools: $ PATH. Save your changes with ctrl + o and close nano with ctrl + x.
Now let’s move on to launching the Android emulator. To do this, in Android Studio, open the Tools -> AVD Manager tab. Next, click on the “Create Virtual Device” button and select the desired device. Click Next, select the already downloaded version of Android, then click Next and Finish. As a result, you will have a created emulator that you can launch by clicking the green button in the actions section.
You can install an emulator for iOS on your computer only if you are using MacOS. But, if you have an IPhone, then using Expo you can also launch your application directly on your phone. Below I will explain how to do this. So let’s go to the AppStore and download Xcode. After installation, you just need to open it, go to the Xcode tab -> Open Developer Tool -> Simulator. And wow! Agree, it was easier than setting up Android.
Finally, we come close to launching our application, which we generated using Expo! In order to open the application, it is convenient to use not just a text editor, but some IDE. I offer you two options. Number of times is WebStorm from JetBrains, number two is Visual Studio Code from Microsoft. Personally, I recommend using the second option, since the hint system in WebStorm is not so powerful for React native (at the moment). So, open the installed project and go to the App.js file. This is the main file that will render the application screen. To start, you need to write the command in the console: expo start. As soon as you execute it, you will open a browser with a special local expo page. If you see this, then you did everything right. Now we need to run the previously prepared emulators and only then click the “Run on Android” and / or “Run on iOS” buttons. Expo will download a dedicated application and use it to “deploy” our application to the phone. Hooray! We’ve managed to build and run our first React Native app!
Conclusion
If you read all the characteristics and capabilities that React Native gives us, you might get the impression that you can write an application very quickly and easily. But did we create it quickly? In fact, we set up the environment more than we created the application, but without these steps it will be impossible to effectively create applications in React Native. All these manipulations are performed once, so you will spend the rest of the time developing applications, and with React Native this process will actually be fast. I wish you inspiration in building awesome apps and successful coding! Thanks for reading!
