I am trying to use either ScrollView or FlatList to build a swipable carousel. At one step in the swiper, I want to be able to disable scrolling to the next item until another step is completed, but still enable the user to scroll back to the previous screen. How can I disable swiping in a single direction (left/right) while still allowing swipe in the other direction? I have tried to use onMomentumScrollBegin and onScroll to detect direction and then disable scrolling via the scrollEnabled prop, but it is not immediate and causes glitchy behavior
Related
I have a FlatList embedded in every screen of a react-native-tab-view, and I would like to disable the swipe of the react-native-tab-view in the area covered by this FlatList for a better user experience.
When reaching the end of the FlatList, the scroll propagates to the parent react-native-tab-view
GIF example of the scroll propagating to tab view
On Android, the scroll in this area is even sometimes considered as a swipe on the react-native-tab-view, which leads to hard times scrolling the FlatList.
I tried to find a way to catch touch events and stop propagation but I'm not very familiar with PanResponders and touch events captures.
Just use
<TabView
.....
swipeEnabled={false}
/>
What I am trying to accomplish:
I have a horizontal flatlist (with pagination: true) and I would like to animate the scrolling depending on where on the y axis the user started swiping from.
If the scrolling started from the upper half of the flatlist then its border would animate to a certain color, otherwise it would switch to a different color, and depending on the scroll start position I would call a different function when the next index when the next index is scrolled to.
My question:
So is it possible to use a gesture responder (from react-native-gesture-handler) to handle the scrolling instead of relying on the built in responder of flatList?
for example: calling scrollToOffset repeatedly from inside my gesture responder or set a "current scroll position" prop with an animated value and pass it to the flatList component? no matter what I try I get bombarded with obscure error messages so I was wondering if it is even possible.
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'm attempting to create a custom NavBar on a screen that renders a ScrollView. Inside the NavBar, there's a button, that when pressed, causes the NavBar to translate downwards, thereby giving the appearance that the NavBar is expanding (This is done using Animated.spring() with the useNativeDriver option). Everything is working great, except if the ScrollView is still scrolling at the time the button is tapped (ie: when "momentum" scroll is taking place). In this scenario, the onPress handler that kicks off the NavBar animation is invoked as expected, but calls to Animated.spring() do not cause any animation to take place. Is it possible to either have the NavBar "expansion" animation to occur during the scroll, or pause the scroll to allow animation to proceed?
Like it's explained in RN docs the animation type you using are stoped by gesture events like scrolling, better use Animated.event() with onScrollprops combined with an interpolation animation to animate you footer.
I want to control the scrolling direction: disable to swipe left, enable to swipe right with scrollView.
I see the prop named: scrollEnabled , but it must be declare at the beginning.
How do i disable scrolling whenever i want?
This question is related to changing prop.
In iOS, i can control the scrolling behaviour easily.