Skip to content
Permalink
Browse files
issue #18943 - SectionSeparatorComponent and ItemSeparatorComponent s… (
#26933)

Summary:
SectionSeparatorComponent and ItemSeparatorComponent should displays in the correct place with an inverted list

This PR fix issue #18943
Currently, when using SectionSeparatorComponent and ItemSeparatorComponent with an inverted SectionList, the separators will display at the wrong place.
Please see issue #18943 for more information.

## Changelog
[General] [Fixed] - Fix separators displays in wrong places with the inverted list
Pull Request resolved: #26933

Test Plan:
before this fix, the following code will result in following screenshots:
```
import React from 'react';
import { StyleSheet, Text, SectionList, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        style={{ width: '100%' }}
        sections={[
          {
            data: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6', 'item 7']
          }
        ]}
        renderItem={({ item }) => <Text style={{ fontSize: 18, backgroundColor: 'greenyellow', width: '100%' }}>{item}</Text>}
        inverted
        SectionSeparatorComponent={() => <Text style={{ fontSize: 28, backgroundColor: 'fuchsia', width: '100%' }}>section separator</Text>}
        ItemSeparatorComponent={() => <Text style={{ fontSize: 12, backgroundColor: 'gold', width: '100%' }}>item separator</Text>}
        renderSectionHeader={()=><Text style={{ fontSize: 38, backgroundColor: 'lightpink', width: '100%' }}>section header</Text>}
        renderSectionFooter={()=><Text style={{ fontSize: 38, backgroundColor: 'lightpink', width: '100%' }}>section footer</Text>}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```
<img width="413" alt="螢幕快照 2019-10-21 下午12 23 36" src="https://user-images.githubusercontent.com/1477985/67176763-030df580-f3fe-11e9-938f-38939339bf5c.png">

after this fix, the separators will display in the right place
<img width="414" alt="螢幕快照 2019-10-21 下午12 23 51" src="https://user-images.githubusercontent.com/1477985/67176795-2042c400-f3fe-11e9-96f3-a8ea1cfb28a2.png">

Differential Revision: D18174225

Pulled By: cpojer

fbshipit-source-id: 30901e68f38326c69715514a09a7a5130a2332a0
  • Loading branch information
dy93 authored and facebook-github-bot committed Oct 28, 2019
1 parent d7c222a commit dfb4f4af68726d2e05f63689a9c74c9bb9a0611b
Showing 2 changed files with 9 additions and 6 deletions.
@@ -374,6 +374,7 @@ class VirtualizedSectionList<
section={info.section}
trailingItem={info.trailingItem}
trailingSection={info.trailingSection}
inverted={!!this.props.inverted}
/>
);
}
@@ -435,6 +436,7 @@ type ItemWithSeparatorProps = $ReadOnly<{|
onUpdateSeparator: (cellKey: string, newProps: Object) => void,
prevCellKey?: ?string,
renderItem: Function,
inverted: boolean,
|}>;

type ItemWithSeparatorState = {
@@ -534,6 +536,7 @@ class ItemWithSeparator extends React.Component<
item,
index,
section,
inverted,
} = this.props;
const element = this.props.renderItem({
item,
@@ -552,9 +555,9 @@ class ItemWithSeparator extends React.Component<
* error found when Flow v0.89 was deployed. To see the error, delete
* this comment and run Flow. */
<View>
{leadingSeparator}
{!inverted ? leadingSeparator : separator}
{element}
{separator}
{!inverted ? separator : leadingSeparator}
</View>
) : (
element
@@ -751,10 +751,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
}
>
<View>
<separator />
<item
value="0"
/>
<separator />
</View>
</View>
<View
@@ -774,10 +774,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
}
>
<View>
<separator />
<item
value="1"
/>
<separator />
</View>
</View>
<View
@@ -797,10 +797,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
}
>
<View>
<separator />
<item
value="2"
/>
<separator />
</View>
</View>
<View
@@ -820,10 +820,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
}
>
<View>
<separator />
<item
value="3"
/>
<separator />
</View>
</View>
<View

0 comments on commit dfb4f4a

Please sign in to comment.