Nested FlatList does not scroll

See original GitHub issue

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.1
node -v: v7.10.0
npm -v: v7.10.0
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:)

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

https://snack.expo.io/HJSueSfPZ

Issue Analytics

State:
Created 6 years ago
Reactions:6
Comments:32 (2 by maintainers)

Top GitHub Comments

10reactions

dotansimhacommented, Oct 30, 2017

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

4reactions

tomdixoncommented, Nov 22, 2017

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.

Top Results From Across the Web

Nested FlatList with the same scroll direction not scrolling

Try using FlatList from react-native-gesture-handler as nested. import { FlatList } from 'react-native-gesture-handler'.

Need help, Nested FlatList component will not scroll on mobile ...

Got rid of scroll views and modified nested flatlist to a map. I still observe same behavior. Scroll works fine on PC, but...

[Solved]-Nested FlatList not scrolling / ScrollToIndex on ...

Coding example for the question Nested FlatList not scrolling / ScrollToIndex on FlatList not working-React Native.

How to Fix 'VirtualizedLists should never be nested inside ...

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. While this ...

React Native TypeScript | Nested Flatlist Tutorial - YouTube

... learn about list data, FlatList , Nested Flat List, scroll events , animations using scroll ... Your browser can't play this video....