01.11.2021 / By Agata Nowak

Apps built with React Native – Uber Eats and Airbnb

Backstage Frontend

How to create an application that will meet the requirements of today’s times? Fast and straightforward operation from every corner of the world is the priority of today’s applications. However, for its structure to be appropriate and modern, it is worth delving into its inner side and starting with what you cannot see at first glance – i.e. the programming language library, in this case – React.

React is a library based on the JavaScript programming language. The main task of React is designing graphical interfaces of web applications. Companies such as Twitter, Instagram, Facebook, and Netflix use the React library. But in this article, we are going to focus on apps built with React Native – Uber Eats and Airbnb.

Apps built with React Native – Uber Eats

Uber Eats is an online food ordering and delivery platform launched by Uber in 2014. Most of us know about Uber technology by coming home at night or hurrying to work on a busy morning. Sometimes Uber is almost like our savior or just a cheaper version of tax services. Now its services include ride-hailing, food delivery (Uber Eats), package delivery, couriers, freight transportation, and, through a partnership with Lime, electric bicycle and motorized scooter rental. New flavorful passenger (food!). It also comes with its fair share of challenges. For instance, it cannot specify its preferred route or chit-chat with the driver, requiring more pickup and drop-off steps.

However, creating a platform that would allow for simultaneous interaction between the person placing the order, the supplier, and the restaurant was a serious challenge.

Combining these elements to work perfectly together required many changes that Uber EATS has needed to make. There seem to be four essential requirements for the individual components of the platform to interact with each other.

Submit an order
Acceptance of the order
The arrival of the supplier
Execution of the contract

Restaurant Dashboard initiated the above obligation using a one-sided React / Flux web application that can be accessed via tablets.

The beginnings of Uber EATS

Work on improving the application continued from its first launch in 2015 in Toronto. The aim was to create an innovative, independent interface for restaurants, supporting their management. However, the final solution turned out to be a complete surprise – it required an intense modernization.

One of the issues that needed to evolve was physical receipts. This function was not possible or was severely limited. For example, to AirPrint – because only printers compatible with this function could have these receipts. It caused substantial controversy among people related to gastronomy and the engineers themselves. To solve this issue, management decided to look for equipment that would allow us to connect with printers, using Native SDKs – which we receive from printer suppliers.

Changes introduced in the Uber Eats application allowed quick and trouble-free interaction between the customer, eats order, restaurant, eats delivery, Uber, and delivery partner.

Evolution of Uber EATS with React

At first glance, React Native seemed to be an ideal and a necessity while creating excellent and professional mobile applications with Uber Eats. But, It still has limited exposure to iOs or Android.

However, thanks to the acquisition of vast knowledge about the functioning of the restaurant and website components, Uber achieved the goal of being an application that meets today’s standards.

Thanks to the feasibility of introducing React Native, It was possible to provide adequate and needed functions for an application. Thus, the idea emerged to create a demo version, which was adapted to the essential parts.

The demo version included tasks such as:

download native dependencies from another team
crash reports
User authentication
user analysis

These functions included components, which belonged to the Native and Objective-c layer and the interpreted JavaScript layer. It also allowed for integration between these two.

The demo version made it possible and easier to observe the business logic of the application effectively. But over time, direct and over-reliance on native libraries, mixed with the tension between native functionality and JavaScript functionality, has resulted in many changes for architecture in apps built with React Native.

Architectural point of view

React Native enabled was to start entirely new business for Airbnb, as well as dozens of other features, from reviews to gift cards.

Thanks to the application’s functionality, both in React Native and JavaScript, it was possible to create an appropriate architecture for various mobile or internet communities. Uber Eats is designed to resemble the React / Redux web application. IOS modules were wary of, and native development was sufficient to meet the needs of the app.

Uber Eats equipped with routing functions while using the React routers library allows for precise visualization of routes and views and an imperative navigation library – UINavigationController.

As a result of a problem with non-existent URLs, a decision was made to migrate from the React router to one of the React Native libraries – Navigator or NavigationExperimental.

Conclusion? The React Native layer allows more code to be stored, taking care of the logging and analytics functions of network connections. This enables simple JavaScript implementations into code previously written in Objective-C. To operate Android and many other platforms, it is recommended to select the JavaScript library.

Airbnb development

React Native enabled was to start entirely new business for Airbnb, as well as dozens of other features, from reviews to gift cards.

However, Uber Eats isn’t the only app well known for using React Native. The second platform that React has allowed to spread its wings is Airbnb. Airbnb is a website, which enables renting a property from private individuals.

It is trendy among people who are planning a vacation or trips due to the low rental costs. The platform was established in 2008, and 8 years later, it began working with React Native technology.

Over the years, the internet platform has turned into a mobile application to meet the expectations of current users and enable rental from every corner of the world. The choice of the React library contributed to the significant development of Airbnb.

What Airbnb has gained by working with React Native

If we focus on the benefits of React Native, we need to emphasize how quickly the platform started to develop and became recognizable. The company began to gather more and more dedicated users. The supply was exceeded by demand.

Allows Airbnb to move faster as an organization.
Maintain the quality bar set by native.
Write product code once for mobile instead of twice.
Improve upon the developer experience.

Also, the Programmers and engineers were able to help with the refinement of mobile applications. What is more, it caused the minimization of the code base, which allowed for its simultaneous implementation on three different platforms, reaching a larger group of users.

Benefits for companies choosing React

However, focusing on the positives and benefits that React Native has brought for companies like Airbnb and Uber Eats, we can point things such as:

Versatile
Great mapping of maps and locations
Better interaction with the user
Easier searching
Code minimization
User analysis
Creating crash reports
Catching errors faster
Ease of modification among a wide range of programmers.
Strong community
Transforming websites into mobile applications
Ability to write JavaScript in React
Easier management of internal elements

Scalac works with React

On our website, you can find detailed information about React:

What are the benefits
How exactly does it work
Background React Native, its history

Front-end development is a bustling place, with a lot of new technologies coming in and out. You can find on our blog a lot of information about these changes as well as advice on using React in front-end development. If you want to share your own ideas or have any questions about using this technology, do not hesitate to chat with us! We’d love to hear from you.