Home

Awesome

React Native DOM Β· CircleCI npm version lerna All Contributors

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

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:

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


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

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):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->
<img src="https://avatars2.githubusercontent.com/u/1398555?v=4" width="100px;"/><br /><sub><b>Vincent Riemer</b></sub><br />πŸ’» πŸ› πŸ“– πŸ’‘ πŸ€” πŸš‡ πŸ“¦ πŸ“’<img src="https://avatars0.githubusercontent.com/u/8888799?v=4" width="100px;"/><br /><sub><b>Joe Goodall</b></sub><br />πŸ“–<img src="https://avatars3.githubusercontent.com/u/31624379?v=4" width="100px;"/><br /><sub><b>FranΓ§ois Rosato</b></sub><br />πŸ“–<img src="https://avatars2.githubusercontent.com/u/2246565?v=4" width="100px;"/><br /><sub><b>Moti Zilberman</b></sub><br />πŸ’» πŸ“–<img src="https://avatars2.githubusercontent.com/u/983071?v=4" width="100px;"/><br /><sub><b>thebetterjort</b></sub><br />πŸ“–<img src="https://avatars0.githubusercontent.com/u/3089012?v=4" width="100px;"/><br /><sub><b>Bilo Lwabona</b></sub><br />πŸ“–<img src="https://avatars2.githubusercontent.com/u/40002855?v=4" width="100px;"/><br /><sub><b>Madhav Varshney</b></sub><br />πŸ“–
<img src="https://avatars0.githubusercontent.com/u/1106239?v=4" width="100px;"/><br /><sub><b>Eric Rozell</b></sub><br />πŸ’»<img src="https://avatars0.githubusercontent.com/u/2847127?v=4" width="100px;"/><br /><sub><b>empyrical</b></sub><br />πŸ’»
<!-- ALL-CONTRIBUTORS-LIST:END -->

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