Move FlatList separators example under FlatList index

Summary: Changelog: [Internal] Refactor FlatList examples, move separators example under FlatList index

Reviewed By: charlesbdudley

Differential Revision: D30816723

fbshipit-source-id: 741e4d97b18458fcedd9175309ff68c987d211b1

Author: Luna Wei

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 (
-    <View
-      style={[
-        styles.separator,
-        {backgroundColor: highlighted ? highlightColor : defaultColor},
-      ]}>
-      <Text style={styles.separtorText}>{text}</Text>
-    </View>
-  );
-};
-
-export function FlatList_withSeparators(): React.Node {
-  const exampleProps = {
-    ItemSeparatorComponent: Separator('lightgreen', 'green'),
-  };
-  const ref = React.useRef(null);
-
-  return <BaseFlatListExample ref={ref} exampleProps={exampleProps} />;
-}
-
 type Props = {
   exampleProps: $Shape<React.ElementConfig<typeof FlatList>>,
   onTest?: ?() => void,

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<typeof FlatList_withSeparators> {
-      return <FlatList_withSeparators />;
-    },
+const Separator = (defaultColor, highlightColor) => ({
+  leadingItem,
+  trailingItem,
+  highlighted,
+  hasBeenHighlighted,
+}) => {
+  const text = `Separator for leading ${leadingItem} and trailing ${trailingItem} has ${
+    !hasBeenHighlighted ? 'not ' : ''
+  }been pressed`;
+
+  return (
+    <View
+      style={[
+        styles.separator,
+        {backgroundColor: highlighted ? highlightColor : defaultColor},
+      ]}>
+      <Text style={styles.separtorText}>{text}</Text>
+    </View>
+  );
+};
+
+export function FlatList_withSeparators(): React.Node {
+  const exampleProps = {
+    ItemSeparatorComponent: Separator('lightgreen', 'green'),
+  };
+  const ref = React.useRef(null);
+
+  return <BaseFlatListExample ref={ref} exampleProps={exampleProps} />;
+}
+
+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: () => <FlatList_withSeparators />,
+}: RNTesterModuleExample);

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);

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

@@ -29,11 +29,6 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'ListView',
     supportsTVOS: true,
   },
-  {
-    key: 'FlatList-withSeparators',
-    module: require('../examples/FlatList/FlatList-withSeparators'),
-    category: 'ListView',
-  },
   {
     key: 'ImageExample',
     category: 'Basic',

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

@@ -31,11 +31,6 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'ListView',
     supportsTVOS: true,
   },
-  {
-    key: 'FlatList-withSeparators',
-    module: require('../examples/FlatList/FlatList-withSeparators'),
-    category: 'ListView',
-  },
   {
     key: 'ImageExample',
     module: require('../examples/Image/ImageExample'),