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– Satish Sojitra2017-02-06 17:29:09 +00:00Commented Feb 6, 2017 at 17:29
-
Can u be more specific about your requirementsIsmail Iqbal– Ismail Iqbal2017-02-28 13:47:38 +00:00Commented Feb 28, 2017 at 13:47
Add a comment
|
5 Answers
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'
})
1 Comment
Taylor A. Leach
Is it just me or does this throw
ERR_UNKNOWN_URL_SCHEME on android?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")
1 Comment
Rohit Kaushal
import {WebView} from 'react-native-webview'
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
Comments
yes it's possible , it existe a package for that react-native-webview-bridge. I used it heavily in production and it works perfectly.
2 Comments
ChokYeeFan
Hi Sidali Hallak, which react native version u using? Because i'm using 0.30 and install it. It's cause this issue github.com/alinz/react-native-webview-bridge/issues/137
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.
