React Native at Airbnb: The Technology

The technical details

Gabriel Peal
Jun 19, 2018 · 12 min read

This is the second in a series of blog posts in which we outline our experience with React Native and what is next for mobile at Airbnb.

React Native itself is a relatively new and fast-moving platform in the cross-section of Android, iOS, web, and cross-platform frameworks. After two years, we can safely say that React Native is revolutionary in many ways. It is a paradigm shift for mobile and we were able to reap the benefits of many of its goals. However, its benefits didn’t come without significant pain points.

What Worked Well

Cross-Platform

Unified Design Language System (DLS)

We opted to rewrite components instead of wrapping native ones because it was more reliable to make platform-appropriate APIs individually for each platform and reduced the maintenance overhead for Android and iOS engineers who may not know how to properly test changes in React Native. However, it did cause fragmentation between the platforms in which native and React Native versions of the same component would get out of sync.

React

  • Components: React Components enforce separation of concerns with well-defined props and state. This is a major contributor to React’s scalability.
  • Simplified Lifecycles: Android and, to a slightly lesser extent, iOS lifecycles are notoriously complex. Functional reactive React components fundamentally solve this problem and made learning React Native dramatically simpler than learning Android or iOS.
  • Declarative: The declarative nature of React helped keep our UI in sync with the underlying state.

Iteration Speed

Investing in Infrastructure

Without this heavy investment in infrastructure, React Native would have led to a subpar developer and user experiences. As a result, we don’t believe React Native can be simply tacked on to an existing app without a significant and continuous investment.

Performance

When we did see performance issues, they were usually caused by excessive rendering and were mitigated by effectively using shouldComponentUpdate, removeClippedSubviews, and better use of Redux.

However, the initialization and first-render time (outlined below) made React Native perform poorly for launch screens, deeplinks, and increased the TTI time while navigating between screens. In addition, screens that dropped frames were difficult to debug because Yoga translates between React Native components and native views.

Redux

Backed by Native

  1. Shared element transitions: We built a <SharedElement> component that is backed by native shared element code on Android and iOS. This even works between native and React Native screens.
  2. Lottie: We were able to get Lottie working in React Native by wrapping the existing libraries on Android and iOS.
  3. Native networking stack: React Native uses our existing native networking stack and cache on both platforms.
  4. Other core infra: Just like networking, we wrapped the rest of our existing native infrastructure such as i18n, experimentation, etc. so that it worked seamlessly in React Native.

Static Analysis

We also used analytics to measure render times and performance to figure out which screens were the top priority to investigate for performance issues.

Because React Native was smaller and newer than our web infrastructure, it proved to be a good testbed for new ideas. Many of the tools and ideas we created for React Native are being adopted by web now.

Animations

JS/React Open Source

Flexbox

Collaboration with Web

What didn’t work well

React Native Immaturity

Maintaining a Fork of React Native

JavaScript Tooling

Refactoring

JavaScriptCore inconsistencies

  • iOS ships with its own JavaScriptCore out of the box. This meant that iOS was mostly consistent and not problematic for us.
  • Android doesn’t ship its own JavaScriptCore so React Native bundles its own. However, the one you get by default is ancient. As a result, we had to go out of our way to bundle a newer one.
  • While debugging, React Native attaches to a Chrome Developer Tools instance. This is great because it is a powerful debugger. However, once the debugger is attached, all JavaScript runs within Chrome’s V8 engine. This is fine 99.9% of the time. However, in one instance, we got bit when toLocaleString worked on iOS but only worked on Android while debugging. It turns out that the Android JSC doesn’t include it and it was silently failing unless you were debugging in which case it was using V8 which does. Without knowing technical details like this, it can lead to days of painful debugging for product engineers.

React Native Open Source Libraries

On Android, many React Native libraries also require you to use a relative path to node_modules rather than publishing maven artifacts which are inconsistent with what is expected by the community.

Parallel Infrastructure and Feature Work

Crash Monitoring

Due to the amount of custom infrastructure around React Native, we would occasionally have serious issues in which crashes weren’t reported or source maps weren’t properly uploaded.

Finally, debugging React Native crashes were often more challenging if the issue spanned React Native and native code since stack traces don’t jump between React Native and native.

Native Bridge

Initialization Time

Initial Render Time

App Size

64-bit

Gestures

Long Lists

Upgrading React Native

Accessibility

Troublesome Crashes

SavedInstanceState Across Processes on Android

This is part two in a series of blog posts highlighting our experiences with React Native and what’s next for mobile at Airbnb.

The Airbnb Tech Blog

Creative engineers and data scientists building a world…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store