React Native Architecture: Migrating from Legacy Paper to JSI Communication and Native Modules

In the legacy architecture, often associated with the Paper renderer, JavaScript and native code communicated via an asynchronous bridge. Function calls and their arguments were converted into serializable messages, queued, and processed on the native side.

This separation introduced latency during frequent UI updates or large data transfers. The New Architecture introduces JSI, allowing JavaScript to hold references to C++ host objects and invoke native methods directly without serialization.

This direct reference model reduces thread contention and removes the queuing bottlenecks that previously impacted animation smoothness and gesture responsiveness.

Transitioning an existing mobile application requires tracking framework-level milestones across both React Native and Expo ecosystems. The New Architecture initially debuted as an experimental opt-in configuration.

Subsequent releases declared it practical and enabled it by default for newly created projects. In recent core releases, React Native runs exclusively on the New Architecture, and disabling it is no longer supported.

Expo projects follow a similar progression, where SDK 52 enabled the configuration for new apps, while later SDK versions enforce it as the baseline standard for mobile delivery.

Upgrading a legacy application requires auditing third-party dependencies and native modules. Libraries that still rely on the old bridge wrappers will fail unless they have been refactored for the new paradigm.

Engineering teams must establish clear performance benchmarks before and after the migration. Measuring startup times, JS thread load, and UI frame drops helps verify whether the new rendering pipeline resolved previous bottlenecks.

Do not attempt a blind upgrade across multiple major versions simultaneously. Isolate core native dependencies first, verify JSI compatibility, and test gesture handlers thoroughly on target physical devices.

Source