Need help with react-native-dom?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vincentriemer
3.2K Stars 93 Forks MIT License 418 Commits 47 Opened issues

Description

An experimental, comprehensive port of React Native to the web.

Services available

!
?

Need anything else?

Contributors list

# 29,249
JavaScr...
C
webwork...
React N...
403 commits
# 4,409
npm
React
graphql...
OCaml
4 commits
# 183,183
React N...
ESLint
C
Qt
2 commits
# 400,321
webwork...
React N...
ui-fram...
HTML
1 commit
# 393,444
webwork...
React N...
ui-fram...
HTML
1 commit
# 370,172
generat...
CSS
webwork...
React N...
1 commit
# 166,917
Android
C
React N...
iOS
1 commit
# 11,288
TypeScr...
webasse...
assembl...
reasonm...
1 commit
# 193,857
HTML
Shell
webwork...
React N...
1 commit

React Native DOM · CircleCI npm version lerna All Contributors

An experimental, comprehensive port of React Native to the web.

  • Multithreaded by default: Following the exact same architecture as React Native on mobile, all of your react components/app logic are run in web worker, leaving the main thread to entirely focus on rendering.
  • Same layout behavior as React Native on mobile: Powered by custom bindings to Yoga and compiled to WebAssembly, avoid layout inconsistencies between your native and web projects.
  • Built with the same bundler used for existing React Native platforms: Build both the "native" main and JS threads with the Metro Bundler along with all the developer experience features it provides.
  • Ecosystem compatible escape hatch to the DOM: Using the same native module bridge, expose DOM-specific APIs in a more generic way that can easily be made into a cross-platform module.

To see it in action, check out these live demos:


Why?

For the best introduction to this project, check out my talk at React Europe 2018 introducing it.


WARNING

This project is still highly experimental and many aspects of it are subject to breaking changes, continue at your own risk.


Getting Started

Getting your React Native project configured to use

react-native-dom
is a lot like the process for other 3rd party platforms such as
react-native-windows
.

If you're starting a new project from scratch: ensure you have the react-native CLI installed globally.

npm install -g react-native-cli
# or
yarn global add react-native-cli

Next, initialize your React Native project.

react-native init [project name]

Then,

cd
into your project and install
rnpm-plugin-dom
into your
devDependencies
, after which you can initialize your React Native DOM scaffolding with the
react-native dom
command.
npm install --save-dev rnpm-plugin-dom
# or
yarn add --dev rnpm-plugin-dom

Add DOM support to your React Native project

react-native dom

To run your initialized project in your browser, you can either:

  • Start the packager yourself using
    react-native start
    and navigate open your browser to
    localhost:8081/dom
  • Leverage the built-in rnpm command
    react-native run-dom
    which will start the packager and open the browser to the correct URL for you

NOTE: After setting up the DOM platform you may need to run

react-native start
with the
--reset-cache
flag at least once if you recieve an error message like
Unable to resolve module AccessibilityInfo
.

Overview of files generated by the RNPM plugin

  • dom/bootstrap.js
    - Entry point to the main thread bundle where you can set runtime configuration options, register custom native modules, or any other JS initialization you would like to do.
  • dom/entry.js
    - Entry point to the JS thread bundle, will likely only be importing your App's entry point from the top-level folder of your project.
  • dom/index.html
    - HTML file which is what references and loads the JS bundles.
  • (conditionally)
    rn-cli.config.js
    - Depending on if the project already has one, the rnpm plugin will either create it with the proper configuration options to support the DOM platform or will simply add the necessary entries to your existing one.

React Developer Tools

You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

npm install -g react-devtools

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

In order to activate the connection with the devtools app add '?devtools' to the end of your development url (e.g. localhost:8081/dom?devtools)

Building for Production

A built-in script for performing a production build is still in the backlog but here is a manual script which does so (assuming the same directory structure that gets generated from the rnpm plugin).

# Ensure development-speecific code is stripped from the bundle
export NODE_ENV=production

Make the dist directory, or the build command below will fail.

mkdir -p ./dom/dist

Build the main thread bundle

react-native bundle
--config $(pwd)/rn-cli.config.js
--dev false
--platform dom
--entry-file ./dom/bootstrap.js
--assets-dest ./dom/dist
--bundle-output ./dom/dist/bootstrap.bundle

Build the JS thread bundle

react-native bundle
--config $(pwd)/rn-cli.config.js
--dev false
--entry-file ./dom/entry.js
--platform dom
--bundle-output ./dom/dist/entry.bundle
--assets-dest ./dom/dist

Copy the index.html file to the build destination

cp dom/index.html dom/dist/index.html

The resulting folder in

dom/dist
will contain static HTML & JS ready to be deployed to your provider of choice.

Writing Native Modules/Views

Work In Progress

The API for this is going to be overhauled soon with accompanying documentation. If you want to see what it currently looks like take a look at some of the built in native modules such as AsyncLocalStorage


Repository Structure

This project is a lerna-managed monorepo with all the projects living in the

packages
folder.

Package Overview

  • react-native-dom
    - The library itself (this is most likely the package you're interested in).
  • rnpm-plugin-dom
    - RNPM plugin primarily used for bootstrapping DOM support into a React Native project.
  • rndom-*
    - Custom web components (built with svelte) used for some of the built-in widgets/views in
    react-native-dom
    .

One noticeable omission to the list of packages is the custom build of Yoga which can be found in this separate repo.

yoga-dom
is not included in this monorepo due to requiring a significantly different build environment than this repo's entirely JS codebase.

Running RNTester/Examples

To run the examples located in the

react-native-dom
source, run the following commands from the root of the monorepo:
# be sure to update the git submodules to pull the RNTester code
git submodule update --init

install dependencies

yarn && yarn compile

start the react-native packager

yarn run-examples

Then navigate to

localhost:8081/Examples
and choose which example you would like to see.

A live deployment of the RNTester project (used primarily for manually testing changes) can be found at rntester.now.sh

Contributors

Thanks goes to these wonderful people (emoji key):

|
Vincent Riemer

💻 🐛 📖 💡 🤔 🚇 📦 📢 |
Joe Goodall

📖 |
François Rosato

📖 |
Moti Zilberman

💻 📖 |
thebetterjort

📖 |
Bilo Lwabona

📖 |
Madhav Varshney

📖 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | |
Eric Rozell

💻 |
empyrical

💻 |

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.