What is React Native?

React Native is a popular JavaScript-based mobile app framework that allows an app developer to build a natively rendered mobile app for iOS and Android.  The framework lets us create an application for various platforms (Apple, Android and more) by using the same codebase.  This reduces the cost of development for our clients, because we don’t need to build to same app twice; once for iOS and once for Android.

In early 2015, Facebook first launched React Native, a framework for building native apps using the React Javascript library.  Since its initial release it has become one of the most popular solutions used for mobile app development.  React Native is used to power some of the world’s most used mobile apps, including the mobile apps for Facebook, Instagram, Shopify and Skype.

What’s in the latest version of React Native?

React Native is aiming to provide more frequent releases of new features and fixes, and engaging more regularly with the developer community.  Upcoming product releases will focus on fixes and as well as improvements.

The latest version of React Native is 0.67.  Below are some notable changes and fixes provided in this latest version:

• Removed DatePickerAndroid – the component to interact with the selection of date and time is now the same for both Android and iOS.
• Various 3^rd party components used by React Native have been updated, including Kotlin, Gradle.
• Various issues that were present in the previous version of React Native have been corrected, including bug fixes for animations in specific scenarios, as well as:
  • Android specific fixes: alignment of screen elements along the baseline, scrolling to a particular screen element checks the current position before scrolling, ability to trigger an event when a number pad button is pressed, text input field selection and an issue selecting the last item in a list, and much more.
  • iOS specific fixes including corrections to the behaviour of scrolling to a particular screen location, correcting the movement of the cursor for multi-line text boxes, handling all font family names, and more.
• Added new features:
  • Android specific: ACCESS_MEDIA_LOCATION permission now available, meaning that an app can be given access to media files on the local mobile device, support for Android 11 which includes a new Locale API, and more features which are specific to the development environment.
  • iOS specific: ability to change the colour of a cancel button, additional control over progress bars, and more features for specific 3^rd party software.
• Removed unnecessary files and global variables.

Why is it important to maintain your React Native app?

Upgrading React Native to its latest version improves performance and security of your apps, as well as ensuring that your app supports the latest changes in the operating systems running of your customer’s Apple and Android devices.

The JavaScript ecosystem is particularly interesting in this aspect as it changes very quickly.  If your app is not kept up to date on a regular basis, it is likely that your app codebase will end up being so far behind that upgrading it will become much more difficult, time-consuming and therefore costly.

How to improve the performance of a React Native app?

To ensure that your React Native app performs well, performance requires careful attention.  Performance is one of the main reasons why we sometimes recommend that our client’s build their apps natively rather than using cross platform languages such as React Native.

One of the changes in the latest release of React Native is the removal of the Android specific component for allowing a user to choose date and time, in favour of utilising the same component for both iOS and Android.  While this may be annoying from the viewpoint of app functionality, it will help the performance of the app by reducing the size of the codebase.

During development of a React Native app, we ensure that we focus on the following to help deliver a high performing app:

• Provide appropriate navigation strategies – code re-use and minification are important here, as well as usability.
• Avoid rendering overhead and unnecessary renders – rendering is where the screen is “re-drawn” to refresh information shown to the user.
• Avoid use of ScrollView to render huge lists. There are several ways to display items within scrollable lists in React Native; two of the most common ways are use ScrollView and FlatList components.  When implementing very long lists (or lists that might grow to be very long), is better to paginate, splitting up the call for information to manageable smaller collection of information and using the FlatList method.
• Scale and resize images.  The following improvements can be applied to optimize images in a React Native app:
  • Using PNG format instead of JPG.
  • Using smaller-resolution images.
  • Using WEBP format for images – this can help reduce the images’ binary size on iOS and Android by nearly a third of the original size.

• Cache images – using cache speeds up the display of images that are already in the device local cache.
• Avoid arrow functions. Arrow functions reduce the number of lines of code required to achieve a particular app behaviour, but slows performance of the app.  This is a bit technical, but to explain further, the arrow function causes each render to generate a new instance of that particular function.  React Native needs to reconcile the function instances, finds a difference due to the use of the Arrow method, and therefore cannot re-use old references.
• Avoid passing inline functions as properties. Similar to the above, while this coding style achieves the required functionality, it does so at the expense of app performance.
• Use style references correctly. Similar to the problem caused by arrow functions, when we use object or arrays for styling, React creates new instances with each new render.  Instead we use a Style Sheet in React Native, which always passes a reference instead of a new object or array.
• Remove console statements – console statements are used to help us test the application during development. These are removed prior to publishing the app; even though they are unseen by the end user, if left in place they impact upon the speed of the app.

The above strategies are also applied during maintenance of our client’s apps.

If your mobile app is built in React Native, and hasn’t been updated recently, we strongly recommend that you take corrective action as soon as possible.

by

This entry was posted on Friday, February 25th, 2022 at 6:35 am and is filed under mobile apps, Technology. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.