React Native at Scale With NFL

The NFL has three React Native mobile apps: NFL, NFL Fantasy, and NFL Network. React Native also powers connected TV apps on Apple TV, Fire TV, Android and Google TV, LG, Vizio, and Xbox; Roku has a separate codebase. The React Native video player is used in the mobile apps, NFL.com, and team websites.

The web team was adopting React when Michael joined, and the NFL launched React Native as a new project at the end of 2017, aiming to ship before the 2018 season. Web and native teams combined to build the app, CI, and native integrations. The team chose React Native Web for shared web targets and a monorepo to bring related projects together.

The NFL has built two new versions of its flagship app, using each as a chance to revisit technical choices and product direction. The first combined separate iOS and Android apps; the later version reflected the shift to NFL+. Teams kept the live app running around season deadlines while focusing resources on the new version.

The apps began as bare React Native projects because key needs such as video and analytics required native code. After App Center's shutdown, the team adopted Expo tools, including EAS Build and Expo Fingerprint, while keeping some existing native libraries and custom functionality. GitHub Actions, Yarn 4, and custom scripts help choose which builds to run for changes.

Michael recommends a monorepo and sharing code beyond iOS and Android where it fits the product. For the NFL, React Native Web and connected TV support helped teams deliver across screens with shared components. He says React Native can serve major TV platforms as well as mobile and web.