Qunar React Native (QRN): Architecture, Features, and Large‑Scale Adoption

Qunar React Native (QRN) is a framework customized by Qunar’s mobile architecture team (YMFE) for iOS and Android. It extends React Native to address platform differences, improve development efficiency, and enable dynamic page delivery.

Preface

Cross‑platform mobile development has long been a hot topic because it can reduce cost and increase efficiency. Common solutions include React Native, Weex, and HTML5‑based hybrid frameworks. Qunar built QRN on top of React Native to complement its existing Hybrid (HY) solution.

Origin

By the end of 2015 the Qunar iOS app exceeded 110 MB, which conflicted with App Store download limits. Reducing the native code size was impossible, so the team needed a dynamic, lightweight solution. After evaluating options, React Native was chosen for its dynamic JavaScript‑driven UI, true cross‑platform capability, and native‑level user experience.

The first RN‑based page, a hotel review screen in the “Qunar Sleep” client, was launched in December 2015 on both iOS and Android and exceeded expectations, confirming RN’s suitability.

Large‑Scale Application Status

From March 2016 to October 2016, more than 20 QRN projects (14 on both platforms) were released, each containing dozens of pages. Core business flows such as order lists, order details, and login screens were replaced by QRN pages, handling tens of millions of daily page views.

Architecture Characteristics

QRN’s design focuses on three aspects: business convenience, coexistence with existing native and HY pages, and support for hot‑update mechanisms.

Further Smoothing Platform Differences

Components like Switch originally had different iOS and Android styles. QRN provides a unified UI for such components and re‑implements other native components on Android to match iOS, ensuring consistent appearance.

Additional JavaScript‑implemented UI widgets (e.g., side‑swipe ListView, calendar) are cross‑platform and can be hot‑updated without native changes.

QRN also normalizes platform‑specific APIs such as status‑bar handling, offering a single API for both iOS and Android.

JS Bundle Splitting

QRN separates the framework JavaScript from business JavaScript, allowing all projects to share a single framework bundle while each project ships only its own business bundle, reducing overall bundle size and enabling efficient pre‑loading and caching.

Preloading and Caching

QRN provides an asynchronous method to obtain a pre‑initialized RCTRootView that has already loaded the framework and business bundles, cutting the white‑screen time from about 1 s to roughly 200 ms.

Each business gets an isolated RN environment, so a failure in one bundle does not affect others.

Mature Offline Resource Package

Business JavaScript and static assets are packaged offline. When a network request matches a resource in the offline bundle, the local file is returned instantly, reducing download time and allowing QRN pages to work without network connectivity.

Custom IconFont Support

QRN allows developers to declare IconFont resources in JavaScript, automatically loading the font without native code. Vector icons are lighter and more flexible than bitmap images.

No‑Tracking Statistics Support

QRN integrates Qunar’s zero‑instrumentation analytics (QAV), enabling click and navigation tracking without modifying existing RN code.

New ScrollView and ListView

QRN’s ScrollView handles gestures in JavaScript rather than native, providing a unified gesture system and smoother nested scrolling.

QRN’s ListView implements true cell reuse via React’s virtual‑DOM diff algorithm, keeping memory usage under 70 MB on iPhone 7 compared with RN’s ListView, which can exceed 1 GB.

To migrate, replace the import statement: import { ListView } from 'react-native' with import { ListView } from 'qunar-react-native'.

Because QRN’s scrolling and list handling run on the JavaScript thread, heavy JS workloads can cause jank, but most issues can be mitigated by optimizing JS code.

Encountered Issues

node_modules Dependency Problems

npm’s flat‑module resolution can cause version conflicts: only the top‑level version is bundled, even if a sub‑module depends on a different version. QRN’s split‑bundle approach requires a custom tool to enforce consistent versions across projects.

React Native Development

RN leverages front‑end tools (JSX, Redux), making it approachable for web developers, yet it also demands native layout knowledge, creating a learning curve for both front‑end and native engineers.

Ever‑Changing Official Versions

RN releases frequently (bi‑weekly then monthly). Layout engine changes can break existing Flex layouts, requiring extensive regression testing. QRN upgraded from RN 0.20.0 to 0.33.0 in October 2016, which demanded a full UI regression.

Conclusion

QRN demonstrates that a well‑engineered React Native customization can power core business pages at massive scale, offering a viable alternative to pure native development. The team plans to open‑source QRN as an SDK to further simplify RN development for the community.