React Native - Webview call React Native function

Question

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

What exactly you want to achieve? React native is powerful which is using native android or ios API to give strength to application build with React native. There might be some other good way to achieve without using WebView. — Satish Sojitra, Feb 06 '17 at 17:29

score 7 · Answer 1 · answered Aug 19 '16 at 09:32

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' 
})

Is it just me or does this throw `ERR_UNKNOWN_URL_SCHEME` on android? — Taylor A. Leach, Jul 09 '20 at 22:41

score 5 · Answer 2 · edited Jan 05 '23 at 20:58

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")

import {WebView} from 'react-native-webview' – Rohit Kaushal Jul 22 '21 at 14:03 — Rohit Kaushal, Jul 22 '21 at 14:03

score 2 · Answer 3 · edited May 23 '17 at 12:26

2

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

edited May 23 '17 at 12:26

Community

1
1

answered May 11 '17 at 21:15

Ismail Iqbal

2,774
1
25
46

score 0 · Answer 4 · answered Aug 19 '16 at 11:38

0

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

answered Aug 19 '16 at 11:38

Hi Sidali Hallak, which react native version u using? Because i'm using 0.30 and install it. It's cause this issue https://github.com/alinz/react-native-webview-bridge/issues/137 – ChokYeeFan Aug 23 '16 at 02:35
i was using 0.25 , i finished the project two months ago – Aug 24 '16 at 22:48

score -3 · Answer 5 · answered Aug 31 '17 at 10:39

-3

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.

answered Aug 31 '17 at 10:39

Krishnendu Bhattacharyya

173
1
6

React Native - Webview call React Native function

5 Answers5