Running React Native everywhere
Tags: javascript, webdev, react, reactnative
Published: 2021-09-16 11:20:33

---
title: Running React Native everywhere
published: true
date: 2021-09-16 11:20:00 UTC
tags: #javascript #webdev #react #reactnative
canonical_url: https://mmazzarolo.com/blog/2021-09-11-running-react-native-everywhere/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2v77exro4r9tyz6jbr2.png
---

## TL;DR

How to structure your codebase to run multiple React Native apps within a single codebase targeting different platforms: Android, iOS, macOS, Windows, the web, a browser extension, and Electron.

The complete project is available on GitHub: [React Native Universal Monorepo](https://github.com/mmazzarolo/react-native-universal-monorepo).

![](https://raw.githubusercontent.com/mmazzarolo/react-native-universal-monorepo/master/.github/images/all-screenshot.png)

## Learn once, run everywhere

Since its inception, [React Native](https://reactnative.dev/)'s focus has always been enabling developers to write native applications using React. And by "native", they don't mean just "mobile" apps.  
Yes, React Native is mainly known for its Android and iOS support, but its scope is steadily expanding: be it mobile devices, desktop apps, VR, or websites, React Native has an answer to almost every platform nowadays.

"Running React Native everywhere" is an in-depth guide about **using React Native to run a single app on different platforms and frameworks: Android, iOS, macOS, Windows, the web, a browser extension, and Electron**.

This guide leans towards showing the technical side of the platform's integration process, focusing on creating a setup that provides a good developer experience.

**This is not a "how to create a React Native app" guide**. We'll spend most of the time getting our hands dirty by tweaking [React Native's metro bundler](https://facebook.github.io/metro/), customizing [Webpack configurations](https://webpack.js.org/), and learning how monorepos and [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) work.

I won’t delve deeply into explaining how the technology stack works. A good understanding of React/React Native is required if you want to fully understand the process. Some basic knowledge of build tools like Webpack and the metro bundler will help too (but are not required).

Last but not least: I'm not looking for buy-in on using React Native on multiple platforms. **I'll assume you've already done some research on the pros and cons of such an approach** 👍.

## Project goal

By the end of this guide, we’ll have a fully working **multi-platform setup sharing a single React Native codebase**.

You can find the complete code in the [React Native Universal Monorepo](https://github.com/mmazzarolo/react-native-universal-monorepo) GitHub project.

Even if I'm covering several platforms, you’re likely interested in just a couple of them.  
That's ok, and that's why I'm splitting the guide into different blog posts — you can skip posts of platforms you don't care about.

## Tech stack

The project we're building is structured as a [**Yarn workspaces**](https://classic.yarnpkg.com/en/docs/workspaces/) monorepo.

For the sake of simplicity, code is written in **plain JavaScript**. Still, you can add support for [**TypeScript**](https://www.typescriptlang.org/) if needed (you can use the [React Native Universal Monorepo](https://github.com/mmazzarolo/react-native-universal-monorepo) as an example; it's written in TypeScript).

We're not going to use **Expo**. Not because I don't like it (quite the opposite: I love it!), but because currently it doesn't support all our target platforms.

We'll generate the iOS and Android app using [**React Native CLI**](https://reactnative.dev/docs/environment-setup), and the Windows and macOS apps app using [**React Native for Windows + macOS**](https://microsoft.github.io/react-native-windows/).

For the web app, the browser extension, and the Electron app, we'll use [**React Native for Web**](https://necolas.github.io/react-native-web/).  
To simplify their setup, we'll use [**Create React App**](https://github.com/facebook/create-react-app), and customize it using [**CRACO**](https://github.com/gsoft-inc/craco) — but you're free to use other React-based frameworks as well (e.g., NextJS).

As of writing, the latest version of React Native is 0.65. This is the version of React Native we're going to use on most of the codebase (except for the macOS app that currently only supports React Native 0.63).  
Even if we're going to mess around with the configuration of each project, updating to newer versions of React Native _shouldn't_ be too complex. We'll keep all our configurations on the JavaScript side and, by design, we'll support and use different versions of React Native.

## Acknowledgements

I created [React Native Universal Monorepo](https://github.com/mmazzarolo/react-native-universal-monorepo) and I'm writing these blog posts because I wanted to share what I learned while working on this setup on other personal projects.

For feedback and questions, feel free to start a discussion on the [React Native Universal Monorepo's discussions page](https://github.com/mmazzarolo/react-native-universal-monorepo/discussions) or send me a direct message.

Thanks to the React + React Native team and community for building all these fantastic tools! ♥

## Next steps

Without further ado, let's start from the first step: [setting up the monorepo](https://dev.to/mmazzarolo/running-react-native-everywhere-yarn-workspaces-monorepo-3j5g).

- Overview (☜ you're here)
- [Monorepo setup](https://dev.to/mmazzarolo/running-react-native-everywhere-yarn-workspaces-monorepo-3j5g)
- [Android & iOS](https://dev.to/mmazzarolo/running-react-native-everywhere-android-ios-3451)
- [Windows & macOS](https://dev.to/mmazzarolo/running-react-native-everywhere-windows-macos-7lp)
- [The Web](https://dev.to/mmazzarolo/running-react-native-everywhere-the-web-h6d)
- [Electron & browser extension](https://dev.to/mmazzarolo/running-react-native-everywhere-browser-extensions-electron-46hh)

> _Originally published at [mmazzarolo.com](https://mmazzarolo.com/blog/2021-09-11-running-react-native-everywhere/)_