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

  1. react-native -v: react-native-cli: 2.0.1 react-native: 0.47.1
  2. node -v: v7.10.0
  3. npm -v: v7.10.0
  4. yarn --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:)

  1. Add a FlatList (vertical scroll) component with some data.
  2. Have the renderItem prop be a function which returns another FlatList component (also with vertical scroll)
  3. 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

https://snack.expo.io/HJSueSfPZ

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 6
  • Comments: 32 (2 by maintainers)

Most upvoted comments

For me it works after adding contentContainerStyle={{ flexGrow: 1}} to the list, and style={{ flex: 1}} to the container. using rn>0.49.3

Same 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?