React Native DOM WebView

Write React (DOM) code alongside your React Native code and render it directly in React Native WebView

Installation

1. Install dependencies

npm install react-native-dom-webview react-dom

# or

yarn add react-native-dom-webview react-dom

2. Modify Babel Configuration

In your React Native babel config (.babelrc, babel.config.js, etc.), add the following plugins (.babelrc for example):

{
  "presets": [
    /* your presets */
  ],
  "plugins": [
    /* your plugins */
    [
      "react-native-dom-webview/babel",
      {
        "packagerPort": 8081
      }
    ],
    "preval"
  ]
}

packagerPort is where your React Native packager (aka Metro) is listening. For common React Native projects, it is 8081; for Expo, 19001.

Usage

1. Write a React DOM component

// web/Example.jsx for example

import React from 'react';

export default function Example() {
  return <div>example</div>;
}

2. Render your root component with react-dom

// web/App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example';

function App() {
  return <Example />;
}

ReactDOM.render(<App />, document.getElementById('root'));

3. Import the DOM index and pass DOM macro wrapped object to DomWebview

// screens/MyScreen.jsx

import React from 'react';
import DomWebview from 'react-native-dom-webview';

const webApp = DOM('./web/App');

export default function MyScreen() {
  return <DomWebview app={webApp} />;
}

Caveats

preval hot reload

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT