React Native is an open-source framework for building native apps with React created by Facebook and released in 2015. It allows you to use native UI controls and to have full access to the native platform provided from the comfort of a JavaScript library. React Native makes it easy to simultaneously develop for both Android and iOS as the code can be shared across platforms.
Plus, this framework combines the user experience of the native platforms with the developer’s knowledge of building with React on the web, supporting the desired approach of “learn once, write everywhere”.
Expo is a framework and a platform for universal React applications. It supplies a set of tools and services that simplify the development and testing of React Native apps, offering/giving the possibility to run the code on your phone easily. Besides that, Expo provides a more robust and developer-friendly workflow.
Setting up the development environment might be different depending on the experience you have with mobile development, but that’s not a problem.
If you are new to mobile app development, the easiest way to get started is with Expo CLI.
If you are already familiar with mobile app development, you may want to use React Native CLI.
We are going to cover the set-up for new mobile developers, because even if you are familiar with mobile development, Expo is a really nice framework to use and easy to learn.
There are two tools that you will need to develop apps with Expo: a local development tool and a mobile client to open your app.
As a local development tool, we use Expo CLI. In addition to the command-line interface (CLI) it also has a web-based graphical user interface (GUI) that pops up in your web browser when you start your project.
You will need Node.js in order to install Expo CLI. After installing Node.js, you can now install Expo CLI by running the following command: npm install -g expo-cli
Now, after you follow all the steps, that we already covered on this blog, all you have to do is run the following command, with a project called for example “MyProject”: expo init MyProject
You must be wondering why you should use React Native. We are going to talk about some advantages when using this framework.
According to Google Trends, as we can see from the chart above, researches related to React Native has been rising, which shows the growing interest and demand for this technology.
Moreover, according to the Stack Overflow 2019 survey, React Native was the 6th most popular framework among developers. Also, the number of questions on Stack Overflow related to React Native has been increasing since its release.
According to our experience, Expo makes things really simple when talking about running and debugging. You can run your app for testing without any effort or check some errors, and even debug your app. This is, for sure, one of the reasons why the Expo's popularity has increased as we can see from the chart below.
After the set-up is completed, if you want to run your app to see how your progress is going, all you have to do is run the following command: npm start. After that, a window pops up in your web browser. You can test it on simulators, both for Android and iOS, but you can also run in your own device, you just need to install the Expo client app and scan the QR code you see in the terminal or in Expo Dev Tools. Note that Expo is not only a framework but also a platform where you can find a lot of useful documentation, tutorials, examples from the community, and even become a contributor on GitHub.
You may be wondering if it is possible to continue your project without using Expo on it. Yes, it is. If you are having a bad experience developing your app using Explo CLI, you can easily leave it and move for a React Native bare project.
What is this about the React Native bare project? Simply, your project will include the folders/directories related to the operating systems (iOS and Android) thus allowing you to create your own native builds. So, for example, if you know that you will eventually need to include your own native code in the project, you can eject expo running the command npm run eject on the console.
When we think about the process of building a mobile app, we can think of it as a complex process. For this reason, Expo tries to simplify and speed up the whole process. In the official documentation, they explain in detail all the steps you must follow and even give you the opportunity to auto-generate the keystore and credentials needed for the application.
The keystore allows you to store cryptographic keys in a container to make it more difficult to extract from the device. Once keys are in the keystore, they can be used for cryptographic operations with the key material remaining non-exportable. Moreover, it offers facilities to restrict when and how keys can be used, such as restricting keys to be used only in certain cryptographic modes. So, you don’t need to worry about all these details, since Expo automates the process of signing your app for iOS and Android.
We had our first contact with these frameworks as soon as we started our internship at Imaginary Cloud. Here we started working with React Native and Expo as part of developing a mobile application for an internal project.
In the beginning, it was tough to understand how to work with these technologies as we were just starting. It was a new world for us. However, the documentation available, as well as the help of our colleagues, were very important aspects in the development of this project. It is completely normal if there are any doubts or questions regarding these frameworks at an early stage. During the development, these doubts are dissipated to give place to knowledge and experience. The use of some React Native libraries as well as some pre-built components, not only saved us some time, but also made it easier for us to do the work.
In spite of React Native helping us reuse code for Android and iOS, there were certain details that we had to take into account due to the differences between OS. For example, the line-height property of some fonts, couldn’t be the same for both platforms, or else users would notice different styles from the iOS app and Android app.
One of the most challenging problems we faced was how to load fonts in our app. We tried a lot of different tutorials, we searched a lot, and we lost some time trying to use a custom font, but the final result was worth the effort.
Another of the difficulties came from the use of pre-built components. React Native is sensitive to packages and their versions, and it is necessary to bear in mind that some things work in React Native but are not yet supported by Expo, so it is necessary to look for other solutions.
For instance, we used a pre-built picker select but its latest version was not compatible with Expo, more precisely on Android, so we needed to downgrade it. Not everything is easy. Sometimes you have to find another way to reach your goals. Nevertheless, as you probably noticed, React Native and Expo can simplify a lot of things and help you save some time.
Overall, our journey working on this project was very positive. As it was our first experience/time working with React Native and Expo, we felt some difficulties in the beginning but as we started to know more about these technologies, it became easier and natural.
We learned that it is possible to easily run an application on our own device and to see the changes on the code almost immediately, which ended up justifying the comfort we felt when using React Native with Expo. In addition, the variety of APIs they offer helped us to reach further on our goals. For instance, Expo-Notifications was useful to us, providing essential features in the scope of notifications.
To conclude, our knowledge increased and it was a very enriching project on how to develop a mobile application, using these frameworks. We realized its advantages and allowed us to reach our initial goals.
At Imaginary Cloud we work not only with React Native, but with a wide tech stack. If you need help building a scalable mobile app, we are waiting for you! Drop us a line here!
Found this article useful? You might like these ones too!
Web Developer. Passionate about series and music. Football enthusiast. A dreamer who hopes to someday mark the world with something he has developed.
People who read this post, also found these interesting:
.png)
