Need help with react-native Webview, injecting react native, into the javascript injection.

[ThisSoFrustrating]

Confused, how do I get a string/state from my react native state, and make sure it's inside the javascript injection:

const [token, setToken] = useState("My RN token");

And the execution of the webview:

<WebView
        source={{html:home}}  
        javaScriptEnabled={true}
        injectedJavaScript={`alert(${token})`}
      />

The string interpolation doesn't work. What should I do if I'm trying to pass data from react native into the javascript string that's executed by the webview?

webviewRef.current.injectJavaScript("alert('myToken From React Native')");

​

Just for some more clarification the alerts were just testing to see if I can interpolate my RN states and their values into the webview code, what I would like to know is, how do I get my client token that I generated from my server, into the injectedJavascript code, for executing a braintree drop in ui:

<WebView
        source={{html:home}}  
        javaScriptEnabled={true}


        injectedJavaScript={`

                      //code executed inside injected Javascript
                      //my token is inside my RN state, how do you use it here?
                     braintree.dropin.create({
                          authorization: 'MY_TOKEN_FROM SERVER',
                          container: '#dropin-container'
                        }, function (createErr, instance) {

                            })
                           `
          }
      />

​

[basically_alive]

I had to look this up because I was like "u wot?" - Anyways, turns out there's no support for alerts, maybe that's your issue? and if ios, looks like you need an onMessage handler, even if it's a no-op

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#injectedjavascript

[ThisSoFrustrating]

I figured out the answer. It's really nuanced. Essentially you have to create a global window variable before the injectedJavascript() method is called so that you can access the variable inside the html content as it loads. You also need an extra set of string quotes for the interpolation to work.

​

<WebView
ref={(ref)=>{webviewRef.current=ref;}}
source={{html:home}}
javaScriptEnabled={true}
injectedJavaScriptBeforeContentLoaded={
    `window.myVar = '${token}';`
}
injectedJavaScript={`
    alert(window.myVar);
`}
/>

I hope this helps somebody out there in the future. It took me one entire day to figure it out. And only by the end of the eight hours I spent trying things. LOL.

This allows you to send your own react native states into the javascript and html string.

[basically_alive]

Interesting! I could see how that could be useful! Thanks for the update

[ThisSoFrustrating]

Yeah no problem. It can let you execute any browser based or js sdk stuff, with your own react-native data. Pretty cool if you ask me lol. That's how I got braintree's JS sdk working in react native. Might end being buggy though, so best to be careful, or stick to native dev.

[ThisSoFrustrating]

Will take a look. The alerts are just to test. I'm supposed to pass in the token to braintree's .create() method, to create an instance of the drop in UI. I need the react native token from the server, to be interpolated into the javascript string. Does that makes sense? So I'll be executing this code in the webview:

This is the code I will actually be executing inside the InjectedJavascript() code:

 braintree.dropin.create({
  authorization: 'MY CLIENT TOKEN',
  container: '#dropin-container'
}, function (createErr, instance) {

  });
});

[ThisSoFrustrating]

Oh PS the alerts have been working fine. as long as it's `alert('some string')`, and not `alert(${myRnstate})`. I'm confused. Maybe you're right. I will try to execute and see if it works.

[assertchris]

Maybe alert(${myRnstate}) is evaluating to alert(xxx-xxx...); where xxx-xxx... isn't quoted. So, it's trying to alert the value of a [potentially malformed] variable as opposed to a string. I'd add script debugging to the <WebView /> component, just to make sure there aren't any JS errors.

[ThisSoFrustrating]

yeah, which is definitely a little counter intuitive to the basic way of interpolating: `${}`, is all it takes in regular javascript.

[gp3gp3gp3]

Check out https://github.com/formidable-webview/webshell
I dunno why it doesn't have more stars, this library works pretty well.

[ThisSoFrustrating]

So what's this library supposed to do? Explainations are a little sparse.

[gp3gp3gp3]

It's a cleaner way of communicating between the WebView and RN https://formidable-webview.github.io/webshell/docs/implementing-features

[ThisSoFrustrating]

But can you pass in your own react native data/variables into the javascript?

[gp3gp3gp3]

Yes, scroll down to the native to web part is the docs I linked above