I have a component that response to gestures and another component smaller in size that's overlaying it (position: 'absolute').
Is there a way for the overlaying component to proxy gestures to the component under it or to a specific component?
Answering my own question: what you need is the 'pointerEvents' View property.
In my case, I had to set it to 'box-none' which means the View ignores gestures and forwards it on, but elements inside the view (like buttons) do get the events if clicked on.
https://facebook.github.io/react-native/docs/view.html#pointerevents
Related
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt
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.
Hi :) I'm wondering how to define a certain View as a dropzone or how to create on hover reaction of View while dragging over.
The only solution that I found was to define the dropzone as a static area with respect to global coordinates of the screen. The Problem is that in my case I need to drop the element on one of the many dropzones Views inside a ScrollableView.
It would be also nice to fire an event on a Dropzone View during PanResponder Drag Gesture over this View. Thanks!
That's said there's a long ScrollView with lots of contents, and there's another component at the bottom of the page. I'm trying to lazy-rendering the bottom component when user scroll down enough. Is there any library has implemented this?
(I'm aware of ListView's onEndReached, but not quite sure if that helpful for this case.)
Appreciate if anyone could guide me a direction.
I create a simple lib for this:
https://github.com/chunghe/react-native-defer-renderer
basically you could get scroll position from the onScroll event of the ScrollView (e.nativeEvent.contentOffset), pass the scroll position to the child component. Then in the child component, you could get the distance from top from onLayout event (e.nativeEvent.layout.y).
That's pretty much all the tricks.
Put it at the end of the ScrollView?
ScrollViews do this by default:
removeClippedSubviews bool
Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.
https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews
I'm trying to implement scroll-then-fix using NavigationExperimental. (Medium android app implements this.)
First I need to make NavigationHeader scroll with the content instead of fixed at the top. And the Navigation fixed at the top when scrolling to certain position.
My first attempt is let NavigationHeader listen to the scroll event of the NavigationCard, here's the problem:
How do NavigationHeader/NavigationCard communicate each other? NavigationHeader needs to know the scroll position of the NavigationCard to change the state. But they are two separate components.
Or maybe there's an smarter way doing this? Thanks for your help!