Applying React Native in Ctrip Train Ticket Product: Practices, Challenges, and Solutions

The talk, originally presented at a Ctrip Technology Center React Native meetup, introduces how Ctrip integrated React Native into its train ticket product to balance high‑quality user experience with fast business iteration.

1. Why choose React Native – Native apps offer the best performance but require lengthy store approvals for updates, while Hybrid solutions suffer from performance bottlenecks. React Native provides near‑native performance with the ability to update bundles without re‑publishing, making it ideal for the frequently updated train ticket service.

2. Current status of React Native – RN evolves rapidly (e.g., version 0.35 at the time), offering strong performance but still facing maturity issues such as version‑upgrade pain points and occasional API incompatibilities.

3. Ctrip React Native (CRN) – Ctrip’s internal RN framework abstracts platform differences, supplies styled components (HeaderView, HtmlText, Storage, Fetch, etc.), and improves first‑screen rendering (≈200 ms on iOS, ≈400 ms on Android). It also provides tooling like crn‑cli for packaging and deployment.

4. RN application in Ctrip Train Ticket – Starting from version 6.17, RN was trialed in a few BUs; by version 6.20, over 15 BUs had adopted RN, contributing more than 50 pages, including complex features such as real‑time ticket grabbing, rescheduling, and shuttle services.

5. Pitfalls and solutions – Major issues included ListView memory consumption when displaying thousands of stations, nested Touchable components causing gesture conflicts, and performance drops in modal overlays. Solutions involved reusing native station selectors, pre‑loading data before modal animation, limiting ListView batch size, and restructuring view hierarchies to avoid excessive nesting.

6. Additional optimization steps – Proper use of setState callback, key props, lifecycle methods like shouldComponentUpdate, and leveraging InteractionManager.runAfterInteractions for deferred rendering helped reduce frame drops. The team also considered state‑management libraries such as Redux to tame growing codebases.

Overall, the presentation demonstrates how React Native can be effectively adopted in a large‑scale, high‑traffic mobile product, highlighting both its advantages and the practical engineering solutions required to overcome its shortcomings.