React-Native for app development?

There comes the order. An app is to be developed for Android, iOS and as a WebApp. Does React-Native lend itself to development?

Do we develop standalone apps for the systems? Kotlin for Android, Swift for Apple and a React app as a web platform?

Kotlin Logo
Swift Logo
React-Native Logo

This costs time, know-how and a lot of maintenance work. As a small company, it’s a big commitment. But there was something else.

React-Native an open source framework that first promises that you can generate native code from it for Android, iOS and a web app.

Sounds good, but is it really that simple, why isn’t everyone using it?
What are the pros and cons?
Is there a good reason not to do it, or is everyone else stupid? 

In the past we have developed apps on a native code basis, like the Dialego Panel App, available for free in the Apple AppStore and Google PlayStore

In the app, you have the option of taking part in surveys to which you can be invited by the market research institute Dialego AG. The prerequisite for this is registration in the Dialego panel.
The panel points earned through this can be managed there. Once a certain quota has been reached, they can be donated or paid out. Donations go to the non-profit organisation Dialego Foundation. You can redeem it for a voucher from e.g. Amazon. An account transfer is also possible.

In this development, it has already been noticed that it is quite time-consuming when making changes to in-app functions if you have to adapt the front-ends to several code bases.

We looked at the pros and cons, for developing in React-Native, and determined for us that the pros outweighed the cons. 

React-Native advantages and disadvantages

Advantages

  • Shorter development time
  • You need smaller teams
  • 1 framework for multiple platforms
  • Maintainability made easier

Disadvantages

  • You still need native programming language skills for special components
  • It’s from Facebook

Our attention was particularly focused on code maintainability and development time. 

Since there was only limited experience with React-Native in our development team, we had to educate ourselves in this area. Good resources for this are, for example, the getting started documents, which are very well described and explained.

I, for example, have worked through the udemy.com course by Erik Behrends, which explains how to install the components using Expo and React-Native. You learn how to develop with the help of sample test apps. The builds are then generated from this. At the end, there is also a chapter on deployment in the respective app stores.

Hindrances we encountered was an incompatibility with some packages. Which work for iOs and Android but not for the WebApp. With increasing experience in the framework, it is easy to learnI what works and what doesn’t on the web. 

For us, it was sobering at first that the app does not run directly on the web, as promised.

However, you can quickly fix the problem by writing wrappers for it. The corresponding components are split into classes for the mobile platforms. The same applies to the web classes. Common functionalities are included in the main class.

React-Native screenshot base class
React-Native screenshot extended class

Overall, the development in React-Native was fun. Despite the time it took to get used to the new structures and programming paradigms, we incurred less costs in development than if we had developed the two apps natively for Android, iOs and the web. Although we would have had previous experience there.

React-Native mobile screen login
React-Native mobile screen new entry

Further information on the Bürgerlabor Münsterland project can be found here.

As a little secret tip, the design of the app can be tested excellently with our tool FeedMap 🙂

X