React Views in React Native

Here is the dream:

import { 
  View,
  Component,
} from "react-native";
// plugin that supports regular react components
import ReactView from "react-native-react-view";
// react component
import Card from "../components/card";

export default class Thing extends Component {
  render() {
    <View>
      <ReactView>
        <Card />
      </ReactView>
    </View>
  }
}

This shows a regular React component rendered inside a React Native application. Currently, React Native does not support this behavior (see this). They are waiting for a community plugin. We can be that plugin.

Plugin

React Native currently has a WebView component that will render a web content. It will take a url, or just static HTML. It is possible to load React and Babel assets from the local file system. My thought is to build a component on top of this, or similar to this, that can take a vanilla React component via props. This component can be ES6, and then the assets in the plugin can transpile via <script type="text/babel">. Something like this:

<html>
  <head>
    <meta charset="utf-8" />
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      // inject react code here
    </script>
  </body>
</html>

We should be able to connect the redux store and other things above this component, and pass it down. Possible utilizing a bridge between react native and the webview like so.

Proof of Concept

In testing, the webview model will give us the native transitions that we want. They look exactly like you would expect. Swiping and all.

The catch is the React Native Webview component expects a fully functioning web page on each render. So, we need a component that fully contains the React web environment, abstracts it, and lets you just pass in a vanilla React component. It should include all the assets locally for speed, and it should support injection of the store and other things that need to be persistent.

I got a version of this working, but it was not elegant. I think with about a week of work, I could have something really great that the community really wants, and that makes the dream at the beginning of this a reality.

Then, we could start building our React Native application using the current React components we have:

1.0 Cordova app

1.1 Same React components with React native shell and nav and transitions

1.2andbeyond slowly swap out React components for React Native components as needed

...sharing a ton of code along the way.

johnthepink/thoughts.md

React Views in React Native

Plugin

Proof of Concept