I'm in some component where user can provide some data. If user clicks any button or swipes or do anything to navigate to some different Scene I want to detect if he provided some changes he didn't save and if yes, I want him to stay on the current screen, not navigate, and finally probably show some modal with warning. How can I achieve that with react-native-router-flex?
I've tried many approaches with onExit function f.e but failed to make any use of it...
Related
I am using react-native-navigation library to navigate through screens in my app, the problem is that if I navigate to a screen by pressing a button and press fast multiple times then that particular screen opens multiple times. My question is if it's there any possibility to check if a screen exists in the stack before pushing it, I wonder if exist any method or property from which I can get the stack with the components ids.
PS: I don't want to disable the button after first tap.
You can throttle the function where the button click event is handled. lodash.throttle can be used quite easily for this.
I would like to have a small menu that closes if the user interacts with any other component. For example if the user tries to scroll or interact with any of the content in a scrollview behind the menu (see the image below for reference).
I have two ideas for how this might be achieved:
A transparent layer behind the menu with an absolute position and dimensions matching the device. If this layer registers a touch event the menu can be dismissed. The problem with this is that from the users perspective the touch event was totally ignored. So for this to work well I would need to be able to still pass the touch event through the absolute layer to the content behind it.
Add callbacks to every component that could be interacted with to notify the menu that it should close. This option seems like it would be very messy and because of the large number of components in my use case it is not practical to implement and maintain.
Is there an other proper way to solve this problem? Can any of the issues I raised with the ideas above be resolved or mitigated?
Wrap your view with a TouchableWithoutFeedback component and provide it a onPress callback that hides the menu if it's open. Depending on how top-level the 'expand' icon is, you may want to track the menu's visibility in redux and dispatch an action onPress to track globally.
We built a React Native tablet kiosk app which displays multiple pages of input fields to a user at a front desk. The user has to fill out all the forms and can send them at the end.
Users can just walk away from the kiosk at any time, which would result in their last screen being the "welcome screen" for the next user. To avoid that, the app resets after some time if there was no user interaction (any touch event on the screen).
Right now, we use a countdown and reset it on each input field, button and background touch there is. This results in passing the reset callback to a lot of components. It works, but it is just a lot of redundancy and can lead to errors easily.
Is there any way, we can add an overlay to the very top of the view, which can catch all touch events and call the reset callback, but also pass the touch event to the views below? So when a user clicks on a button, the overlay calls the its callback but also the button is clicked (same for input fields, etc).
We also tried the Gesture Responder System, but could not get the touch event to pass through - it was always consumed by the component with the Gesture Responder System.
You can try adding a pointerEvents attribute to your View.
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen
Is there any way to prevent the default back button behavior in the navigation bar of a navigationview?
I'm trying to use Sencha Touch 2 history and linking abilities with routers, but that requires me to essentially intercept all button taps so that I can update the url.
The back button in a navigation bar creates all kinds of nightmares as far as thats concerned, and I can supply code if someone thinks they have an alternate solution, but preventing the default back button behavior seems best (so as to play nice with browser back button)
If you want to handle back button you can use back event of navigation view which fired when the back button of the navigation view was tapped.. Refer to my previous answer on how to do it.
If you want to completely hide the back button just simply use:
Ext.select('.x-button-back').hide();
try this Ext.getCmp('navigationview's id').getNavigatorBar().hide()