issue #18943 - SectionSeparatorComponent and ItemSeparatorComponent s…

[dy93]

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

Summary

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

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',
  },
});

after this fix, the separators will display in the right place

[cpojer]

Thanks for the fix!

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @dy93 in dfb4f4a.

^{When will my fix make it into a release? | Upcoming Releases}