Move Flatlist-contentInset

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

Reviewed By: yungsters

Differential Revision: D30816720

fbshipit-source-id: 9b35c575be6819e31ff9ef768f9acfd721a876e8

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

@@ -105,50 +105,6 @@ export function FlatList_inverted(): React.Node {
   );
 }
 
-export function FlatList_contentInset(): React.Node {
-  const [initialContentInset, toggledContentInset] = [44, 88];
-
-  const [output, setOutput] = React.useState(
-    `contentInset top: ${initialContentInset.toString()}`,
-  );
-  const [exampleProps, setExampleProps] = React.useState({
-    automaticallyAdjustContentInsets: false,
-    contentInset: {top: initialContentInset},
-    contentOffset: {y: -initialContentInset, x: 0},
-  });
-
-  const onTest = () => {
-    const newContentInset =
-      exampleProps.contentInset.top === initialContentInset
-        ? toggledContentInset
-        : initialContentInset;
-    setExampleProps({
-      automaticallyAdjustContentInsets: false,
-      contentInset: {top: newContentInset},
-      contentOffset: {y: -newContentInset, x: 0},
-    });
-    setOutput(`contentInset top: ${newContentInset.toString()}`);
-  };
-
-  return (
-    <>
-      <View
-        style={[
-          styles.titleContainer,
-          {height: exampleProps.contentInset.top},
-        ]}>
-        <Text style={styles.titleText}>Menu</Text>
-      </View>
-      <BaseFlatListExample
-        exampleProps={exampleProps}
-        testOutput={output}
-        onTest={onTest}
-        testLabel={'Toggle header size'}
-      />
-    </>
-  );
-}
-
 export function FlatList_withSeparators(): React.Node {
   const exampleProps = {
     ItemSeparatorComponent: Separator('lightgreen', 'green'),

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

@@ -0,0 +1,85 @@
+/**
+ * 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 strict-local
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import {StyleSheet, Text, View} from 'react-native';
+import BaseFlatListExample from './BaseFlatListExample';
+
+import * as React from 'react';
+
+export function FlatList_contentInset(): React.Node {
+  const [initialContentInset, toggledContentInset] = [44, 88];
+
+  const [output, setOutput] = React.useState(
+    `contentInset top: ${initialContentInset.toString()}`,
+  );
+  const [exampleProps, setExampleProps] = React.useState({
+    automaticallyAdjustContentInsets: false,
+    contentInset: {top: initialContentInset},
+    contentOffset: {y: -initialContentInset, x: 0},
+  });
+
+  const onTest = () => {
+    const newContentInset =
+      exampleProps.contentInset.top === initialContentInset
+        ? toggledContentInset
+        : initialContentInset;
+    setExampleProps({
+      automaticallyAdjustContentInsets: false,
+      contentInset: {top: newContentInset},
+      contentOffset: {y: -newContentInset, x: 0},
+    });
+    setOutput(`contentInset top: ${newContentInset.toString()}`);
+  };
+
+  return (
+    <>
+      <View
+        style={[
+          styles.titleContainer,
+          {height: exampleProps.contentInset.top},
+        ]}>
+        <Text style={styles.titleText}>Menu</Text>
+      </View>
+      <BaseFlatListExample
+        exampleProps={exampleProps}
+        testOutput={output}
+        onTest={onTest}
+        testLabel={'Toggle header size'}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    position: 'absolute',
+    top: 45,
+    left: 0,
+    right: 0,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'gray',
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 24,
+    lineHeight: 44,
+    fontWeight: 'bold',
+  },
+});
+
+export default ({
+  title: 'Content Inset',
+  name: 'contentInset',
+  description:
+    'The amount by which the scroll view content is inset from the edges of the scroll view.',
+  render: () => <FlatList_contentInset />,
+}: RNTesterModuleExample);

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

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