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.

Sign up for GitHub

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

Jump to bottom

ItemSeparatorComponent isn't properly working with horizontal FlatList #15777

Closed
yozel opened this issue Sep 3, 2017 · 6 comments
Closed

ItemSeparatorComponent isn't properly working with horizontal FlatList #15777

yozel opened this issue Sep 3, 2017 · 6 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@yozel
Copy link

yozel commented Sep 3, 2017

Environment

  • react-native-cli 2.0.1
  • react-native 0.47.2
  • node 7.10.0
  • npm 4.6.1
  • Target Platform: iOS and Android
  • Development Operating System: macOS Sierra Version 10.12.6

Steps to Reproduce

Try to use ItemSeparatorComponent with horizontal FlatList.

Expected Behavior and Actual Behavior

bug

Reproducible Demo

https://snack.expo.io/HJuc--5Kb
@yozel yozel mentioned this issue Sep 3, 2017
Closed
@VahidBo VahidBo mentioned this issue Sep 8, 2017
Closed
facebook-github-bot pushed a commit that referenced this issue Sep 8, 2017
@VahidBo @facebook-github-bot
fix ItemSeparatorComponent position in horizontal and inverted mode
ae60ae4 
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

There's a positioning bug in `VirtualizedList` when `ItemSeparatorComponent` is defined for a list in horizontal or inverted mode. And also we face this bug in `FlatList`, because it is using `VirtualizedList` to render lists.
This commit will fix the [#15777](#15777).

Before fix:
```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```

![image](https://user-images.githubusercontent.com/15084663/30205251-95f14c70-949d-11e7-85e9-7a3304a52818.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205411-f01d27b4-949d-11e7-991e-00aeae0c01e0.png)

I ran this code with all possible values of `horizontal` and `inverted` props in `FlatList` and `VirtualizedList` and the results of each run was as below:
After fix bug:

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205498-323bcf60-949e-11e7-8ba0-465614ea5cf2.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205543-5274f612-949e-11e7-9660-bbdf8194cd27.png)
Closes #15865

Differential Revision: D5797266

Pulled By: hramos

fbshipit-source-id: 7d44fa797dbd9e83eb2bdd7833e9dd9707d9d822
@VahidBo
Copy link
Contributor

VahidBo commented Sep 9, 2017

@yozel This issue is fixed now by #15865. you can close this issue now.

@pull-bot
Copy link

@facebook-github-bot no-template

1 similar comment
@pull-bot
Copy link

@facebook-github-bot no-template

@facebook-github-bot
Copy link
Contributor

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Oct 10, 2017
@facebook-github-bot
Copy link
Contributor

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.

@facebook-github-bot facebook-github-bot added Needs more information Ran Commands One of our bots successfully processed a command. labels Oct 10, 2017
@GioLogist
Copy link

This issue still exists, here's another duplicate here #14680

However, the first post in this thread by @yozel here #15777 perfectly outlines the expected / actual result.

@facebook facebook locked as resolved and limited conversation to collaborators Oct 10, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 10, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@yozel @GioLogist @facebook-github-bot @VahidBo @pull-bot @react-native-bot