In Tangocode, our stack of technologies includes React as the main language to work and we have had a successful implementation in different projects and now it was time to try React-Native for a production-ready app, generating applications for iOS and Android. In this blog, we will share our experience and a comparison between a regular react-native project and an Expo project.
In short, we have developed two apps in React-Native, the first one is a regular react-native app that is currently available in the AppStore and Google Play and the goal for this app is to allow some users to map places in a specific region. The second app is about showing some statistics with some animations and this one was developed using Expo. It’s important to clarify we are not suggesting any of both platforms, we only want to share our experience.
First, we will define the architecture, in this case, we used Azure functions with API Manager for the services and SQL Server as the database. Also, we are using some significant libraries like:
Certainly, we will need to configure our local environment to start coding, in this case, it’s necessary to install Android SDK, XCode, Java, we can follow these steps in the official React-Native page: https://reactnative.dev/docs/environment-setup.
Then, it’s easy to start a new project, we only had to execute the command “npx react-native init AwesomeProject”, considering we have experience using ReactJS, it becomes very simple since it supports many technologies we used before like Context API, Redux, Custom Components, Hooks, Styled Components, Typescript and more.
The main difference between ReactJS and React-Native are the tags, while in the first case we use div, span, and input, in the second case we need to use View, Text, and InputText, etc. Also, it’s great to know that everything is FlexGrid so in this way our components will adapt better to any screen size.
Next, we have installed some libraries to navigate between screens in the application, in this case, we use react-navigation which allows you to have Tabs, Drawer Menu, Stacks, or Bars.
This library was very simple to set up and use, everything was configured in the main app.tsx file and it affects the entire application, also we need to mention that it was simple to customize the menu with our own images, buttons, texts, position, etc. In this case, we only use it to show user information and logout.
Moreover, we use tabs that allow us to move between screens and perform actions. It’s also very customizable as you can see and it supports icons from material design.
Another significant library is Redux, which is very useful to manage data across the application because it’s a common issue to lose the state or not be updated when you move to another screen, in this case, Redux helps to store the whole state tree in a unique place which can be accessed from everywhere and can be changed when dispatching an action on it.
In our application it was implemented very well, it’s exactly the same library we use in ReactJS and we can store user information or the data we collect from Mappers (offline).
To be able to publish the application we are using two important libraries, we are talking about App Center and Code Push.
AppCenter library it’s very useful to build the application and manage different environments, in our case we have development, quality assurance, staging, and production environments. Thus, we don’t care about generating the APK or IPA for every deployment. Also, AppCenter allows us to share this application with different users, so they send e-mail notification when it’s a new build. In addition, AppCenter will monitor the use and we can check some statistics in the Dashboard.
Subsequently, we have another great library called CodePush which allows us to send some deployments and it will update the apps without generating a new build. It can be considered a hotfix on the air. However, it’s not useful if we add native libraries to the project, in that case, we will need to generate a new build, so consider this option only when we are talking about javascript changes.
Finally, the last feature of React-Native that I’m going to talk about is using animations. In short, we used the
library and the
component from React-Native.
The results are amazing, we created two custom components to simulate a progress circle graph and a speedometer graph using the SVG library.
For the animations, we had to use the Animated object, and selecting the timing function we can start an animation from one value to another in a specific time.
As you can see in the example below, it takes 2000 milliseconds from 0 value to an N value.
This is a platform that works with React-Native and has many tools to make the development much easier and quicker.
In this way, we tried and we had a great experience. First, you can start coding without installing anything, the Expo platform has an online tool that you can access in the URL: https://snack.expo.io/. This online feature can be used without subscriptions and you can create screens, components, and then download the entire code to continue working in your local environment. Indeed, we tried and we tested first on the web because this tool offers a web view and also can be tested in devices, in our case we tested in an Android using the Expo client app and scanning the QR code was enough to get the application running in the device.
Also, in the local environment, it’s not necessary to have installed Android SDK or XCode, the only thing that you need is to install the Expo CLI:
It supports many important libraries like Redux, StyledComponents and has their own libraries too for many functions like:
Which makes it very simple to use without many configurations. Another important Expo feature is that you can build your application using their Expo cloud, so you don’t need XCode or Android SDK and after use this command you will get an URL to download the compiled file, it can be APK or IPA.
In contrast, one important disadvantage is that Expo doesn’t support native libraries for Android or iOS but in this case, it’s possible to eject to a common react-native project, also it’s important to mention that it is not reversible.
In summary, these are some advantages and disadvantages of using Expo in our project.
Pros
Cons
React-Native works well, look smooth and it’s very powerful, there are two options to quickstart, using the ReactNative CLI and the Expo CLI. In the first one we will need to prepare the local environment and that can take a little more time, however, it’s recommended if you need to integrate with some native libraries.
On the other hand, we have Expo which is very simple to use and it can be a good option if you don’t require native libraries or if you don’t need too much performance in your application. It could also be said that both accomplish the expectative to develop multi-platform apps and definitely will be considered for future projects.
Ⓒ 2022 TangoCode
