5 common errors found in a react native app(using expo)

5 common errors  found in  a  react  native app(using  expo)
Techiio-author
Written by Nilima PaulNovember 30, 2021
11 min read
React js
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Nilima Paul

Technology Security Analyst

In this blogpost, we will know the 5 common errors found in a React Native app.+

About React Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It's based on React, Facebook's JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

blogpost

About 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 referenced above, we utilized Expo to channel the super normal issues from React Native.

In case you previously worked with React Native previously or on the other hand assuming you're going to construct your next portable application utilizing this library, you're probably going to track down a couple of issues. Here are the best 5 ones we experienced and how we settled 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, conveying and testing portable applications are not React Native issues per si. The test to have an application running in a customer's cell phone before the authority organization into the stage, is notable. At our improvement stream, we have picked Expo for its straightforwardness, to ease process. Our partners set an emulator on their machines (inside the main essential of being a MacOs gadget) and after the improvement run of the application, they could test the application. To have the application dealing with their gadgets, we needed to run exhibition build:ios - t 'test system' - discharge channel organizing (which produced one .ipa document fit to be introduced into the gadget emulator) and exhibition build:android - t 'test system' - discharge channel arranging, an .apk record that could likewise be introduced on an emulator or on a genuine gadget, since Android is more adaptable with regards to applications being introduced on their framework.

Exhibition comes as an incredible assistance when we really want to fabricate portable applications, as it permits to smooth out React Native intricacies. In spite of its cons, it facilitates the progression of making portable applications, further developing the testing system.

The Expo moves begin to seem when your versatile application begins to develop and its functionalities become more mind boggling. Despite the fact that you might observe a few issues as the ones we've referenced above, React Native is an incredible system. Truth be told, it shows as one of the greatest cross-stage systems with an extraordinary environment of libraries, instruments, and obviously, a monster behind it: Facebook.

By consolidating it with Expo, we can deliver magnificent portable applications to our clients, with a little group, in record time. Every one of the blunders found while making this React Native portable application could be settled with the fundamental investigate time and local area help.

react native
expo
React errors
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-author
Nilima Paul
Technology Security Analyst
Techiio-followerTechiio-followerTechiio-follower
201 Blog Posts
0 Discussion Threads
Trending Technologies
15
Software40
DevOps47
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance