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);
}
}}
/>
Related
I have a simple web view setup within react-native
I have nav bar at the bottom and the links open different screens with web views, however the pages save state. SO let's say I navigate to an internal page on the website (so like the about page of the website) when I go onto another screen and come back to the screen - the url state is saved. How can I make it so when I click on the nav button it always redirects to me to the initial page loaded in the web view...I've committed links etc as its sensitive data.
USE CASE:
User opens app, is greeted with a homepage - they can click links on the homepage which takes them to another part of the web page - if they navigate away from the Home Screen (within the app) then go back to the Home Screen on the app - the web view is on the last internal page they were on.
I want it so when they press the home button on the nabber on the app it effectively resets the web view?
Thanks
Code below:
const url = "websitelinkere.com/pageLink.html";
...
<View style={{ flex: 1 }}>
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
mixedContentMode={'compatibility'}
source={{
//meta type & http header locking for aded security
uri: url, //<-- I want it to always load pageLink.html <-- even if I've navigated to pageLinkDifferent.html
}}
onMessage={(event) => {}}
/>
</View>
Navbar (example link):
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Image style={homePage.navImage} source={journalHomeImage}/>
</TouchableOpacity>
</View>
I've tried researching the issue on stack overflow and online but haven't found a solution that works for me
you can use useFocusEffect in react-navigation
const INITIAL_URL = "websitelinkere.com/pageLink.html";
...
const webviewRef = useRef();
const [url,setUrl] = useState(INITIAL_URL)
...
useFocusEffect(
React.useCallback(() => {
if(webviewRef.current) {
setUrl(INITIAL_URL);
webviewRef.current.reload();
}
}, [])
);
...
<Webview
ref={webviewRef}
source={{ uri }}
/>
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...
I have a Single-Sign-On site opened in a webView. After the user logs in I need to take a cookie to request a token from the API and use it in the application for all the other requests.
This all works fine on the Android, but one the iOS there are no cookies when I do a request for the token.
WebView is configured to use shared cookie storage:
<WebView
source={{ uri: loginUrl }}
onMessage={handleSsoLogin}
injectedJavaScriptBeforeContentLoaded={JS_INTERFACE}
sharedCookiesEnabled={true}
/>
And if I inspect webView with devTools I can see the cookies. Also, if I visit SSO site again, I'm already logged it. So, cookies are persisted and used by webView. They are just not used by fetch and CookieManager doesn't access them:
const cookies = await CookieManager.get(url);
console.log({ cookies });
...
{"cookies": {}}
So, the question is, how can I get these cookies from the webView?
You need to use import CookieManager from "#react-native-community/cookies";
and in webview, you can do like this :
<WebView
cacheEnabled={false}
ref={ref => (this.webView = ref)}
source={{
uri: "http://yoururl.com"
}}
style={{ marginTop: 20 }}
onNavigationStateChange={this.navChange}
thirdPartyCookiesEnabled={true}
/>
{this.state.loading && (
<ActivityIndicator
color={"blue"}
style={{ flex: 20 }}
size={"large"}
/>
navChange = e => {
console.log("e", e);
this.setState({ loading: e.loading });
if (e.url == "http://yoururl.com/landing") {
CookieManager.getAll(true).then(res => {
console.log("CookieManager.getAll =>", res);
if (!!res) {
console.log({res})
CookieManager.clearAll(true).then(res => {
console.log("LoginScreen CookieManager.clearAll =>", res);
});
}
});
}
};
From the React Native WebView to be able to open the related platform of Deep Link Scheme.
For example:
When the website I am viewing is trying to trigger another app.
<WebView
style={styles.container}
originWhitelist={['*']}
bounces={false}
allowFileAccess={true}
domStorageEnabled={true}
javaScriptEnabled={true}
geolocationEnabled={true}
allowFileAccessFromFileURLS={true}
allowUniversalAccessFromFileURLs={true}
onNavigationStateChange={onNavigationStateChange}
source={{
uri:
'http://onelink.to/6vdhky',
}}
/>
https://github.com/react-native-community/react-native-webview/issues/750
https://github.com/react-native-webview/react-native-webview/pull/1136
image ref one
image ref two
I tried Linking.sendIntent() and Editing shouldOverrideUrlLoading() function in RNCWebViewManager.java but didn’t make it work. I finally ended up with https://github.com/lucasferreira/react-native-send-intent#readme
Here’s my code like:
onShouldStartLoadWithRequest={(request) => {
const { url } = request;
if (
url.startsWith('intent://') &&
url.includes('scheme=kbzpay') &&
Platform.OS === 'android'
) {
SendIntentAndroid.openChromeIntent(url);
return false;
}
return false;
}}
VAT/BTW number (optional)
Plus3dhedset
VAT/BTW number must be in NL123456789B12 format.
https://domains.google.com/registrar?favorites=0e70b499-a0f1-4bc6-850a-793c6f8392c7
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 )}
/>