injectedJavascript: How to pass dynamic data to webview

[rashidul0405]

My function looks like below. Unable to set data from dynamic variable when tried to inject javascript. Is there any way to make it work? ${token} and ${userId} not replaced with its value declared above.

const App = () => {

  const token = 'TOKEN'
  const userId = 158
  const runFirst = `
    window.localStorage.setItem('token', ${token})
    window.localStorage.setItem('userId', ${userId})
    true
  `

  return (
    <WebView
      injectedJavaScriptBeforeContentLoaded={runFirst}
      source={'https://...'}
    />
  )
}

[aLotlBit]

In case someone stumbles over this:

You have to wrap the variable in quotes so it's treated as a string. Like so

window.localStorage.setItem('token', '${token}') window.localStorage.setItem('userId', '${userId}'

[linonetwo]

I suggest using ` instead of ', so you can pass item with this char.

[linonetwo]

I do it alot inside https://github.com/linonetwo/react-native-postmessage-cat , you can look at src/react-native.ts to copy

[ybupro]

Hi linonetwo, so you know how webview can receive data from the web page it holds? Seems onMessage is only working when webview first send message like window.ReactNativeWebView.postMessage("Hello!"), but it cannot received data if the web page direactly send out through window.postMessage. So you know a way can fulfill this? Thank you!

[linonetwo]

I think when webview is ready, you can send bi-directional without problem. You may need to wait for it to be ready? But I haven't encounter these when using react-native-postmessage-cat, with it you can send message to main process by calling method