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
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}
/>
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 tried to do with ScrollView and transform and scrollTo but i couldnt figure it out and i dont want to create with react-navigation
i want to create a fixed bar at the top and two animated buttons in it and when button touched go second screen and play button animation and when screen swiped play button animation also
like this and screen has to be slideable too
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.
I want to be able to scroll a child component so that it visible on screen. How can I tell a react-native ScrollView or ListView to centre, or at least move to a certain component?
Both ScrollView and ListView have method scrollTo, so you can calculate position where you need to scroll