diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js b/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js new file mode 100644 index 00000000000..7edc4589561 --- /dev/null +++ b/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 ; + }, + }, +]; diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js index 61e9add3b28..9bc1cc50997 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js @@ -42,6 +42,35 @@ const Item = ({title}) => ( ); +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 ( + + ); +} + export function SectionList_onEndReached(): React.Node { const [output, setOutput] = React.useState(''); const exampleProps = { diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index c5dccda4667..0c6e9b52dbb 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -89,6 +89,11 @@ const ComponentExamples: Array = [ module: require('../examples/SectionList/SectionList-onViewableItemsChanged'), category: 'ListView', }, + { + key: 'SectionList_stickyHeadersEnabled', + module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'), + 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 7920ffa4b3d..6ea256d4abe 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -103,6 +103,11 @@ const ComponentExamples: Array = [ 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'),