I have a react native app with a WebView. I have implemented navigation in the webview such as going back to previous screen using goBack() function of the webview. But the problem is I want the back icon disabled when the user reaches the home page in the webview.
Initially canGoBack prop is false on webview home page but after few navigations and coming back to home page doesn't set canGoBack to false.Hence back button is still enabled but othing happens when clicked.
Interestingly onNavigationStateChange also doesn't get triggered when going back. It only fires when clicking on links or navigating to other pages in the webview. Anyone has any solution as to how to disable custom back button on home page?
onNavigationStateChange changes canGoBack function only if you are visiting another domain. the state doesn't changes if you are browsing on the same domain
Related
I have a react native app that we are implementing the react native web version using: React native web, the app uses the latests react native navigation library.
So far, mostly everything is working except for modals, the problem that i have is that when i open a modal, the URL path on web updates (I.E: from /signup if i open a modal it switch to /legalAgreementModal?QUERY_PARAMS....), so if i refresh the page the modal works but i can't close the modal anymore. I thought about adding a conditional on the modal to goBack if there is anything to go back to, but the problem is that i have too many modals that can go back to different screens so it will be a huge change if i have to add that logic to every modal.
My question is, is there a way to avoid modals to update my path? So if user refresh they lost the modal but they are on the original screen? Perhaps another workaround that you guys may know could help also!.
Thanks!
I tried adding a conditional on modal close action, adding empty string as the modal path.
React Navigation library supply me the blur event, that trigs when the focused screen is going to be unfocused. Great.
But what if I need to prevent the blur action itself by stopping the user to go away from this screen? The docs only mentions the 'beforeRemove' event, that is something else.
Is there a way to prevent a user to go away from a screen using the screen component logic?
Basically, blur event's callback function must navigate to this page
I use react-native-navigation with community web-view component.
My problem is - the screen is called WebLinkScreen and it opens different weblinks inside my app.
If I go away from that screen with let's say opened https://example.com. Then open a different page that passes an argument with URL https://sample.com, I still see example page being opened.
What am I doing wrong? Who is caching the screen/page? Is it a WebView component or react-native-navigation stackNavigator?
I am using react native navigation v2 by wix. I have a welcome screen with login screen and register. I start the startAuth.js from App.js. There are two tabs with login and register.
But as soon as app starts the componentWillMount methods runs in the register screen but yet i am at login tab.
Why is this happening?
react-native-navigation's Tab does not support lazy loading. But there are two special lifecyle functions where you can put your logic when component appear or disappear on screen
componentDidAppear(): called each time this component appears on screen
componentDidDisappear(): called each time this component disappears from screen
https://wix.github.io/react-native-navigation/docs/screen-lifecycle
There is also a discussion about topic https://github.com/wix/react-native-navigation/issues/1250
I'm working on a React Native app that uses a WebView as the app's main screen.
When the app comes from the background to the foreground the WebView reloads. How can I stop this reloading?
This answer suggests loading the WebView in ViewDidLoad() rather than in ViewDidAppear() or ViewWillAppear(). Is this a real solution and how can I confirm, or change, how the WebView is loaded by React Native?
As a hacky solution I'm using onNavigationStateChange to save the current URL in AsyncStorage and then load this URL when the app comes to the foreground. This solution isn't great because it:
Breaks the browser history, affecting javascript back buttons
Doesn't remember form state
Might send the user to a page they can't directly access, resulting in them being sent to a 404
So I'd much prefer a solution that stops the reloading, at least for situations when the app is only momentarily in the background.
This was not and issue with the WebView. The reloading was caused by my misuse of the React Navigation SwitchNavigator. As mentioned in the docs a SwitchNavigator
resets routes to their default state when you switch away
This reset caused the WebView to reload.