Running React Native everywhere: The Web

• create-react-app

  575 101,812 1.9 JavaScript

  Set up a modern web app by running one command.

  

React Native for Web is compatible with multiple frameworks and tools. You can use it with Create React App, Next.js, Gatsby, Expo (!), or you can create a custom build process.

• next.js

  20 61,839 9.9 JavaScript

  Discontinued The React Framework [Moved to: https://github.com/vercel/next.js] (by zeit)

  

React Native for Web is compatible with multiple frameworks and tools. You can use it with Create React App, Next.js, Gatsby, Expo (!), or you can create a custom build process.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• gatsby-plugin-react-native-web

  1 277 0.0 JavaScript

  react-native-web plugin for Gatsby

React Native for Web is compatible with multiple frameworks and tools. You can use it with Create React App, Next.js, Gatsby, Expo (!), or you can create a custom build process.

• webpack

  329 64,145 9.8 JavaScript

  A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  

Because React Native for Web is a React website, you can use front-end tools to build and run it. For example, you can build it with Webpack or Rollup instead of Metro bundler.

• Next.js

  2,037 120,313 10.0 JavaScript

  The React Framework

  

And thanks to @expo/next-adapter, you can even use Next.js to control your Expo for Web app. For details, check "Using Next.js with Expo for Web".

• craco

  32 7,356 6.4 TypeScript

  Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

  

Create React App is very limited in its configuration options, so we'll use CRACO (Create React App Configuration Override) to customize its Webpack configuration to make it compatible with Yarn workspaces.

• react-native-web

  62 21,326 6.4 JavaScript

  Cross-platform React UI packages

The React Native for Web homepage does a great job at highlighting why you should try it:

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• customize-cra

  6 2,757 0.0 JavaScript

  Override webpack configurations for create-react-app 2.0

If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

• metro

  16 5,054 9.4 JavaScript

  🚇 The JavaScript bundler for React Native

  

Because React Native for Web is a React website, you can use front-end tools to build and run it. For example, you can build it with Webpack or Rollup instead of Metro bundler.

• react-app-rewired

  10 9,718 0.0 JavaScript

  Override create-react-app webpack configs without ejecting

If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

• react-native-monorepo-tools

  4 123 0.0 JavaScript

  Tools and utils to support a React Native monorepo built with Yarn Workspaces

Install CRACO and react-native-monorepo-tools:

• expo-cli

  13 2,586 8.4 TypeScript

  Discontinued Tools for creating, running, and deploying universal Expo and React Native apps

  

And thanks to @expo/next-adapter, you can even use Next.js to control your Expo for Web app. For details, check "Using Next.js with Expo for Web".

Suggest a related project