diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js new file mode 100644 index 00000000000..bd0fcfd0ba5 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js @@ -0,0 +1,27 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; +import {SectionList_withSeparators} from './SectionListExamples'; +const React = require('react'); + +exports.title = 'SectionList with Separators'; +exports.testTitle = 'Test custom separator components'; +exports.category = 'ListView'; +exports.documentationURL = 'https://reactnative.dev/docs/sectionlist'; +exports.description = 'Tap to see pressed states for separator components.'; +exports.examples = [ + { + title: 'SectionList with Separators', + render: function(): React.Element { + return ; + }, + }, +]; diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js index b68a8f6b099..6eb9eb4c2dc 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js @@ -8,7 +8,14 @@ * @format */ -import {Button, SectionList, StyleSheet, Text, View} from 'react-native'; +import { + Pressable, + Button, + SectionList, + StyleSheet, + Text, + View, +} from 'react-native'; import * as React from 'react'; const DATA = [ @@ -36,11 +43,34 @@ const VIEWABILITY_CONFIG = { waitForInteraction: true, }; -const Item = ({title}) => ( - - {title} - -); +const Item = ({item, section, separators}) => { + return ( + [ + styles.item, + { + backgroundColor: pressed ? 'red' : 'pink', + }, + ]} + testID={item}> + {item} + + ); +}; + +const Separator = (defaultColor, highlightColor, text) => ({highlighted}) => { + return ( + + {text} + + ); +}; export function SectionList_inverted(): React.Node { const [output, setOutput] = React.useState('inverted false'); @@ -163,6 +193,29 @@ export function SectionList_onEndReached(): React.Node { ); } +export function SectionList_withSeparators(): React.Node { + const exampleProps = { + ItemSeparatorComponent: Separator('lightgreen', 'green', 'Item Separator'), + SectionSeparatorComponent: Separator( + 'lightblue', + 'blue', + 'Section Separator', + ), + }; + const ref = React.createRef>(); + + const onTest = null; + + return ( + + ); +} + export function SectionList_onViewableItemsChanged(): React.Node { const [output, setOutput] = React.useState(''); const exampleProps = { @@ -216,7 +269,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef( testID="section_list" sections={DATA} keyExtractor={(item, index) => item + index} - renderItem={({item}) => } + renderItem={Item} renderSectionHeader={({section: {title}}) => ( {title} )} @@ -265,4 +318,10 @@ const styles = StyleSheet.create({ output: { fontSize: 12, }, + separator: { + height: 12, + }, + separtorText: { + fontSize: 10, + }, }); diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index ac0a6281b7b..88eda2bebfe 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -85,7 +85,7 @@ const ComponentExamples: Array = [ category: 'ListView', }, { - key: 'SectionList_inverted', + key: 'SectionList-inverted', module: require('../examples/SectionList/SectionList-inverted'), category: 'ListView', }, @@ -95,10 +95,15 @@ const ComponentExamples: Array = [ category: 'ListView', }, { - key: 'SectionList_stickyHeadersEnabled', + key: 'SectionList-stickyHeadersEnabled', module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'), category: 'ListView', }, + { + key: 'SectionList-withSeparators', + module: require('../examples/SectionList/SectionList-withSeparators'), + category: 'ListView', + }, { key: 'SectionListExample', category: 'ListView', diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index d999c44c3f7..8ce1f1c0701 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -109,10 +109,15 @@ const ComponentExamples: Array = [ category: 'ListView', }, { - key: 'SectionList_stickyHeadersEnabled', + key: 'SectionList-stickyHeadersEnabled', module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'), category: 'ListView', }, + { + key: 'SectionList-withSeparators', + module: require('../examples/SectionList/SectionList-withSeparators'), + category: 'ListView', + }, { key: 'SectionList-onEndReached', module: require('../examples/SectionList/SectionList-onEndReached'),