cover-image

How Maintaining React Native Dependencies Benefits the Customer

#react-native
#architecture
#customer-experience
#performance
#reliability
#android
#ios

Andrew Vo-Nguyen

February 1, 2025

4 min read

Recently, I performed routine maintenance on a customer's mobile app. This coincided with the release of React Native 0.76. This wasn't your regular run-of-the-mill dependencies upgrade. This involved a major app architecture upgrade.

So what's the big deal about the new React Native architecture? It removes the asynchronous bridge between JavaScript and native iOS and Android code. The removal of this bridge meant that updates could be sent synchronously and respond to user input quickly. The previous approach meant that there were scenarios where a user would expect feedback, but did not receive any feedback from the app until the bridge had processed their request. The React Native team re-wrote the Native Module System which enabled performance optimizations and better memory management across Android, iOS, Windows, and macOS. It also provided stronger type safety between the JavaScript layer and the native layer. In addition to the removal of the bridge and a re-write of the Native Modules System, they also implemented a new renderer and event loop.

As hardware advances rapidly, software has to continually be maintained to keep up. It is vital to keep apps running the latest dependencies to ensure a satisfactory user experience. Besides from a customer experience point of view, there are security implications from keeping software up to date as well. As you may know, the JavaScript package ecosystem can be a blessing and a curse. A blessing because we can leverage the community's tried and tested work without having to reinvent the wheel for every component we need that makes up our app. A curse because of the nature of a dependency tree, there may be bugs or security holes that leak down the chain. It is important to use tools like Dependabot to help mitigate these risks.

As a major React Native upgrade was underway, I was inspired to perform some additional changes to the app which I believed would directly make the customer experience better.

  1. Migrating react-native-splash-screen to react-native-bootsplash. React Native Splash Screen had not seen any update in the last 3 years, so I had to move to something that is actively maintained.
  2. Implementing react-native-fast-image for aggressive caching of images to improve load times on images that loaded remotely multiple times. This greatly improved the experience of viewing feed posts and image galleries inside the app.
  3. Complete removal of NativeBase. This UI library served its purpose for years and is now deprecated. I replaced it with native React Native components styled using stylesheets.
  4. Upgrading React Navigation from v6 to v7. The introduction of the Static API greatly simplified the configuration of screens, which in turn provided greater type safety and fewer bugs accessing route params and navigating to screens.
  5. Caching and storing repeat API calls between different screens. This was a nice touch so that the customer did not have to endure another loading spinner for data that they had already fetched earlier. This was done using the global state.
  6. The decision to remove loading messages such as "Loading users...", or "Loading bookings..." in favour of just having a loading spinner gave users a perceived quicker loading experience. When the app loads, numerous pieces of data need to be loaded asynchronously from the server and showing quick flashes of loading messages creates a sense of anxiety for the user.
  7. Migrating long lists from ScrollViews to FlatLists. On initial implementation, it was unclear how large some of these datasets would get. 4 years on and some of the lists have become over 100 elements long. Using ScrollView and mapping over every element would cause all 100+ elements to render simultaneously. This resulted in slow list load times. Migrating to FlatList meant that only elements visible on the screen would be rendered, giving the list a snappier feel.

So how did all of this translate to the end user? According to feedback I received from app users, the app felt much quicker and more responsive. They felt like it was a completely different app. They experienced quicker app load times, lag-free inputs, snappy lists and a better image viewing experience.