From Development

How to accelerate your development with React Native and Expo

If you are here, you may be wondering “How can React Native and Expo help me building my next mobile application faster?”.

As interns at Imaginary Cloud, we were proposed to develop an application that was somehow useful for the situation that the world currently faces, the Coronavirus pandemic. Due to this situation, we have to adopt new proceedings about how we manage common areas in the company. Since we now have limitations in how many people can be in the same room according to its size, we need to reduce the spread of the virus by grouping people who share the same work area.

Also, it is our intention for this application, to raise awareness by showing some warning messages, and to track the availability of a room without visiting it.

As a result of these constraints, our goal was to solve this problem by developing an app using these React Native and Expo. We were not familiar with any of these, as you might not be, so don’t worry, with some reading and practice you’ll understand how they work and why they are a good choice when it comes to mobile app development. That’s why we think it’s important to share our journey and some lessons learned from our experience.

This post might help you ramp-up your next project, and we hope this may enlighten your next steps and what advantages it brings. In this blog post, we are going to talk about these two frameworks, how they are related and why this might save you some time, even if you are not familiar with mobile development. But let's start with the very basics of these technologies.

What is React Native?

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”.

What is Expo?

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.

How to install React Native?

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.

How to install Expo?

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.

Expo installation

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

Advantages of using React Native

You must be wondering why you should use React Native. We are going to talk about some advantages when using this framework.

  1. Code Reusability: with React Native you will be able to develop cross-platform code, without the need of building one app for each platform. Most of the written code in React Native can be reused for both OS (Android and iOS).
  2. Pre-built components: Even though this framework is new/young, you can find already built components that you can use in your mobile application. React UI frameworks like Material UI provide you pre-built components for faster and simpler development that can be adjusted to your needs.
  3. Real-time feedback: Fetching real-time data and generating updated UI when something changes on the code is one of the greatest React Native’s features. When you are building your app, you need to view your code changes and you have two options. Live Reload is useful when you need to reload the entire app when a file changes (for example, to test routes/navigation). Besides that, Hot Reload can be helpful when you just want to refresh the files that were changed without losing the state of the app.
  4. Performance: React Native performance is almost as good as native performance. The fact that the programming language is optimized for mobile devices and the use of two separate threads (one for native APIs and the other one for the UI) makes it possible to run React Native apps efficiently.
  5. Popularity: Although React Native is a newcomer for building cross-platform mobile apps, it already has significant popularity being used by the largest companies. Just to have an idea, the GitHub community of React Native is already much bigger, in the number of contributors than Swift for example.

React Native's interest over time (Google Trends)

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.

'react-native' tag on Stack Overflow 2019 survey

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.

Is Expo easy to learn?

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.

Expo's interest over time (Google Trends)

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.

What if you want to get rid of Expo?

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.

Expo Build

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.

Building an app with React Native and Expo

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.

  1. Our experience

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.

  1. Difficulties

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.

  1. Final thought?

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!

At Imaginary Cloud, we simplify complex systems, delivering interfaces that users love. If you’ve enjoyed this article, you will certainly enjoy our newsletter, which may be subscribed below. Take this chance to also check our latest work and, if there is any project that you think we can help with, feel free to reach us. We look forward to hearing from you!