React Native - Webview call React Native function

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

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

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

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

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.

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue