Skip to content

FlatList inside Scrollview Stuck the Scrolling #23008

@waheedakhtar694

Description

@waheedakhtar694

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions