In react native webview, when I navigate to a page the onNavigationStateChange returns url of the previous page? I think its an issue and posted it to github react native issues.
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange=
{this._onNavigationStateChange.bind(this)}
startInLoadingState = {true}
source = {{uri: 'https://www.youtube.com' }}
/>
_onNavigationStateChange(webViewState)
{
this.setState(
{
youtube_video_url: webViewState.url
})
}
When I print this youtube_video_url, it is of the previous page or previous browsed video.
Sadly, all the webview methods like onNavigationStateChange, onLoad, onLoadStart etc are not working as expected in cases of single page application websites or websites that don't trigger a window.load event.
Normaly onNavigationStateChange gets triggered in the beginning of a request with {loading: true, url: "someUrl", ...} and once after the loading of the url with {loading: false, url: "someUrl", ...}.
There is no global workaround (to my knowledge) that will work correctly for all websites and for both iOs/Android but maybe this can help in your case:
https://snack.expo.io/H1idX8vpM
Basically you inject a custom javascript in the webview that notifies the WebView which is the loaded page. You can enhance it if you want to catch custom window.history manipulation events.
Related
I have a Component that renders a Webview, of which there are links. For example, if I have something like:
export const About = () => {
return (
<SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
<Webview url={`${BASE_URL}/about`} />
</SafeAreaView>
)
}
export default About
Let's say that on the /about page, we have a link to /faq. As things currently stand, if I click on the link to /faq, the page will be rendered in that current Webview.
My desired behavior is for the /faq to put on the navigation stack so I can take advantage of the back button in the header. I don't know how to accomplish this. I don't have access to the link to /faq via React Native (see code snippet above) so I can't just add an onClick that pushes a page to the stack.
Another thing I was exploring was setting up some linking configurations so I can link /faq to /about, and so the routing would recognize that. No idea if I was going down a good path there. Please forgive me if I've mixed up concepts, my understanding of the React Native ecosystem and React Navigation is still very raw. Thank you for your time.
I'm having a difficult time trying to figure out how to log out both the user on the expo app as well as logging them out from the react-native-webview.
The user can log out of the expo app by pressing logout (which just handles the auth logic), however; the user is still logged in inside the webview (which is the shop uri).
At the moment, I came up with two possible ways: either set incognito to true on the webview, or send the user to a Screen which returns another webview to the shopify's logout uri.
// sending user to shopify logout webview
//navigator
<Stack.Navigator>
<Stack.Screen
name="AccountDetails"
component={AccountDetailsScreen}
/>
<Stack.Screen
name="ShopWebview"
component={ShopWebview}
/>
<Stack.Screen
name="LogOut"
component={LogOutWebView}
/>
</Stack.Navigator>
// from `AccountDetails` component, user presses handleLogout()
const handleLogOut = () => navigation.navigate('LogOut');
// shopify logout webview
export const LogOutWebView = () => {
return (
<WebView
source={{ uri: 'https://www.quarantotto.co.jp/account/logout' }}
/>
);
};
This seems to work w/ android, but it doesn't seem to work on iOS? I'm not quite sure why that is.
I can still set the incognito to true likeso:
// ShopWebview
<WebView
incognito
source={{ uri: 'someshop.com/' }}
/>
and this would help me not store the logged in user's session, but not quite sure if this is the proper way to handle auth.
If I can use the first method of sending the user to a webview that handles logout when a user visits it, that would be great. But not sure why it's not working from ios.
any ideas?
UPDATE: possible working solution?
Whenever the user logs out, they are sent back to a screen w/ login or register.
The issue was that whenever the user pressed login, since their session was cached, they are redirect to their account screen (which is what I don't want since if a user presses logout, I want them to be logged out and have to log back in).
what I have done is just inject some js in the LoginWebview
const handleNavigationStateChange = (newNavState) => {
if (webViewRef.current) {
webViewRef.current.injectJavaScript(scriptFetchCustomer());
}
if (newNavState.url.includes('logout')) {
setTimeout(() => {
const redirectTo = `window.location = "${someshop.com/login}"`;
webViewRef.current.injectJavaScript(redirectTo);
}, 500);
}
};
seems to work, but I don't enjoy using the settimeout. any recommendations?
second update... doesn't work on android
Android isn't working properly. I've set the source to the shopify's /account/logout uri, but inside handleNavigationStateChange the newNavState's url isn't the logout as it's set on the source.
....
Last update:
It finally works as I wanted to. I had to check for the url changes inside onNavigationStateChange of the webview. Then I could do what I wanted. I basically sent user to /account/logout, then set current logged in user state back into null which fires a redirect to login screen.
Hope it helps someone.
My app uses react-native-webview and set allowsBackForwardNavigationGestures to true.
I want to prevent going back on a specific page.
For example, after navigating to the home page from the login page, I want to make sure that I cannot go back.
I wonder if blocking back is possible in react-native-webview.
Please help.
I can't be sure but your question sure sounds like a React Navigation issue, particularly concerning Auth. Flow. Well, should that be the case, there's a pretty well written documentation on Auth Flow with good example(s) here
Hope that helps in solving your issue.
I think you could use onShouldStartLoadWithRequest and simply return false when request contains URL you do not want to allow.
From documentation:
<WebView
source={{ uri: 'https://reactnative.dev' }}
onShouldStartLoadWithRequest={(request) => {
// Only allow navigating within this website
return request.url.startsWith('https://reactnative.dev');
}}
/>
You can restrict back button from onNavigationStateChange
onNavigationStateChange={(navState) => {
if (navState.canGoBack) {
navigation.setParams({
headerLeftInfo: {
title: '',
onPress: () => //TODO:back button logic,
},
});
} else {
navigation.setParams({
headerLeftInfo: null,
});
}
}}
Reference: https://www.reactnativeschool.com/integrating-react-navigation-back-button-with-a-webview
I have the following WebView component that is used multiple times for various embeds inside news articles
<WebView
useWebKit={true}
ref={(ref) => this.webview = ref}
javaScriptEnabled={true}
injectedJavaScript={"(" + injectedScript + ")()"}
onMessage={this.onMessage}
onNavigationStateChange={this.onNavigationStateChange}
{...this.props}
/>
and the following navigation state change listener, used for opening links in an external browser
onNavigationStateChange = (event) => {
this.webview.stopLoading();
Linking.openURL(event.url);
}
The problem is that the navigation change listener doesn't seem capable of differentiating between user interaction and automatic page redirects (which social media embeds will often do). How can I open the link in an external browser ONLY for user interaction?
I don't know exactly if automatic page redirects trigger click events, but they should not, so you can listen to only click events, which I suppose can only be triggered by the user.
onNavigationStateChange = (navState) =>
{
if (navState.navigationType === 'click') {
// User clicked something
}
}
I have an app that has a WebView and a bottom navigation bar.
Back, forward and reload buttons work ok since there are goForward(), goBack() and reload() method.
But I also have a home button that should load the starting url.
I tried setting the new url with this.setState but it doesn't work.
this.setState({
...this.state,
url: DEFAULT_URL,
})
Actually it works the first time. For example if I change the URL in the source and hot reload then it works. But if I click on any link home doesn't work anymore.
Is it possible to do this and if so what am I doing wrong?
I solved it by appending timestamp to url because it seems setting a "new" url triggers the new render() or something.
So the function now goes like this:
this.setState({ url: `${DEFAULT_URL}?t=${Date.now()}` })