Expo is a platform with a set of tools and services built around React Native and its ecosystem that help us develop, build, and quickly deploy IOS and Android apps.
It allows us to have a shortcut into the native setups, handling the binaries and letting you with the JavaScript code. Expo also helps us test the mobile application in IOS devices, as I will discuss later in this article.
As we mentioned above, we used Expo to filter the main common issues from React Native.
If you already worked with React Native before or if you're about to build your next mobile app using this library, you're likely to find a few issues. Here are the top 5 ones we encountered and how we solved them:
In the first phase of our app, everything was running smoothly, as we were just testing everything on IOS (we didn't have plans to run the app on Android devices). In the second phase, we were told that an Android version was also needed. While we rested our minds assure, as the tool we chose could make that happen, problems started to appear.
The first run on the Android Emulator did't work as we expected. As we were going through the debug (which was very hard to do due to the lack of debug support), the Android Emulator broke and didn't show the error message. We figured out a way to capture the error message by recording the screen. This led us to discover that the change of the style that was made dynamically to handle the animation of the elements in the Login screen, doesn't work on Android the same way it works in IOS. Android does not support flex transformations. We were changing columns to rows, so we had to change our approach to be able to have this animation working properly on IOS and Android.
Before using Expo, the best way of handling errors was the one well known by the JavaScript ecosystem: to delete the node_modules and rebuild all over again, including the natives code. Fortunately, with Expo, we didn't need to handle all IOS and Android native builds that React Native requires. We just needed to run expo build:android or expo build:ios to have the app up and running as we expected.
When you're writing code in a cross-platform tool, you can assume that the app would behave the same way in both platforms. While this shows as true for most of the cases, we discovered some main characteristics in our development that were tricky to address. For example, the box-shadow and some libraries, like will mention in the next section, don't work as expected on Android devices.
If your app requires deep native functionality, most of the time, your team will need to work with native code, as shown by Airbnb in their article.
One of the biggest challenges faced while building this mobile application was how to manage the image assets. We decided to use the SVG format with one of the most used libraries, react-native-svg. Since the app had a lot of complex draws, we used SVG to avoid losing quality. Turned out that the library to handle SVG was not working on Android the same way that it works on IOS. In some cases, it didn't work at all with some images not showing after the build. We had to look for a solution which we found in the documentation: it was needed to distribute the images as static resources and use the native way of handling images. That means choosing the right one by the screen density.
During the mobile app development, we also had to deal with box-shadow handling. While IOS behaved normally, (with one web page having several ways of styling the box-shadow) Android had just one prop. It's called elevation and has just one control over the depth of the shadow. Again, another adjustment on the components to be able to emulate the box-shadow effect. Here we used some transparent PNG to emulate the box-shadow transparency on our screens.
To be honest, deploying and testing mobile applications are not React Native issues per si. The challenge to have an app running in a client's mobile device before the official deployment into the platform, is well known. At our development flow, we have chosen Expo for its simplicity, in order to ease process. Our stakeholders set an emulator on their machines (within the only prerequisite of being a MacOs device) and after the development sprint of the application, they could test the app. To have the app working on their devices, we had to run expo build:ios -t 'simulator' --release-channel staging (which generated one .ipa file ready to be installed into the device emulator) and expo build:android -t 'simulator' --release-channel staging, an .apk file that could also be installed on an emulator or on an actual device, since Android is more flexible about applications being installed on their system.
Expo comes as a great help when we need to build mobile applications, as it allows to streamline React Native complexities. Despite its cons, it eases the flow of making mobile applications, improving the testing process.
The real challenges start to appear when your mobile app starts to grow and its functionalities become more complex. Although you may find some issues as the ones we've mentioned above, React Native is a great framework. In fact, it shows as one of the biggest cross-platform frameworks with a great ecosystem of libraries, tools, and of course, a giant behind it: Facebook.
By combining it with Expo, we can ship delightful mobile applications to our customers, with a small team, in record time. All the errors found while creating this React Native mobile app could be solved with the necessary debug time and community help.
Javascript developer since 2016, I've built mobile apps using Ionic and React Native. Guitar player and cooking lover.
People who read this post, also found these interesting:
.png)
