{"id":13394288,"url":"https://github.com/vincentriemer/react-native-dom","last_synced_at":"2025-05-14T12:09:03.709Z","repository":{"id":32446538,"uuid":"112388519","full_name":"vincentriemer/react-native-dom","owner":"vincentriemer","description":"An experimental, comprehensive port of React Native to the web.","archived":false,"fork":false,"pushed_at":"2022-12-09T00:36:23.000Z","size":15456,"stargazers_count":3247,"open_issues_count":58,"forks_count":73,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-04-04T18:01:41.639Z","etag":null,"topics":["native","react","react-native","ui-framework","webworkers"],"latest_commit_sha":null,"homepage":"https://rntester.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vincentriemer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-28T20:59:30.000Z","updated_at":"2025-03-30T17:42:49.000Z","dependencies_parsed_at":"2023-01-14T21:30:35.239Z","dependency_job_id":null,"html_url":"https://github.com/vincentriemer/react-native-dom","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentriemer%2Freact-native-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentriemer%2Freact-native-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentriemer%2Freact-native-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentriemer%2Freact-native-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vincentriemer","download_url":"https://codeload.github.com/vincentriemer/react-native-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487510,"owners_count":21112187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["native","react","react-native","ui-framework","webworkers"],"created_at":"2024-07-30T17:01:15.016Z","updated_at":"2025-04-11T21:44:44.316Z","avatar_url":"https://github.com/vincentriemer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","Web (+ NW \u0026 Electron)"],"sub_categories":["Uncategorized"],"readme":"# React Native DOM \u0026middot; [![CircleCI](https://circleci.com/gh/vincentriemer/react-native-dom.svg?style=shield\u0026circle-token=96448c580730a065cb93c0a10af0f85f6c954166)](https://circleci.com/gh/vincentriemer/react-native-dom) [![npm version](https://badge.fury.io/js/react-native-dom.svg)](https://badge.fury.io/js/react-native-dom) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg)](#contributors)\n\nAn experimental, comprehensive port of React Native to the web.\n\n- **Multithreaded by default:** Following the exact same architecture as React\n  Native on mobile, all of your react components/app logic are run in web\n  worker, leaving the main thread to entirely focus on rendering.\n- **Same layout behavior as React Native on mobile:** Powered by custom bindings\n  to Yoga and compiled to WebAssembly, avoid layout inconsistencies between\n  your native and web projects.\n- **Built with the same bundler used for existing React Native platforms:**\n  Build both the \"native\" main and JS threads with the Metro Bundler along with\n  all the developer experience features it provides.\n- **Ecosystem compatible escape hatch to the DOM:** Using the same native module\n  bridge, expose DOM-specific APIs in a more generic way that can easily be made\n  into a cross-platform module.\n\nTo see it in action, check out these live demos:\n\n- [Movies Demo](https://rndom-movie-demo.now.sh)\n- [RNTester (component playground used for manual testing)](https://rntester.now.sh)\n- [Expanding Grid Item Demo](https://github.com/vincentriemer/rndom-expanding-grid-item-demo)\n\n---\n\n## Why?\n\nFor the best introduction to this project, check out\n[my talk at React Europe 2018](https://youtu.be/aOWIJ4Mgb2k) introducing it.\n\n---\n\n## **WARNING**\n\nThis project is still highly experimental and many aspects of it are subject to\nbreaking changes, continue at your own risk.\n\n---\n\n## Getting Started\n\nGetting your React Native project configured to use `react-native-dom` is a lot\nlike the process for other 3rd party platforms such as `react-native-windows`.\n\nIf you're starting a new project from scratch: ensure you have the react-native\nCLI installed globally.\n\n```\nnpm install -g react-native-cli\n# or\nyarn global add react-native-cli\n```\n\nNext, initialize your React Native project.\n\n```\nreact-native init [project name]\n```\n\nThen, `cd` into your project and install `rnpm-plugin-dom` into your\n`devDependencies`, after which you can initialize your React Native DOM\nscaffolding with the `react-native dom` command.\n\n```\nnpm install --save-dev rnpm-plugin-dom\n# or\nyarn add --dev rnpm-plugin-dom\n\n# Add DOM support to your React Native project\nreact-native dom\n```\n\nTo run your initialized project in your browser, you can either:\n\n- Start the packager yourself using `react-native start` and navigate open your\n  browser to `localhost:8081/dom`\n- Leverage the built-in rnpm command `react-native run-dom` which will start the\n  packager and open the browser to the correct URL for you\n\n**NOTE:** After setting up the DOM platform you may need to run\n`react-native start` with the `--reset-cache` flag at least once if you recieve\nan error message like `Unable to resolve module AccessibilityInfo`.\n\n### Overview of files generated by the RNPM plugin\n\n- `dom/bootstrap.js` - Entry point to the main thread bundle where you can set\n  runtime configuration options, register custom native modules, or any other JS\n  initialization you would like to do.\n- `dom/entry.js` - Entry point to the JS thread bundle, will likely only be\n  importing your App's entry point from the top-level folder of your project.\n- `dom/index.html` - HTML file which is what references and loads the JS\n  bundles.\n- (conditionally) `rn-cli.config.js` - Depending on if the project already has\n  one, the rnpm plugin will either create it with the proper configuration\n  options to support the DOM platform or will simply add the necessary entries\n  to your existing one.\n\n---\n\n## React Developer Tools\n\nYou can use\n[the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools)\nto debug the React component hierarchy. To use it, install the react-devtools\npackage globally:\n\n```\nnpm install -g react-devtools\n```\n\nNow run react-devtools from the terminal to launch the standalone DevTools app:\n\n```\nreact-devtools\n```\n\nIn order to activate the connection with the devtools app add '?devtools' to the\nend of your development url (e.g. localhost:8081/dom?devtools)\n\n## Building for Production\n\nA built-in script for performing a production build is still in the backlog but\nhere is a manual script which does so (assuming the same directory structure\nthat gets generated from the rnpm plugin).\n\n```shell\n# Ensure development-speecific code is stripped from the bundle\nexport NODE_ENV=production\n\n# Make the dist directory, or the build command below will fail.\nmkdir -p ./dom/dist\n\n# Build the main thread bundle\nreact-native bundle \\\n  --config $(pwd)/rn-cli.config.js \\\n  --dev false \\\n  --platform dom \\\n  --entry-file ./dom/bootstrap.js \\\n  --assets-dest ./dom/dist \\\n  --bundle-output ./dom/dist/bootstrap.bundle\n\n# Build the JS thread bundle\nreact-native bundle \\\n  --config $(pwd)/rn-cli.config.js \\\n  --dev false \\\n  --entry-file ./dom/entry.js \\\n  --platform dom \\\n  --bundle-output ./dom/dist/entry.bundle \\\n  --assets-dest ./dom/dist\n\n# Copy the index.html file to the build destination\ncp dom/index.html dom/dist/index.html\n```\n\nThe resulting folder in `dom/dist` will contain static HTML \u0026 JS ready to be\ndeployed to your provider of choice.\n\n---\n\n## Writing Native Modules/Views\n\n### _Work In Progress_\n\nThe API for this is going to be overhauled soon with accompanying documentation.\nIf you want to see what it currently looks like take a look at some of the built\nin native modules such as\n[AsyncLocalStorage](../master/packages/react-native-dom/ReactDom/modules/RCTAsyncLocalStorage.js)\n\n---\n\n## Repository Structure\n\nThis project is a lerna-managed monorepo with all the projects living in the\n`packages` folder.\n\n### Package Overview\n\n- `react-native-dom` - The library itself (this is most likely the package\n  you're interested in).\n- `rnpm-plugin-dom` - RNPM plugin primarily used for bootstrapping DOM support\n  into a React Native project.\n- `rndom-*` - Custom web components (built with\n  [svelte](https://svelte.technology)) used for some of the built-in\n  widgets/views in `react-native-dom`.\n\nOne noticeable omission to the list of packages is the custom build of Yoga\nwhich can be found in\n[this separate repo](https://github.com/vincentriemer/yoga-dom). `yoga-dom` is\nnot included in this monorepo due to requiring a significantly different build\nenvironment than this repo's entirely JS codebase.\n\n---\n\n### Running RNTester/Examples\n\nTo run the examples located in the `react-native-dom` source, run the following\ncommands from the root of the monorepo:\n\n```sh\n# be sure to update the git submodules to pull the RNTester code\ngit submodule update --init\n\n# install dependencies\nyarn \u0026\u0026 yarn compile\n\n# start the react-native packager\nyarn run-examples\n```\n\nThen navigate to `localhost:8081/Examples` and choose which example you would\nlike to see.\n\nA live deployment of the RNTester project (used primarily for manually testing\nchanges) can be found at [rntester.now.sh](https://rntester.now.sh)\n\n## Contributors\n\nThanks goes to these wonderful people\n([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1398555?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVincent Riemer\u003c/b\u003e\u003c/sub\u003e](http://vincentriemer.com)\u003cbr /\u003e[💻](https://github.com/vincentriemer/react-native-dom/commits?author=vincentriemer \"Code\") [🐛](https://github.com/vincentriemer/react-native-dom/issues?q=author%3Avincentriemer \"Bug reports\") [📖](https://github.com/vincentriemer/react-native-dom/commits?author=vincentriemer \"Documentation\") [💡](#example-vincentriemer \"Examples\") [🤔](#ideas-vincentriemer \"Ideas, Planning, \u0026 Feedback\") [🚇](#infra-vincentriemer \"Infrastructure (Hosting, Build-Tools, etc)\") [📦](#platform-vincentriemer \"Packaging/porting to new platform\") [📢](#talk-vincentriemer \"Talks\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8888799?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoe Goodall\u003c/b\u003e\u003c/sub\u003e](https://uk.linkedin.com/in/joegoodall)\u003cbr /\u003e[📖](https://github.com/vincentriemer/react-native-dom/commits?author=joegoodall1 \"Documentation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/31624379?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFrançois Rosato\u003c/b\u003e\u003c/sub\u003e](https://github.com/frosato-ekino)\u003cbr /\u003e[📖](https://github.com/vincentriemer/react-native-dom/commits?author=frosato-ekino \"Documentation\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/2246565?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMoti Zilberman\u003c/b\u003e\u003c/sub\u003e](https://github.com/motiz88)\u003cbr /\u003e[💻](https://github.com/vincentriemer/react-native-dom/commits?author=motiz88 \"Code\") [📖](https://github.com/vincentriemer/react-native-dom/commits?author=motiz88 \"Documentation\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/983071?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ethebetterjort\u003c/b\u003e\u003c/sub\u003e](https://github.com/thebetterjort)\u003cbr /\u003e[📖](https://github.com/vincentriemer/react-native-dom/commits?author=thebetterjort \"Documentation\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/3089012?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBilo Lwabona\u003c/b\u003e\u003c/sub\u003e](https://github.com/bilo-io)\u003cbr /\u003e[📖](https://github.com/vincentriemer/react-native-dom/commits?author=bilo-io \"Documentation\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/40002855?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMadhav Varshney\u003c/b\u003e\u003c/sub\u003e](https://github.com/madhavarshney)\u003cbr /\u003e[📖](https://github.com/vincentriemer/react-native-dom/commits?author=madhavarshney \"Documentation\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1106239?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEric Rozell\u003c/b\u003e\u003c/sub\u003e](https://github.com/rozele)\u003cbr /\u003e[💻](https://github.com/vincentriemer/react-native-dom/commits?author=rozele \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/2847127?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eempyrical\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/empyrical)\u003cbr /\u003e[💻](https://github.com/vincentriemer/react-native-dom/commits?author=empyrical \"Code\") |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the\n[all-contributors](https://github.com/kentcdodds/all-contributors)\nspecification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentriemer%2Freact-native-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvincentriemer%2Freact-native-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentriemer%2Freact-native-dom/lists"}