In 2024, we build software products for device platforms that are artificially fractured. To build the most accessible and successful product possible, we must meet our users wherever they are: on the web, iOS, and Android. However, Apple and Google’s mobile rivalry forces us to create apps separately for each platform, which drains engineering resources and often results in uneven product execution.

Fortunately, React Native helps companies optimize their mobile development by enabling them to build iOS and Android apps from a single codebase. However, many companies stop short of full unification of their product by not extending this efficiency to the web.

I’m currently attending one of my favorite conferences, React Universe Conf, which was previously called React Native EU. I’m actually in Wrocław right now attending it.

For me, the name change mirrors an evolving vision of React Native as a tool for all platforms, not just mobile. So while I’m here, I wanted to reflect on the concept of “Universal React Native”. It’s been a phrase that’s been in my head for a while now.

For me, Universal React Native means using idioms of React Native to build multi-platform products, enabling companies to ship their product on web, mobile, and emerging platforms like TV and XR, in the most operationally efficient way possible.

The Cross-Platform Problem

Instead of embracing web technologies that would allow developers to build web apps once and run them everywhere, the software giants guided developers to build with different tools than the web: Objective-C/Swift for iOS and Java/Kotlin for Android. In the beginning of the smartphone market, this made sense, as mobile hardware was underpowered and apps needed to be built in the tightest way possible. But it’s 2024 now and that’s no longer the case.

It would be really nice to live in a universe where mobile devices have first class support for JavaScript apps, but the software giants tilted mobile development practices in their favor. It’s fair to say that Apple and Google’s protection of their mobile ecosystems forces companies into inefficient workflows.

A company doing things “the right way” needs to form multiple development teams: a web frontend team, an iOS team, and an Android team. Each team requires different skillsets and maintenance of their own codebase. This fragmentation forces companies to spend more on development teams, carry more operational overhead, and maintain multiple versions of the same feature set for each platform, risking the creation of inconsistent user experiences. For example, different levels of staffing and skill might lead a company to have a strong web product, and a weak, lagging Android product.

Not every company needs to build evenly across platforms. A startup with limited resources might decide to be mobile iOS first, as iOS users typically spend more than Android users. But, as an example, a company that’s building a CRM SaaS product needs to support the user population of their clients. For that type of company, it’s essential to deliver a cohesive product experience across web, iOS and Android.

Write once(ish), use everywhere

To me, “Universal React Native” is an operationally efficient approach that enables companies to write their app once(ish) and release the same product across different platforms at the same time. This is done by leveraging React Native Web, which can create UI components for web and mobile. This streamlines development by reducing code redundancy waste and development time, allowing the engineering team to spend more effective time on building a great product for their users.

However, this approach is not about writing once and deploying everywhere without adjustments. It’s about retaining maximum consistency and flexibility by creating reusable portions of the code, while tailoring the user interface for each device form factor.

That’s why I refer to it as write once(ish) — while core logic remains the same, the presentation layer must still be adapted to fit the needs of each device. This also has the benefit of retaining the flexibility to build for emergent platforms like TV and XR should you need it.

So, my own personal take on Universal React Native means creating apps with:

• Headless business logic
• Tailored layouts for each device form factor.
• Cross-platform design system components.

Headless business logic

The cornerstone of this approach is headless business logic. This is the decoupling of your core logic, such as API requests, state management and data handling, from your presentation layer. This separation allows business logic to be shared across web, iOS, Android and emergent platforms without much duplication of effort.

Headless business logic can be shared across projects within a monorepo or as an internal NPM package for reuse across platforms. The fact that the business layer stands alone makes it easier to unit test, since it’s not tied to any specific user interface. By separating core logic from presentation, you can ensure that more focus is applied to making this part of the code high quality.

Tailored layouts for each platform

While it’s tempting to reuse the same layout across platforms, doing so can lead to a subpar user experience. Different devices have unique interaction models, screen sizes, and UX expectations. For example, a mobile app requires touch-friendly interactions and optimized layouts for smaller screens, whereas a web app might prioritize keyboard and mouse interactions on larger displays.

It’s a mistake to think of mobile as a responsive version of a web app, because it can force you to make bad UX choices for mobile. For example, a credit card form might show all fields on one screen for web users, but on mobile, it should be broken down into a step-by-step flow to prevent overwhelming the user (and increase the likelihood that the user will make a purchase).

On TV, the UX challenge is even more pronounced—if you take a mobile app and simply push it to TV, you’ll likely end up delivering a frustrating experience. A well-designed mobile app must be tailored specifically for mobile users, just as a TV app needs to be optimized for a lean-back experience.

Cross platform design system components

To maintain consistency across platforms, you can use a design system that includes cross-platform components. A well-built design system allows you to build flexible UI components that can adapt to various devices. For example, the core functionality of a button remains the same, but its size, behavior, and interaction style might differ across web, mobile, and TV.

Design systems help streamline development by ensuring that UI components maintain a cohesive design while being optimized for each platform. If you have a dedicated design systems team, they can focus on ensuring that every UI component — from buttons to forms — works well on all platforms, reducing design inconsistencies and ensuring a cohesive user experience that reinforces your company’s brand.

A strong design system is great for apps where a user might do some work on a desktop web app, but then continue on the go through the mobile app. I think it’s important for companies to consider what happens when their user closes the laptop and switches to their phone.

Expo and established React Native apps

The easiest way to get started with Universal React Native is to start a new Expo project. Expo supports React Native Web and enables simultaneous web and mobile app development out of the box. However, not every company has the opportunity to start a brand new project from scratch. There are many companies out there with vanilla React Native codebases, as well as companies that started before React Native was developed and have separate web, iOS and Android apps.

For these companies, I would recommend paying attention to the different speeds of their development teams, and consider if the product is being shipped on time and cohesively across all platform lanes. It might be worth doing the hard work of switching to a Universal React Native workflow.

Additional Benefits of React Native Web

I think there’s a lot of unexplored potential of React Native Web, and I mention one of the opportunities in my talk, “Build yourself a mobile development environment with Expo web”. If you’ve already set up your React Native app to use React Native Web components, you could easily splay out your mobile screens in a web development environment. There’s a lot of potential of leveraging the expertise of your React developers to develop internal tooling to speed up your workflow.

Universal React Native as a Path to Operational Excellence

In a world where companies must meet users across multiple platforms, Universal React Native offers a practical and efficient path to product delivery. By leveraging headless business logic, tailored layouts for each platform, and cross-platform design system components, companies can dramatically reduce development overhead and ensure feature parity across web and mobile.

Universal React Native is not just about writing code once and deploying it everywhere — it’s about making strategic decisions that optimize engineering resources and enhance user experience on every platform. This approach also retains flexibility, allowing your teams to build quickly on emerging platforms like TV and XR.

For companies already using React Native, fully embracing Universal React Native by integrating web and other platforms is the logical next step. It creates a unified development workflow that scales with your product, ensuring operational efficiency and a seamless, cohesive experience for your users — no matter where they are.