How We Use React Native Within Our Products at Runtastic
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?
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).
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.
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.
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.
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.
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.