Changing React Native... from within!

Microsoft uses React Native across products including Office, Windows, Teams, and Xbox, but complex apps and large monorepos expose gaps in the developer experience. Duplicate package versions can bloat bundles or cause problems with shared state, while mismatches between React Native and libraries such as Gesture Handler and Reanimated can break apps during upgrades.

Adding React Native to a mature application with a complicated native UI can be much harder than starting a new app. At Microsoft, monorepos with more than 5,000 external dependencies make upgrades difficult because changes ripple through libraries and apps. Foxman also points to slow bundling, Metro’s costly file crawl, missing symlink support, and limited TypeScript integration as obstacles.

Microsoft’s RNX Kit is a community project for React Native developer experience, with about 30 released packages, five incubating packages, and test apps for Expo and bare React Native. Its tools are developed and tested against Microsoft’s large repositories, then shared so other teams can use them and contribute improvements.

Dep Check uses a database of dependency versions tested with particular React Native releases to help teams upgrade compatible packages together. RNX Kit also adds Metro symlink support, bundle-time TypeScript and platform-specific checks, esbuild-based tree shaking, and plugins that detect duplicate packages and dependency cycles.

Foxman says lasting change depends on collaboration as well as tools. The Bundle Working Group brings together people from Meta, Callstack, Expo, Airbnb, Google, and Klarna for monthly discussions about bundling. Microsoft invites developers to try RNX Kit, share feedback, and contribute code.