Add stickyHeadersEnabled example

Summary:
Changelog:
[General][Added] - [RNTester] Add stickyHeadersEnabled example

Reviewed By: kacieb

Differential Revision: D26333022

fbshipit-source-id: 37c869bbd25e4d6a090b53b1cffdf236ac27a8f3

packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js

@@ -0,0 +1,30 @@
+/**
+ * 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_stickySectionHeadersEnabled} from './SectionListExamples';
+const React = require('react');
+
+exports.title = 'SectionList stickySectionHeadersEnabled';
+exports.testTitle = 'Test stickySectionHeadersEnabled prop';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
+exports.description =
+  'Toggle stickySectionHeadersEnabled to see section headers stick.';
+exports.examples = [
+  {
+    title: 'SectionList stickySectionHeadersEnabled',
+    render: function(): React.Element<
+      typeof SectionList_stickySectionHeadersEnabled,
+    > {
+      return <SectionList_stickySectionHeadersEnabled />;
+    },
+  },
+];

packages/rn-tester/js/examples/SectionList/SectionListExamples.js

@@ -42,6 +42,35 @@ const Item = ({title}) => (
   </View>
 );
 
+export function SectionList_stickySectionHeadersEnabled(): React.Node {
+  const [output, setOutput] = React.useState(
+    'stickySectionHeadersEnabled false',
+  );
+  const [exampleProps, setExampleProps] = React.useState({
+    stickySectionHeadersEnabled: false,
+  });
+
+  const onTest = () => {
+    setExampleProps({
+      stickySectionHeadersEnabled: !exampleProps.stickySectionHeadersEnabled,
+    });
+    setOutput(
+      `stickySectionHeadersEnabled ${(!exampleProps.stickySectionHeadersEnabled).toString()}`,
+    );
+  };
+
+  return (
+    <SectionListExampleWithForwardedRef
+      exampleProps={exampleProps}
+      testOutput={output}
+      onTest={onTest}
+      testLabel={
+        exampleProps.stickySectionHeadersEnabled ? 'Sticky Off' : 'Sticky On'
+      }
+    />
+  );
+}
+
 export function SectionList_onEndReached(): React.Node {
   const [output, setOutput] = React.useState('');
   const exampleProps = {

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

@@ -89,6 +89,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/SectionList/SectionList-onViewableItemsChanged'),
     category: 'ListView',
   },
+  {
+    key: 'SectionList_stickyHeadersEnabled',
+    module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'),
+    category: 'ListView',
+  },
   {
     key: 'SectionListExample',
     category: 'ListView',

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

@@ -103,6 +103,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'SectionList_stickyHeadersEnabled',
+    module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'),
+    category: 'ListView',
+  },
   {
     key: 'SectionList-onEndReached',
     module: require('../examples/SectionList/SectionList-onEndReached'),