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'),