I'm continuing a previous developer's work. After login, it has a screen that has structure generally like this:
index's render
- ScrollView + RefreshControl
- IndexRoute
- Tab 1 screen
- ScrollView
- Content
- Tab 2 screen
- ScrollView
- Content
- Tab 3 screen
- ScrollView
- Content
The problem here is the nested ScrollView situation. The outer ScrollView + RefreshControl pulldown to refresh listener is 'hijacking' the inside ScrollView's scrolling down gesture listener. So whenever the user is trying to scrolling the content up by swiping down, the pulldown to refresh is triggered instead.
From my guess, the way to fix this is by changing the structure like this:
index's render
- View
- IndexRoute
- Tab 1 screen
- ScrollView + RefreshControl
- Content
- Tab 2 screen
- ScrollView + RefreshControl
- Content
- Tab 3 screen
- ScrollView + RefreshControl
- Content
But is there any way to resolve this issue without rehauling the structure into moving refresh control into each of the child scroll view and change the root scroll view into ordinary view?
You might want to listen to the onScroll events of the ScrollViews, and depending on the rules you want to enforce, disable the scrolling behavior on the outer one or all the others.
Like if you are on the top of the ScrollView of one of the tabs, scrolling down should disable its own scroll and trigger the refresh of the outer one, but if you' re not a the top, the outer one should have its scroll disable to allow the tab to be navigated without triggering a refresh.
Play around with the scrollEnabled and onScroll props on ScrollView to disable a specific scroll depending on your needs.
Related
I need to stop scroll vertical event in flatlist (In a Modal view).
Please check video - red color is flatlist and full screen is modal in react-navigation. Need to stop vertical touch event in flatlist. (Other part of modal need to enable gesture).
https://drive.google.com/file/d/1hXkbIH4lnjrIRREZ45KRAENEOllOLNjW/view?usp=sharing
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
I created nested expandable view and when scrolling up or down user click on a view to expand it than that touch doesn't respond but once scroll gets it position. User can click and it will respond to expand it.
I can solved it by setting bounces property as false but i don't think it is a good way to handle this.
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.