React-native: Ability to Inject a React Component into WebView?

Created on 23 Jul 2016 · 6Comments · Source: facebook/react-native

While the injectedJavaScript allows for the passing of flat, ES5 javascript to a WebView, is there a way to pass in a web React component to WebView? By that I mean, pass it in locally by import (not pointing to a webpage online)? Something along the lines of:

import MySuperComplexD3WebComponent from 'somewhere';

<WebView
  injectedJavaScript={<MySuperComplexD3WebComponent data={data} />}
/>

This would allow the WebView component to serve as a true renderer for normal react web components rather than having to rely on an http connection to present an already-rendered component living somewhere online.

Locked

Source

joncursi

Most helpful comment

Is there a way to load an npm dependency into the web view? - other than as a string wrapped in a script tag?

ShMcK on 31 Mar 2017

👍7

All 6 comments

Note: the component is also dependent on 3rd party javascript libraries. How does one load those 3rd party libs to the DOM so that injectedJavaScript has access to them?

Perhaps another solution could be the ability to write a complete html document locally that encapsulates HTML, vendor dependencies, and custom JavaScript...

<html>

  <head>
    <script src='//d3js.org/d3.v4.min.js'></script>
  </head>

  <body>
    <div>...</div>
    <script>
        // custom javascript goes here
    </script>
  </body>

</html>

and then be able to pass that document locally into the WebView component via relative path:

<WebView
  source={{
    url: './local/path/to/document.html',
  }}
/>

However, when trying to load from a relative path, I get the following error:

screen shot 2016-07-23 at 2 09 54 am

Any ideas?

joncursi on 23 Jul 2016

Per https://github.com/facebook/react-native/issues/505, it looks like:

<WebView
  source={require('./asd.html')}
/>

is a viable, cross-platform workaround. Would love to be able to use a React Component directly rather than a flat HTML document tho.

joncursi on 23 Jul 2016

I think it's better if you use a custom HTML file to achieve what you want. It's unlikely that this kind of thing will be supported in React Native core, since the focus is more on improving the native components rather than support interop between <WebView> and RN code.

This shouldn't be very difficult to do with a third party component. Please publish your component to NPM if you manage to do so :D

I'm closing this issue for now. Please file it in product pains if you still think that this is an important feature and should be part of the core.

satya164 on 23 Jul 2016

For anyone looking to achieve what I was, I was able to get it to work by interpolating HTML and JavaScript directly in my React component and feeding the output to WebView. Any external dependencies are loaded via script tags in the HTML:

class LineChart extends Component {
  render() {
    const {
      decimalChange,
      height,
      id,
      ohlcData,
      showAxes,
      showGridlines,
      width,
    } = this.props;

    const chartData = JSON.stringify(
      ohlcData.get('data').toJS()
    );

    const injectScript = `
      var chart = function () {
        ...
        // d3 code goes in here
        ...
      }

      chart();
    `;

    const html = `
      <!DOCTYPE html>
      <html>

        <head>

          <meta charset="utf-8">

          <style>
            ...
            // chart CSS goes in here
            ...
          </style>

          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> // d3 is loaded here
</script>

        </head>

        <body>
          <div
            id="${id}"
            style="width: ${width}px; height: ${height}px;"
          ></div>
        </body>

      </html>
    `;

    return (
      <WebView
        injectedJavaScript={injectScript}
        source={{
          html,
        }}
        startInLoadingState={true}
        style={{
          height,
          width,
        }}
      />
    );
  }
}

export default LineChart;

joncursi on 24 Jul 2016

👍1

Is there a way to load an npm dependency into the web view? - other than as a string wrapped in a script tag?

ShMcK on 31 Mar 2017

👍7

onMessage API has anything to do with this injectedJavaScript??