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