What is React Native and how does it work?
- 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.
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.
- 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!
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!