SectionList Separators Example

Summary:
Changelog:
[General][Added] - Added an example showcasing how separator callbacks work in SectionList for RNTester

Reviewed By: nadiia

Differential Revision: D26575122

fbshipit-source-id: 46710e2647c84bdf083265ce04ba330bd70eb2a7

Author: Luna Wei

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<typeof SectionList_withSeparators> {
+      return <SectionList_withSeparators />;
+    },
+  },
+];

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}) => (
-  <View style={styles.item} testID={title}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
+const Item = ({item, section, separators}) => {
+  return (
+    <Pressable
+      onPressIn={separators.highlight}
+      onPressOut={separators.unhighlight}
+      style={({pressed}) => [
+        styles.item,
+        {
+          backgroundColor: pressed ? 'red' : 'pink',
+        },
+      ]}
+      testID={item}>
+      <Text style={styles.title}>{item}</Text>
+    </Pressable>
+  );
+};
+
+const Separator = (defaultColor, highlightColor, text) => ({highlighted}) => {
+  return (
+    <View
+      style={[
+        styles.separator,
+        {backgroundColor: highlighted ? highlightColor : defaultColor},
+      ]}>
+      <Text style={styles.separtorText}>{text}</Text>
+    </View>
+  );
+};
 
 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<?React.ElementRef<typeof SectionList>>();
+
+  const onTest = null;
+
+  return (
+    <SectionListExampleWithForwardedRef
+      ref={ref}
+      exampleProps={exampleProps}
+      testOutput="Tap for press state of section and item separators"
+      onTest={onTest}
+    />
+  );
+}
+
 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}) => <Item title={item} />}
+          renderItem={Item}
           renderSectionHeader={({section: {title}}) => (
             <Text style={styles.header}>{title}</Text>
           )}
@@ -265,4 +318,10 @@ const styles = StyleSheet.create({
   output: {
     fontSize: 12,
   },
+  separator: {
+    height: 12,
+  },
+  separtorText: {
+    fontSize: 10,
+  },
 });

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -85,7 +85,7 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'ListView',
   },
   {
-    key: 'SectionList_inverted',
+    key: 'SectionList-inverted',
     module: require('../examples/SectionList/SectionList-inverted'),
     category: 'ListView',
   },
@@ -95,10 +95,15 @@ const ComponentExamples: Array<RNTesterExample> = [
     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',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -109,10 +109,15 @@ const ComponentExamples: Array<RNTesterExample> = [
     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'),