status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/Libraries/Lists
History
m30do ae60ae4074 fix ItemSeparatorComponent position in horizontal and inverted mode 
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](https://github.com/facebook/react-native/issues/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 https://github.com/facebook/react-native/pull/15865

Differential Revision: D5797266

Pulled By: hramos

fbshipit-source-id: 7d44fa797dbd9e83eb2bdd7833e9dd9707d9d822
 		2017-09-08 15:06:50 -07:00
..
ListView @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
__flowtests__ Enforce Prettier for @format 2017-07-10 15:37:36 -07:00
__tests__ fix ItemSeparatorComponent position in horizontal and inverted mode 2017-09-08 15:06:50 -07:00
FillRateHelper.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
FlatList.js Extend FlatList to support multiple viewability configs 2017-09-05 18:51:25 -07:00
MetroListView.js Fix React Native open source 2017-08-29 15:01:05 -07:00
SectionList.js Add snapshot tests for sticky headers 2017-09-07 13:05:35 -07:00
ViewabilityHelper.js Extend FlatList to support multiple viewability configs 2017-09-05 18:51:25 -07:00
VirtualizeUtils.js Codemod prettier to 1.5.2 2017-06-28 12:50:30 -07:00
VirtualizedList.js fix ItemSeparatorComponent position in horizontal and inverted mode 2017-09-08 15:06:50 -07:00
VirtualizedSectionList.js Fix React Native open source 2017-08-29 15:01:05 -07:00