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.
Related
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...
I am using React Native's FlatList component with pagination. I want to execute a callback with the destination page as a parameter whenever the user releases on scroll.
onScroll fires pre-maturely and switches pages before the users releases the screen.
onScrollDragEnd doesn't correctly give you the destination page unless you drag your finger at least half way across the screen (eg doesn't work if you do a quick swipe).
onMomentScrollEnd doesn't get fired until the display stops moving, which may not get fired if the user is constantly swiping.
Is there some sort of middle ground to achieve this functionality?
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.
Instagram has a really cool interaction where you can tap-and-hold, aka longPress, on an image and an interactive pop-up appears. Once it appears you can drag your finger to one of the action buttons and removing your finger applies the action and closes the pop-up.
Like this effect
How can I achieve this.
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()