Nesting two horizontal Flatlists causes the second Flatlist to display content vertically #23407
Labels
Bug
Component: FlatList
Platform: Linux
Building on Linux.
Stale
There has been a lack of activity on this issue and it may be closed soon.
🐛 Bug Report
Prior reports:
Nesting two horizontal FlatLists makes content in the inner FlatList to be display content vertically. The styles are applies correctly - that is I see
"flexDirection": "row"
being applied to all the cells (Views) inside the VirtualizedList but the Views take the full width of the container.The cyan border shows how the inner View (cell in the VirtualizedList) is taking up the entire width of the parent while the items inside (with a fixed witdth) are taking only a portion of it.
To Reproduce
Nest a horizontal FlatList inside another horizontal FlatList.
Expected Behavior
Both FlatLists should render content horizontally but the inner FlatList renders them vertically.
Code Example
https://snack.expo.io/rJtbGoxSV
Redacted sample:
Environment
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 11.5.0 - ~/.nvm/versions/node/v11.5.0/bin/node
Yarn: 1.12.3 - /usr/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v11.5.0/bin/npm
SDKs:
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
npmPackages:
react: 16.5.0 => 16.5.0
react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
The text was updated successfully, but these errors were encountered: