React Native Webview how to use injectJavascript

Question

I'm trying to set a global variable within a webpage loaded by a react-native WebView. I'm trying to set the global variable using the injectJavascript prop, but I'm getting an error telling me that injectJavascript is expected to be a function.

How do I format the injectJavaScript function to pass a message on to the loaded webpage as a global variable? Thank you.

class Browser extends React.Component {

  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}

Answer 1

Please try this:

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`window.testMessage = "hello world"`}
/>

injectedJavaScript is the prop that injects JS into the web view, once, when it loads. This is what you seem to want.

How injectJavascript is used on the other hand? it's by calling it on the ref of the webview to inject more JS programmatically on the fly. In this case it could look something like this for example:

this.webview.injectJavascript(`window.reactComponent.forceUpdate();true;`)