question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FlatList(from RNGH) can not scroll anymore after nested in PanGestureHandler

See original GitHub issue

render() { ... return ( <PanGestureHandler onGestureEvent={this._onPanGestureEvent}> <Animated.View style={{...}} > <FlatList data={data} renderItem={itemData => this.renderItem(itemData)} keyExtractor={item => "" + item.name + item.url}/> </Animated.View> </PanGestureHandler> ) }

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
Lg0gscommented, Dec 15, 2020

@yairopro Thanks a lot. My FlatList stopped scrolling after items were wrapped inside PanGestureHandler and minDeltaX worked for me.

1reaction
yairoprocommented, Oct 25, 2019

Hi @mxmzb From the GET STARTED:

In a nutshell, the library provides: … The ability to define relations between gesture handlers, e.g. when you have a pan handler in ScrollView you can make that ScrollView wait until it knows pan won’t recognize.

So it seems the pan catches all touch events as long as it is configured to recognize it. You can configure the pan to tell it what gesture it should recognize and which not using its props like minDeltaX, maxDeltaX, minDist, etc. Have a look on the doc 😉.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React native Flatlist does not scroll inside the custom ...
Here is the updated version of your code. working fine on simulator import React, { useState, useEffect, useRef } from "react"; ...
Read more >
Need help, Nested FlatList component will not scroll on mobile ...
You don't need both, FlatList itself is scrollable. They shouldn't be nested and you should be getting console warnings about it.
Read more >
Troubleshooting | React Native Bottom Sheet - GitHub Pages
Adding horizontal FlatList or ScrollView is not working properly on Android​. Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler ......
Read more >
How to Fix VirtualizedLists should never be nested inside ...
When developing with React Native and nesting FlatList or SectionList component inside a plain ScrollView, your debugger might display the ...
Read more >
react-native-draggable-flatlist - npm
A drag-and-drop-enabled FlatList component for React Native. ... within a TabNavigator so that the list does not capture navigator gestures.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found