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.
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.
I have an app that I am developing in React Native, using Expo. When I make a change to a deeply nested screen, I have to navigate back to that screen to check my changes.
Is it possible to configure React Native or Expo to go back to that screen after a reload?
I'm not sure if it matter, but I'm also using React-Navigation.
What I usually do is just switch the routes in the navigator config so that deeply nested screen is the first route... then you can work on it and make changes, and when you’re done just reset the routes to what they’re supposed to be. Does that make sense?
Try Running the app on a live device , Changes will be reflected directly on screen rather than going to root
I am trying to integrate React Native Navigation by Wix into my application and am not sure how to go about setting things up to handle a loading phase.
The library has a splash screen at the native layer but that is only displayed while the bundle is being parsed. Once that is complete and React Native takes over, I then rehydrate my Redux store (from Redux-Persist), make a couple checks, call out to an API to validate a token, and redirect the user to the proper screen. While all of this is happening, I want to display a loading screen but have no idea how to go about it using this library.
I don't want to show my app or let the user use the app until all of the loading and checks have completed.
Is this possible with this library? If so, how do I set it up? My navigation is tab based, no side drawer.
There're 2 options for you:
1. Call Navigation.startSingleApp with the only screen is "Loading Screen" when app start. At that time, you call rehydrate redux. When the call back invoked, you call Navigation.start (single or tab) to your main screen
2. Design the registerScreen with route "Loading" for loading screen. When app start, call Navigation.startSingleApp for the loading screen. On "componentDidMount" of loading screen, call rehydrate redux, when call back invoke, push to Main screen
I am trying to add an animated SVG as an application loader in a React native app. Their docs don't offer any solution on how I could approach this.
Back when I was working on a react native project, we had used a simple method to achieve splash screen effect.
We had called setTimeout() in componentDidMount() to navigate to the home-screen after 2 seconds. Also, we used to check whether the user is logged-in. If so, we'd navigate straight to the home screen skipping the annoying splash screen altogether.
I wonder if it's possible delete the transition that leads to my WP8.1 universal app when it's launched. So, when my app is launched, I want it to just show the SplashScreen without any animation. I've already read this and this questions, but since I'm not navigating between pages within my app, I can't just set "ContentTransitions" of my frame to null.
Does anybody have any information on this? Or is it just not possible, since these "launching" transitions are managed by the OS?
Disable the animations on the Frame, hook up the Frame`s navigated event and enable them back after first navigation. I have a post about this here.
The initial splash screen is displayed by the OS until you call Window.Current.Activate(). You cannot disable/modify this transition, and you should also not try to do so as your app will lose parity with the rest of OS ecosystem.