I'm making a custom calendar component with a month view where each day is a specialized component. When the user puts his finger on a day and moves across the screen I want to do something in each touched day component. In other words I need something like onMouseEnter event from standard react.
Here's what I've tried:
Passing gesture handlers to View inside each day.
I've added onStartShouldSetResponder, onMoveShouldSetResponder, onResponderTerminationRequest (all 3 return true), onResponderGrant and onResponderMove to a View in my custom day component and that works for a single day, but when the user moves his finger to the next day its handlers are not called until the finger is lifted and put on it again.
Creating a PanResponder in the calendar component and passing its handlers to all days.
Well this one was a blind try. It wouldn't have much sense if it did work :)
I've created a PanResponder in the parent calendar component and passed panResponder.panHandlers to every day. It works the same as method 1.
The method I'm sure would work:
attach onLayout to each day
store bounding boxes of each day in the state of the calendar component
attach gesture handlers to the calendar view itself
in the gesture handlers using current touch coords (x,y) and stored bounding boxes figure out which day is touched
But there's got to be a simpler, elegant method for a more civilized age, right? :)
Related
I'm not created any event and need to scroll current time like scroll working for first event.
I've created a simple calendar app using Bootstrap-Vue b-container, 5 b-rows and 7 b-cols. Each cell is a day. Within that cell is child component called Day. Each day has a Date component that shows that cell's date. Each day can have 0 or more Payment components. When a Payment component is clicked on, the number in that component is highlighted, as shown in the right cell, below:
enter image description here
When a different cell is clicked, I need to remove the highlight from the original Payment and then highlight the newly clicked Payment. How can I determine which Payment component needs to have the highlight removed?
Not sure this is a coding question, feels more like app design. But if I were you, I'd have a "selectedDay" property in the parent Vue element that would point to the highlighted cell. And then I'd raise a "clicked" or "selected" event in the child element. In the parent, you can hook a method up for to event raised by the child and act accordingly.
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.
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
I try to use two PanResponder to handle multi-touch event. One PanResponder in charge of upper half screen, and one lower. The two PanResponders work fine as long as there only one finger touch the screen. But when I put two finger on the screen, only one PanResponder works. So I only know coordinate( movement) of one finger and have no idea what status of the other finger is.
I can confirm I have this behavior and was unable to get an array of 2 touches with PanResponder.
It seems other people reported the problem in the past: https://react-native.canny.io/feature-requests/p/panresponderonpanrespondermove-not-responding-for-pinch