CODEWITHSUNDEEP
javascriptreact-native
ChokYeeFan
ChokYeeFan

Reputation: 293

React Native - Webview call React Native function

Is that possible create a function inside the WebView component, trigger React Native function?

Upvotes: 11

Views: 11645

Answers (5)

Rohit Kaushal
Rohit Kaushal

Reputation: 558

use onMessage eventListner on <WebView/>

<WebView onMessage={onMessage} ... />

/** on message from webView -- window.ReactNativeWebView?.postMessage(data) */
  const onMessage = event => {
    const {
      nativeEvent: {data},
    } = event;

    if (data === 'goBack') {
      navigation.goBack();
    } else if (data?.startsWith('navigate')) {
      // navigate:::routeName:::stringifiedParams
      try {
        const [, routeName, params] = data.split(':::');
        params = params ? JSON.parse(params) : {};
        navigation.navigate(routeName, params);
      } catch (err) {
        console.log(err);
      }
    }
  };

use this in your HTML to post message event

window.ReactNativeWebView?.postMessage("data")

Upvotes: 5

Krishnendu Bhattacharyya
Krishnendu Bhattacharyya

Reputation: 173

I am not sure, but my opinion is -

You can not. Webview can load only js part which we can define in Webview component. This is totally separate than other components, it is only just a viewable area.

Upvotes: -3

Ismail Iqbal
Ismail Iqbal

Reputation: 2580

You could inject a javascript function to the webview on load and then use onMessage to get response from the function you injected more info IN Here

Upvotes: 2

user2601376
user2601376

Reputation:

yes it's possible , it existe a package for that react-native-webview-bridge. I used it heavily in production and it works perfectly.

Upvotes: 0

Xeijp
Xeijp

Reputation: 873

It's possible but I'm not sure if it's the only way to do this.

Basically you can set an onNavigationStateChange event handler, and embed function call information in navigation url, here's an example of the concept.

In React Native context

render() {

    return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} />
}

_onURLChanged(e) {

    // allow normal the natvigation
    if(!e.url.startsWith('native://'))
        return true
    var payload = JSON.parse(e.url.replace('native://', ''))
    switch(e.functionName) {
        case 'toast' :
            native_toast(e.data)
        break
        case 'camera' :
            native_take_picture(e.data)
        break
    }
    // return false to prevent webview navitate to the location of e.url
    return false

}

To invoke native method, use this just trigger webview's navigation event and embed the function call information in URL.

window.location = 'native://' + JSON.stringify({ 
    functionName : 'toast', data : 'show toast text' 
})

Upvotes: 7

Related Questions