status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
m30do 2017-09-08 14:57:42 -07:00 committed by Facebook Github Bot
parent b7216f3e18
commit ae60ae4074
2 changed files with 87 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Libraries/Lists/VirtualizedList.js
View File

@ -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}

113
Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
View File

@ -124,7 +124,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
<View>
<View
onLayout={[Function]}
style={null}
style={
Array [
Object {
"flexDirection": "row",
},
null,
]
}
>
<item
title="outer1:inner0"
@ -132,7 +139,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
</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