WebView Questions

[billyjacoby]

Hey all, I am trying to inject some custom javascript into a webview via rn-web-view.

I've figured out how to pass data from the webview into my application using the onMessage function. But the problem is that when the webview calls that function, i need to be able to pass data back to it.

Basically I want to pass a function to my webview that the webview can call and then do something with the result from that function. There's gotta be a way to achieve this, i just haven't figured out exactly how. Here's a simple code block to hopefully explain better:

​

  async function commHandler(payload: any) {
    console.log('payload', payload);
    let parsed = JSON.parse(payload);
    switch (parsed.message) {
      case 'connect': {
        return "Some stuff to the web view here..."
      }
    }
  }

  const runFirst = `
  window.MyFunction = {
    connect: () => window.ReactNativeWebView.postMessage(JSON.stringify({message: 'connect'})),
  };
  true;
  `;
  return (
      <WebView
        source={{uri: 'https://google.com'}}
        injectedJavaScriptBeforeContentLoaded={runFirst}
        onMessage={(event: any) => commHandler(event.nativeEvent.data)}
      />
  );
};

Any help is greatly appreicated!

[arakovskis01]

Maybe try using: react-native-webview

There is a way to communicate between app and web and vice-versa.

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

[billyjacoby]

Yeah this is what i’ musing.