react-native: Nested FlatList does not scroll
Is this a bug report?
Yes
Have you read the Bugs section of the How to Contribute guide?
Yes
Environment
react-native -v: react-native-cli: 2.0.1 react-native: 0.47.1node -v: v7.10.0npm -v: v7.10.0yarn --version: 0.27.5
Then, specify:
- Target Platform: Android
- Development Operating System: Windows 10 Pro
-
Build tools: Not using Xcode nor Android Studio to build native code. Have only tried this on Android.
-
Comments: This worked fine with RN 0.44 until yesterday when I updated to RN 0.47 and I noticed that the sublists on my app stopped working.
Steps to Reproduce
(Write your steps here:)
- Add a FlatList (vertical scroll) component with some data.
- Have the renderItem prop be a function which returns another FlatList component (also with vertical scroll)
- Let the nested FlatList have a constrained height
Expected Behavior
Both lists (parent and children) would be able to scroll (as it did with RN v0.44)
Actual Behavior
Only the parent FlatList scrolls.
Reproducible Demo
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 6
- Comments: 32 (2 by maintainers)
For me it works after adding
contentContainerStyle={{ flexGrow: 1}}to the list, andstyle={{ flex: 1}}to the container. using rn>0.49.3Same issue for me. I’ve noticed that the complete content of the inner FlatList appears to render outside of the bounds of the FlatList itself, and therefore no scrolling occurs as it has all been rendered. I noticed this by hiding some of the elements after the nested FlatList element.
@MarcBrout did you try “nestedScrollEnabled” prop in ScrollView (available in react-native 0.56.0+) https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled
I had the same issue, I resolved this by giving my Parent View, style: {{flex: 1}}, give the same style of flex 1 to all the views that on the top of your flatlist. This works.
From documentation: “Also inherets ScrollView Props, unless it is nested in another FlatList of same orientation”, https://facebook.github.io/react-native/docs/0.48/flatlist.html
Any fix for this?
+1
@alex1815 Hey I read that too, but I don’t quite understand the implications, do you? So a nested FlatList doesn’t inherit ScrollView props, does that mean it’s not possible for the FlatList to scroll independent from the outer ScrollView?