Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nesting two horizontal Flatlists causes the second Flatlist to display content vertically #23407

Closed
arivanandan opened this issue Feb 12, 2019 · 4 comments
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.

Comments

@arivanandan
Copy link

arivanandan commented Feb 12, 2019

🐛 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.
phone
code

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:

<FlatList
  horizontal
  renderItem={({ index }) => (
    <View>
      <FlatList
        horizontal
        renderItem={renderChildren}
      />
    </View>
  }
/>

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

@JohannesKlauss
Copy link

Is there any progress on that?

@arivanandan
Copy link
Author

Nope. I'm willing to poke around but I'm not sure where to look.

@stale
Copy link

stale bot commented Aug 4, 2019

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 4, 2019
@stale
Copy link

stale bot commented Aug 11, 2019

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.

@stale stale bot closed this as completed Aug 11, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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.
Projects
None yet
Development

No branches or pull requests

4 participants