Permalink
Browse files

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](#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
  • Loading branch information...
VahidBo authored and facebook-github-bot committed Sep 8, 2017
1 parent b7216f3 commit ae60ae40746a05bf411f204f5e8afde3d6fa8d97
@@ -518,6 +518,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
data,
getItem,
getItemCount,
horizontal,
keyExtractor,
} = this.props;
const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
@@ -537,6 +538,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
cellKey={key}
fillRateHelper={this._fillRateHelper}
horizontal={horizontal}
index={ii}
inversionStyle={inversionStyle}
item={item}
@@ -1255,6 +1257,7 @@ class CellRenderer extends React.Component<
ItemSeparatorComponent: ?React.ComponentType<*>,
cellKey: string,
fillRateHelper: FillRateHelper,
horizontal: ?boolean,
index: number,
inversionStyle: ?StyleObj,
item: Item,
@@ -1315,6 +1318,7 @@ class CellRenderer extends React.Component<
CellRendererComponent,
ItemSeparatorComponent,
fillRateHelper,
horizontal,
item,
index,
inversionStyle,
@@ -1336,9 +1340,14 @@ class CellRenderer extends React.Component<
const itemSeparator =
ItemSeparatorComponent &&
<ItemSeparatorComponent {...this.state.separatorProps} />;
const cellStyle = inversionStyle
? horizontal
? [{flexDirection: 'row-reverse'}, inversionStyle]
: [{flexDirection: 'column-reverse'}, inversionStyle]
: horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
if (!CellRendererComponent) {
return (
<View style={inversionStyle} onLayout={onLayout}>
<View style={cellStyle} onLayout={onLayout}>
{element}
{itemSeparator}
</View>
@@ -1347,7 +1356,7 @@ class CellRenderer extends React.Component<
return (
<CellRendererComponent
{...this.props}
style={inversionStyle}
style={cellStyle}
onLayout={onLayout}>
{element}
{itemSeparator}
@@ -124,15 +124,29 @@ exports[`VirtualizedList handles nested lists 1`] = `
<View>
<View
onLayout={[Function]}
style={null}
style={
Array [
Object {
"flexDirection": "row",
},
null,
]
}
>
<item
title="outer1:inner0"
/>
</View>
<View
onLayout={[Function]}
style={null}
style={
Array [
Object {
"flexDirection": "row",
},
null,
]
}
>
<item
title="outer1:inner1"
@@ -476,13 +490,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
<View
onLayout={undefined}
style={
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
}
Array [
Object {
"flexDirection": "column-reverse",
},
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
},
]
}
>
<item
@@ -493,13 +512,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
<View
onLayout={undefined}
style={
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
}
Array [
Object {
"flexDirection": "column-reverse",
},
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
},
]
}
>
<item
@@ -510,13 +534,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
<View
onLayout={undefined}
style={
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
}
Array [
Object {
"flexDirection": "column-reverse",
},
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
},
]
}
>
<item
@@ -527,13 +556,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
<View
onLayout={undefined}
style={
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
}
Array [
Object {
"flexDirection": "column-reverse",
},
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
},
]
}
>
<item
@@ -544,13 +578,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
<View
onLayout={undefined}
style={
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
}
Array [
Object {
"flexDirection": "column-reverse",
},
Object {
"transform": Array [
Object {
"scaleY": -1,
},
],
},
]
}
>
<item

0 comments on commit ae60ae4

Please sign in to comment.