diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
index 92c97fd49f1..37cc0dfa227 100644
--- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
+++ b/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 (
- <>
-
- Menu
-
-
- >
- );
-}
-
export function FlatList_withSeparators(): React.Node {
const exampleProps = {
ItemSeparatorComponent: Separator('lightgreen', 'green'),
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js b/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js
new file mode 100644
index 00000000000..81c28422062
--- /dev/null
+++ b/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 (
+ <>
+
+ Menu
+
+
+ >
+ );
+}
+
+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: () => ,
+}: RNTesterModuleExample);
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js
index 294800b2d1b..82c46773523 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js
+++ b/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);