Introduction

In this fast-paced world, the use of smartphones has risen dramatically. Smartphones have become an integral part of our life. Recent stats say that there are 6.92 billion smartphone users globally, which is 86% of the world’s population.

For any business, providing mobile solutions to its customers is very important. We are no exception to this. We at Yubi always focus on delivering mobile solutions to our customers wherever required.

When it comes to mobile solutions, there are numerous ways to build mobile apps. Choosing the right one that satisfies our business requirements is very important. This article explains how we chose React Native as our primary mobile stack at Yubi.

Exploration and Research Phase

We took considerable time analysing different approaches to build mobile Apps for Android and iOS platforms. We analysed Native Android, Native iOS, Flutter, React Native, Native + Kotlin Multiplatform, Progressive Web App solutions, etc. 

Based on our research, we identified some of the approaches needing to satisfy our use cases more. Eventually, we shortlisted 3 approaches to explore further. They are,

  1. Native – Android and iOS
  2. Cross Platform with Flutter
  3. Cross Platform with React Native

The fourth one, which was very promising, was Kotlin Multiplatform—considering the framework’s maturity, we haven’t considered Kotlin Multiplatform.

All three approaches are promising in their way. Selecting one of the three is a challenging job. We wanted to choose the right one that satisfies our business requirements well. For this, we wanted to go with an exciting decision-making framework named ‘Traffic Lights.’

The Traffic Light method is a structured and clear method of making decisions, especially when multiple teams or functions disagree. It relies on the following 4 steps to prepare for any decision,

  • Step 1: Select the criteria
  • Step 2: Present each option
  • Step 3: Traffic lights! 🚦
  • Step 4: Summarise and recommend

Following the ‘Traffic Lights’ framework, we listed down all the criteria in a column and ways to achieve them in separate columns. We traffic lighted it as follows: 

  • Green – Very much feasible
  • Yellow – Feasible with some limitations/Constraints
  • Red – Not feasible

Blog Table How React Native was Selected as Yubi’s Primary Mobile Stack

The above Traffic Lights table helped us to visualise and analyse all the three approaches.

Native?

When we analysed native, despite having a lot of greens, it was red on a couple of our key use cases, ‘Instant update’ and ‘Code Sharing’. It also has limitations on some of our key criteria – Cost, Time To Market, and Feature Parity. So we decided not to go with Native.

Flutter vs. React Native?

The two remaining options were Flutter and React Native. These two were very close contenders. We tried putting weightage for different criteria to help take the final call. Even then, they were closely contending. 

Then we tried eliminating some criteria where both approaches satisfied our use cases when we analyzed the remaining. Although OTA has some constraints, it’s an excellent option to have, considering the nature of our product. We felt ‘Instant App update’ capability is crucial for our business.

With React native, we found another advantage of code reuse between the web and mobile. We already have our web apps built in React, and we identified the potential code reuse we can achieve with the ‘React Native for Web’ framework. 

Although flutter is emerging and offers excellent performance, we have considered using React native as Yubi’s primary mobile stack.

Yubi’s UI Framework – Phoenix

Our decision led us to invent Yubi’s UI framework, ‘Phoenix.’ The Phoenix framework provides a library of components that can be used on multiple platforms – Android, iOS, Web, and mWeb. As the phoenix framework matures, we can increase our codeshare among multiple platforms. It helps us avoid redundant work in multiple UI teams. We build components once and use them in multiple applications and platforms.

Our Phoenix framework is evolving, and we are looking to open-source it. Stay tuned for further updates on Phoenix.

Way Forward

We at Yubi, decided to go with React Native as our primary stack, which doesn’t mean React Native is the best. We would say React Native provides solutions for more of our use cases, and we are going ahead with it. We at Yubi, will keep evaluating new technologies and embrace them if they meet our requirements well.