Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to Inject a React Component into WebView?

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

7reactions

ShMcKcommented, Mar 30, 2017

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

1reaction

joncursicommented, Jul 24, 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;

Top Results From Across the Web

How to inject React Component inside WebView (react-native ...

You can render a React component to its initial HTML with renderToString() and then display it inside your WebView like so:

Injecting JavaScript into React Native Webview | by Idan Levi

Let's move on to another more interesting ability, get an answer from the Webview after a particular trigger. We'll use postMessage & onMessage ......

Injecting Custom JavaScript Into React Native Webview

This tutorial explains how to inject custom javascript in webview component in react native application.The injectedJavaScript is a custom ...

Injecting Custom JavaScript into React Native's Webview

First, checkout the documentation about webview component in React native. I was experimenting with the prop named "injectedJavaScript" .

React native webview: The comprehensive guide you need to ...

Firstly, simply speaking, React native webview is a component that allows your React Native app to load webpages. Besides, in the previous time,...