diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js index bfbb1c3aee8..c9a0645fb26 100644 --- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js @@ -58,36 +58,6 @@ const Item = ({item, separators}) => { ); }; -const Separator = (defaultColor, highlightColor) => ({ - leadingItem, - trailingItem, - highlighted, - hasBeenHighlighted, -}) => { - const text = `Separator for leading ${leadingItem} and trailing ${trailingItem} has ${ - !hasBeenHighlighted ? 'not ' : '' - }been pressed`; - - return ( - - {text} - - ); -}; - -export function FlatList_withSeparators(): React.Node { - const exampleProps = { - ItemSeparatorComponent: Separator('lightgreen', 'green'), - }; - const ref = React.useRef(null); - - return ; -} - type Props = { exampleProps: $Shape>, onTest?: ?() => void, diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js b/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js index dac0ded3e19..1adce64e2d7 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js @@ -5,23 +5,57 @@ * LICENSE file in the root directory of this source tree. * * @format - * @flow + * @flow strict-local */ 'use strict'; -import {FlatList_withSeparators} from './BaseFlatListExample'; -const React = require('react'); +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; +import BaseFlatListExample from './BaseFlatListExample'; +import {StyleSheet, View, Text} from 'react-native'; +import * as React from 'react'; -exports.title = 'FlatList 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: 'FlatList with Separators', - render: function(): React.Element { - return ; - }, +const Separator = (defaultColor, highlightColor) => ({ + leadingItem, + trailingItem, + highlighted, + hasBeenHighlighted, +}) => { + const text = `Separator for leading ${leadingItem} and trailing ${trailingItem} has ${ + !hasBeenHighlighted ? 'not ' : '' + }been pressed`; + + return ( + + {text} + + ); +}; + +export function FlatList_withSeparators(): React.Node { + const exampleProps = { + ItemSeparatorComponent: Separator('lightgreen', 'green'), + }; + const ref = React.useRef(null); + + return ; +} + +const styles = StyleSheet.create({ + separator: { + height: 12, }, -]; + separtorText: { + fontSize: 10, + }, +}); + +export default ({ + title: 'FlatList with Separators', + name: 'separators', + description: 'Tap to see pressed states for separator components.', + render: () => , +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js index 2a940a54f30..a5ad439dbca 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js @@ -14,6 +14,7 @@ import OnEndReachedExample from './FlatList-onEndReached'; import ContentInsetExample from './FlatList-contentInset'; import InvertedExample from './FlatList-inverted'; import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged'; +import WithSeparatorsExample from './FlatList-withSeparators'; export default ({ framework: 'React', @@ -28,5 +29,6 @@ export default ({ ContentInsetExample, InvertedExample, onViewableItemsChangedExample, + WithSeparatorsExample, ], }: RNTesterModule); diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index 901941971c6..012e1a9d151 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -29,11 +29,6 @@ const Components: Array = [ category: 'ListView', supportsTVOS: true, }, - { - key: 'FlatList-withSeparators', - module: require('../examples/FlatList/FlatList-withSeparators'), - category: 'ListView', - }, { key: 'ImageExample', category: 'Basic', diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index 3eefdc2039a..3a005005bab 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -31,11 +31,6 @@ const Components: Array = [ category: 'ListView', supportsTVOS: true, }, - { - key: 'FlatList-withSeparators', - module: require('../examples/FlatList/FlatList-withSeparators'), - category: 'ListView', - }, { key: 'ImageExample', module: require('../examples/Image/ImageExample'),