Nested FlatList does not scroll

[juanamd]

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

[keithcml]

same here, any updates???

[jasongonzales23]

+1

[Rpeanut]

+1

[denisftw]

I have the same issue, but I didn't know that it worked on 0.44. Hopefully, someone will come up with a workaround. This definitely works when the nested FlatList is inside the ListView, I wonder why FlatList is different.

[arminsal1]

Anyone find any solutions or hack-arounds? I'm facing the same issue

[hellereye]

I have the same issue

[dotansimha]

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

[tomdixon]

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.

[congsuboya]

+1

[alex1815]

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

[monkingame]

+1 same issue.
I have to use 'Click More' button if there isn't any solution yet.

[tuncaulubilge]

#18299 aims to fix this issue on Android 21 and above.

[SSTPIERRE2]

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

[boris-burgos]

+1

[ionush]

+1

[alz10]

Any fix for this?

[tandat2209]

+1

[gurleen-kaur-30]

+1

[Balasnest]

I am still facing this issue. Any solution for this problem?

[CaioPaiola]

+1

[Danishkhan007]

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.

[vitorolivg]

In my case, it works adding a height, style: {{ height }}.

[MarcBrout]

Could you guys @Danishkhan007 or @vitorolivg post some working code please ? I'm currently pulling my hair off with this workaround...

[tuncaulubilge]

@MarcBrout did you try "nestedScrollEnabled" prop in ScrollView (available in react-native 0.56.0+)
https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

[MarcBrout]

@tuncaulubilge I can't upgrade my project to 0.56.0 right now, but I implemented this workaround #1966 (comment) and it works out !

[webbin]

+1

[est7]

@MarcBrout outer component is scrollview ,if i replaced with flatlist , nested flatlist cant work

[alexpchin]

Any update on this?

[pavermakov]

+1

[sorinns]

+1

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

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.