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 inside Scrollview Stuck the Scrolling

See original GitHub issue

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: (4) x64 Intel® Core™ i7-5557U CPU @ 3.10GHz Memory: 42.58 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.3 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3 Android SDK: API Levels: 23, 24, 25, 26, 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-25 | Google Play Intel x86 Atom IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.6.1 => 16.6.1 react-native: 0.57.7 => 0.57.7 npmGlobalPackages: react-native-cli: 2.0.1

Description

i am running into an issue and the issue is i am working with scrollview and Flat List basically i have a view in which as we can see static view on top and some tabs on the centre of the screen and i am using flat list to render the tabs data which is quite large but i want to to scroll top static profile view while i scroll Flat List so the upper profile will also scroll while scrolling Flat list for that i wraps a scrollview on the root of this view but when i scroll flat list scroll and scrollviews scroll conflicting with each other and as a result i can’t scroll to bottom or top in centre of the Flat List, any suggestion about this ?

Reproducible Demo

<ScrollView nestedScrollEnabled style={{flex: 1}}> <StaticView /> <ReactNavigationTabsHavingFlatList /> </ScrollView> screen shot 2019-01-15 at 4 48 01 pm

StackOverflow Issue. https://stackoverflow.com/questions/54199393/react-native-scrollview-and-flatlists-scroll-conflicting-with-each-other

ezgif com-video-to-gif

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

1reaction
moonstruckcommented, Jan 17, 2019

I’m getting very similar behaviour mostly in Android Pie.

0reactions
stale[bot]commented, Aug 9, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

FlatList inside ScrollView doesn't scroll - Stack Overflow
The issue is that the parent component is the only one registering the scroll event. The solution is to contextually decide which component ......
Read more >
FlatList inside ScrollView doesn't scroll #19971 - GitHub
I tried this. The scrollview rendered all items in flatlist and adjusting its size and made the page laggy so i think because...
Read more >
How to Fix 'VirtualizedLists should never be nested inside ...
This approach is demonstrated in the example below, where a user can scroll through different recipes.
Read more >
flatlist inside scrollview doesn't scroll - Code Grepper
Flatlisit inside scrollview ; 1. <FlatList ; 2. data={data} ; 3. keyExtractor={(item, index) => `key-${index}`} ; 4. ListHeaderComponent={() => ( ; 5. < ......
Read more >
Common bugs in React Native ScrollView and how to fix them
After putting all those elements inside the ScrollView component, you can use it to scroll through them vertically (the default) or ...
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