Move out inverted example

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

Reviewed By: charlesbdudley

Differential Revision: D30816725

fbshipit-source-id: 6eb4d3133206117646e4738cefdfdbf8f51127fe

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -82,29 +82,6 @@ const Separator = (defaultColor, highlightColor) => ({
   );
 };
 
-export function FlatList_inverted(): React.Node {
-  const [output, setOutput] = React.useState('inverted false');
-  const [exampleProps, setExampleProps] = React.useState({
-    inverted: false,
-  });
-
-  const onTest = () => {
-    setExampleProps({
-      inverted: !exampleProps.inverted,
-    });
-    setOutput(`Is inverted: ${(!exampleProps.inverted).toString()}`);
-  };
-
-  return (
-    <BaseFlatListExample
-      exampleProps={exampleProps}
-      testOutput={output}
-      onTest={onTest}
-      testLabel={exampleProps.inverted ? 'Toggle false' : 'Toggle true'}
-    />
-  );
-}
-
 export function FlatList_withSeparators(): React.Node {
   const exampleProps = {
     ItemSeparatorComponent: Separator('lightgreen', 'green'),

packages/rn-tester/js/examples/FlatList/FlatList-inverted.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import BaseFlatListExample from './BaseFlatListExample';
+import * as React from 'react';
+
+export function FlatList_inverted(): React.Node {
+  const [output, setOutput] = React.useState('inverted false');
+  const [exampleProps, setExampleProps] = React.useState({
+    inverted: false,
+  });
+
+  const onTest = () => {
+    setExampleProps({
+      inverted: !exampleProps.inverted,
+    });
+    setOutput(`Is inverted: ${(!exampleProps.inverted).toString()}`);
+  };
+
+  return (
+    <BaseFlatListExample
+      exampleProps={exampleProps}
+      testOutput={output}
+      onTest={onTest}
+      testLabel={exampleProps.inverted ? 'Toggle false' : 'Toggle true'}
+    />
+  );
+}
+
+export default ({
+  title: 'Inverted',
+  name: 'inverted',
+  description: 'Test inverted prop on FlatList',
+  render: () => <FlatList_inverted />,
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js

@@ -12,6 +12,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
 import BasicExample from './FlatList-basic';
 import OnEndReachedExample from './FlatList-onEndReached';
 import ContentInsetExample from './FlatList-contentInset';
+import InvertedExample from './FlatList-inverted';
 
 export default ({
   framework: 'React',
@@ -20,5 +21,10 @@ export default ({
   documentationURL: 'https://reactnative.dev/docs/flatlist',
   description: 'Performant, scrollable list of data.',
   showIndividualExamples: true,
-  examples: [BasicExample, OnEndReachedExample, ContentInsetExample],
+  examples: [
+    BasicExample,
+    OnEndReachedExample,
+    ContentInsetExample,
+    InvertedExample,
+  ],
 }: RNTesterModule);