How We Use React Native Within Our Products at Runtastic

React native at Runtastic

Written by Patrick Bichler, Software Engineer JavaScript

Very likely most of you don’t know it, but we at Runtastic are using React Native as a framework for our News Feed to improve social interaction between our users, within our Results, Runtastic, Steps, and Balance apps.

What Is React Native and How Is It Used?

React Native is a framework for developing apps with a truly native experience, for both iOS and Android, using mainly JavaScript.

This is accomplished by developing in JavaScript and transpiling the code through Babel to be able to run it on the JavaScript Engine of the mobile device. React Native then takes care of providing native counterparts for the views and callbacks. This way the developer mostly only interacts with the JavaScript source code, and React Native is handling the communication between JavaScript and the native side.

Furthermore, it’s also possible to use a subset of CSS to arrange and style the user interface.

Neat, but why should I use it?

Usually you would develop a certain functionality or feature, once for iOS (using Swift) and once for Android (using Kotlin). Since most of this functionality and/or the user interface for that part is going to be very similar on both platforms, it makes sense to share its source code between the different platforms. Also for features that are mainly content driven, like a News Feed, you may want to improve and extend the content representation in a fast cadence to drive user interaction and engagement.

React Native enables us to deliver a certain functionality based on the same implementation for both platforms almost instantly, without the need to go through the normal (often tedious) app update process in the Google Play Store and Apple App Store.

Fast delivery of new features and UI/UX improvements to the user, is the main reason why we are using React Native in our product development (and so should you ;-)).

But there have to be some downsides, right?

Although there are a few reasons why we use React Native, there are also some limitations to it, which may make React Native unsuitable for your development environment. One example is the extra layer between your app and your source code, which slows down your app (although very little).

Another limitation could be that you also need to create NativeModules (or reuse existing ones from the community) in case a certain functionality isn’t possible with JavaScript / React Native and needs to be done on the native side.

Our Setup

Looking at our React Native setup from a high level, we strictly separate our actual business logic from the UI and the store. This enables us to easily reuse UI elements and also to extend or modify existing logic without the fear of breaking other functionality. To leverage this clear separation of concerns, we are using the Redux design pattern, which provides a clear vision of how state changes should be handled to maintain an immutable state.

react native setup

Challenges

We faced some challenges on the React Native side that we could solve by using the Redux pattern and especially its store as a single source of truth. However, we identified other challenges that needed to be solved before we were able to use React Native in a production manner and to release it in our apps.

App-in-apps integration

We not only integrate our React Native apps (like the News Feed) in one app, but rather in multiple apps. All of these apps have a considerably big codebase where a lot of code is shared through common components and libraries. Nevertheless, they are still slightly different in architecture, functionality, and design. This means that we have to make sure that our News Feed can handle all those varying codebases in order to deliver the best quality and user experience in all of our apps where we integrate React Native apps into.

react native setup app in apps

Updating

To be able to utilize the benefits of React Native to deliver in a high cadence, one could use a third party provider to push code updates to the apps, but we didn’t want to expose any of our source code to repositories shared with said third parties. That’s why we came up with our own process to update the JavaScript codebase using a custom package structure that we call RNA, which stands for React Native Archive. An RNA is a versioned, packed archive of all the JavaScript code and our static assets, like images and icons.

At regular intervals, we are checking for an updated RNA and downloading the new one in case there is an update. Using this approach we can release new features or bug fixes for our React Native products, without the need to wait for a native app update, so we are much more flexible. If there’s an urgent issue that needs to be fixed as soon as possible, it only takes a couple of minutes for the actual user to receive a new RNA containing the bug fix.

Conclusion

We did face a few challenges using React Native here at Runtastic, challenges other companies and developers may not have faced yet or are already preventing them from choosing React Native as a development source, but we did solve them and are confident that using React Native was the right choice for us.

We hope that we convinced you that React Native is a great choice for developing native apps with (mostly) JavaScript. If you have any suggestions, questions, or would love to shape the future of our products with us, leave a comment or apply right now!

***

RATE THIS ARTICLE NOW

Runtastic Tech Team We are made up of all the tech departments at Runtastic like iOS, Android, Web, Infrastructure, DataEngineering, etc. We’re eager to tell you how we work and what we have learned along the way. View all posts by Runtastic Tech Team »