Question 34451 in React native Question posted in
The official React Native documentation can be found here.

How can I prevent vertical scrolling of parent Flatlist when scrolling horizontally in child view? – React native

I have a Flatlist with Vertical Scrolling and inside each item of the Flatlist I have a SwipeListView from react-native-swipe-list-view.

Whenever I Swipe horizontally inside the SwipeListView, it gets cancelled if i also start scrolling vertically and then it starts vertically scrolling the Flatlist. I tried using useState to manage the scrollEnabled but this only works when the User slowly slides inside the SwipeListView. With increased velocity there are messed up animations. Also i feel like there must be a cleaner way of achieving this. Anyone know a way to basically disable FlatList scroll while scrolling inside of child component?

Tags:

2

Answers


  1. 0

    For starters, replace react-native-swipe-list-view with the swipable component that react native gesture handler exports. This is far more performant as it uses the UI thread to perform all animations. You can then import Flatlist as well from react-native-gesture-handler.

    Generally, things should work as is. But if there is any glitchy behaviour you can wrap flatlist with a gestureHandlerRootView and pass RNGH ScrollView to the flatlist renderScrollComponent.

    import Swipeable from 'react-native-gesture-handler/Swipeable';
import {Flatlist} from 'react-native-gesture-handler'

import {
  GestureHandlerRootView,
   PanGestureHandler,
   ScrollView,
 } from 'react-native-gesture-handler';

export default function App(){
   <GestureHandlerRootView>

      <Flatlist renderItem={<Swipeable />}
                 renderScrollComponent={ScrollView}/>
     
    </GestureHandlerRootView>
      
}
    Login or Signup to reply.
  2. 0

    You can try implementing the swipeableRow which can be used to disable scrolling in flatlist.

     disableScroll() {
  this.list.getScrollResponder().setNativeProps({
    scrollEnabled: false
  })
}

enableScroll() {
  this.list.getScrollResponder().setNativeProps({
    scrollEnabled: true
  })
}

    Then in your place of your swipeable component, add this:

    <SwipeableRow onSwipeStart={disableScroll} onSwipeEnd={enableScroll}  />

    Also you can try adding this to the FlatList

    scrollEnabled={false}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search