Ctrip’s Open‑Source React Native Framework CRN: Architecture, Performance Optimizations, and Integration Guide

Author Bio Zhao Xinguo, Development Director of Ctrip Wireless Platform R&D, has been responsible for App framework development since 2013, participating in Native, Hybrid and React Native framework design, modularization, and Android pluginization, and now focuses on promoting React Native within the company.

After nearly two months of preparation, Ctrip’s wireless platform R&D team officially open‑sourced its internal React Native development framework – CRN. CRN simplifies the original React Native architecture, optimizes performance and stability, and significantly reduces the cost of adopting RN technology.

Background

Ctrip introduced React Native in mid‑2016; after almost three years it has become the preferred cross‑platform solution internally. The development timeline includes early experiments in 2016 (RN 0.30.0), large‑scale adoption in 2017 (RN 0.41.0) with LazyRequire for first‑screen rendering, rapid expansion in 2018 (RN 0.51.0) covering most pages of the Ctrip Travel app, and a stable phase in 2019 (RN 0.59.0) which forms the basis of the current open‑source release.

Why Open‑Source

Share Ctrip’s performance‑optimization solutions for RN.

Invite the RN community to collaborate and exchange ideas.

Open‑Source Contents

CRN provides a complete solution covering development framework, tools, documentation, testing, packaging, and operations, integrated with many internal systems and tailored to Ctrip’s organizational structure. The released code is based on React Native 0.59.0 and React 16.8.3, focusing on the performance‑critical parts required for large‑scale RN development.

CLI

Project creation, debugging, and execution.

Framework and business code splitting during packaging.

Generation of a single bundle that runs on both iOS and Android.

Support for incremental compilation (stable module IDs for differential updates).

LazyRequire for on‑demand loading ( details ).

Runtime

Pre‑loading of framework code on the backend.

Business code caching strategy to speed up second‑time first‑screen loads.

Stability enhancements.

First‑screen rendering performance statistics.

Applicable Scenarios

Pure RN App

Startup is RN‑based, so pre‑loading benefits are limited.

Multiple business bundles can be split to reduce package size.

CRN Runtime (iOS/Android native code) improves stability.

Hybrid App

All CRN optimizations target this scenario; every feature is applicable.

Key Optimizations

First‑Screen Load Performance

Tested with the RN official "Tester" demo on iPhone 7Plus, iPhone 6, and Samsung S6 Edge+.

Compared CRN mode with standard RN mode.

The chart (shown below) demonstrates that CRN reduces first‑screen load time by about 50% on iOS and 60% on Android compared with the vanilla RN approach.

Framework and Business Code Splitting

Standard RN bundle (main.js) = 624 KB.

CRN splits business code into a 2 KB js-modules directory and a 615 KB common_ios.js framework file.

When many business modules use RN, CRN’s single shared framework dramatically reduces the final app size.

CRN Project Overview

The open‑source repository is https://github.com/ctripcorp/crn . It contains both the modified RN Runtime (iOS and Android directories) and a CLI that mirrors the official React Native CLI but is simplified for easier adoption. The project also references the Lean Core initiative that moves non‑core features to separate repositories.

Getting Started

Install the CLI globally:

npm install -g crn-cli

Integrating into an Existing App

Native Runtime Integration

Replace the official RN Runtime code in iOS/Android with CRN’s Runtime (see README).

Copy the webapp directory into the native project as shown in the CRNDemo source.

Invoke the pre‑load method at startup:

// iOS – CRNBridgeManager.h
- (void)prepareBridgeIfNeed;
// Android – CRNInstanceManager.java
public static void prepareReactInstanceIfNeed()

JS Code Integration

Add a module export line in the entry file (e.g., index.js):

AppRegistry.registerComponent(appName, () => App);
module.exports = App; // add this line

Package with crn-cli pack and copy the output to the native webapp folder.

Starting a New App

crn-cli init <project-name>

– creates a project with iOS, Android, and JS code. crn-cli run-ios / crn-cli run-android – launch the RN app for development. crn-cli pack – package the app and copy the bundle to the native webapp directory.

Conclusion

CRN is a production‑validated RN framework from Ctrip that lowers the cost of RN adoption through architectural simplifications and extensive performance and stability enhancements, addressing many real‑world engineering challenges.

Future plans include keeping the open‑source version in sync with the internal version and releasing more engineering and efficiency modules, inviting the community to contribute ideas and feedback on GitHub.