I am trying to extract the POST response from the WebView in React Native but onMessage doesn't seem to solve this. The code below works to navigate a website using the WebView but it does not console.log anything. Is there anything I'm missing or misreading in the documentation for WebView?
import { WebView } from "react-native-webview";
return (
<WebView
source={{
uri: `https://www.example.com/`
}}
onMessage={(event)=>console.log(event)}
/>
);
The onMessage function is used for Web and communication.
You can use window.ReactNativeWebView.postMessage
Example
const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;
<WebView
source={{
uri:
'https://github.com/react-native-community/react-native-webview',
}}
injectedJavaScript={runFirst}
onMessage={(event)=> console.log( "On Message", event.nativeEvent.data )}
/>
Related
I have a simple webview,see below;
<WebView
source={{ uri: 'https://example.com/',
headers: {
Cookie: 'cookies=dismiss; ui=darkmode',
},
}}
originWhitelist={['https://*']}
allowsFullscreenVideo={true}
pullToRefreshEnabled={true}
sharedCookiesEnabled={true}
geolocationEnabled={true}
/>
Now with inside my webview people can have profiles and links to third-party websites, how do I make those links to use an external web browser or expo web browser instead of loading them in my webview.
Using expo for the project.
if that url differs from the original domain, stops the loading, preventing page change, and opens it in the OS Navigator instead.
import * as Linking from 'expo-linking';
const webviewRef = useRef(null);
<WebView
ref={webviewRef}
source={{ uri : 'https://example.com/' }}
onNavigationStateChange={(event) => {
if (!event.url.includes("example.com")) {
webviewRef.stopLoading();
Linking.openURL(event.url);
}
}}
/>
I need to avoid sending cookies from my react native video implementation, but can't change the credentials behavior:
import Video from 'react-native-video';
...
const App = () => {
...
return (
<View>
<Video
source={{
uri: url,
type: 'm3u8',
credentials={false}
...
/>
</View>
);
}
I'm still getting the Cookie header on server...
Does the WebView work in IOS simulator?
The code below does not return an error, but also doesn't display anything.
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyTest extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
export default MyTest;
Thanks
WebView work well in my simulator. My code:
<WebView
useWebKit={true}
style={{flex:1}}
source={{uri:url}}
startInLoadingState={true}
renderLoading={()=>(<ActivityIndicator size='large' color={COLOR_STANDARD}
style={{marginTop:100}} />)}>
</WebView>
I want to contribute here for those getting white screen on ios. First the webview is inside scrollview because I have other content. I know it is adviced for webview not to be inside any component. I was battling this for weeks until I came upon James Liu's. I was running it on expo client (ios) and was getting white screen. Here is my code before I saw his answer.
contentContainerStyle={{
flexGrow: 1,
}}>
<WebView
ref={ref => (this.webview = ref)}
source={{uri: currentSite}}
style={{ height:550}}
scrollEnabled={true}
startInLoadingState={true}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
javaScriptEnabled = {true}
domStorageEnabled = {true}
startInLoadingState={false}
onLoad={() => this.hideSpinner()}
injectedJavaScript={jsCode}
onMessage={event => {
//Html page
const wishData = event.nativeEvent.data;
this._getProductName(wishData);
this._getProductPrice(wishData);
}}
/>
</ScrollView>
All I needed to add is useWebKit={true} and from the documentation it says:
useWebKit->If true, use WKWebView instead of UIWebView. And this props is ios specific. Furthermore, I googled and found that WKWebView is more recent than UIWebView ( I don't know more about this).
For me, the solution was to wrap my component that returned my WebView in a View with a set height OUTSIDE the file with the component that returns my WebView.
The wrapper View with the height should be in the file that component with the WebView was imported into.
It took several takes and prayer but I finally found it out muahahaha!
The real problem is in the property startInLoadingState, you have to set this to true:
<WebView
startInLoadingState={true} />
(also posted in https://github.com/facebook/react-native/issues/20989)
I am trying to render WebView in a React Native application, and I get "Invalid CORS request" error.
I have read several discussions of this (e.g. Android Webview: disable CORS), but none is involving React Native. Is there any way to overcome this problem in React Native?
Here is the render code:
return (
<View style={styles.container}>
<WebView style={styles.webview}
source={{
uri: uri,
method: 'POST',
body: `apiKey=${apiKey}&broker=${broker}` }}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={false}
scalesPageToFit={true} />
</View>
);
I want to get html code with webview in react native my current code only can call alert function after its injected. i want to get a specific div html content.
const jsCode = "window.postMessage(alert(document.getElementById('result')))"
<WebView
style={{width:Dimensions.get('window').width,height:Dimensions.get('window').height}}
javaScriptEnabled ={true}
injectedJavaScript={jsCode}
source={{uri: this.state.uri}}
/>
window.postMessage causes the WebView.onMessage-handler to get called with the data.
So this should work:
const jsCode = "window.postMessage(document.getElementById('gb-main').innerHTML)"
<WebView
javaScriptEnabled={true}
injectedJavaScript={jsCode}
source={{uri: 'http://www.google.com/'}}
onMessage={event => console.log('Received: ', event.nativeEvent.data)}
/>