5 common errors in a React Native app when using Expo
Building a mobile application became easier for web developers since the majority of the knowledge used in the React.js library could be reused to React Native.
Here at Imaginary Cloud, we use React Native for the ability to share code between web and mobile and to have IOS and Android apps in just one codebase. This gives us time to work on things that really matter, like the final digital product's quality.
One of our projects uses Expo as a tool to handle some of the React Native complexities like: library errors (the package not being installed correctly), app registry (forgetting to configure the app name after creating them) and some server errors (that can be addressed by restarting the server). Despite being a great help, Expo doesn't solve all the problems that building a mobile app with a cross-platform library leaves us.
In this article, I will list 5 errors that we as developers faced, while creating a mobile app in React Native (using Expo) and how we solved them. But first, I'll briefly introduce you to this tool: Expo.
What is EXPO
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.
Why is EXPO useful?
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.
5 common errors found while creating a React Native mobile app
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:
1. Error message
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.
2. Platform differences
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.
3. Images
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.
4. Shadows
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.
5. Deploy and testing
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.