diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js index 37cc0dfa227..89b01623045 100644 --- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js +++ b/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 ( - - ); -} - export function FlatList_withSeparators(): React.Node { const exampleProps = { ItemSeparatorComponent: Separator('lightgreen', 'green'), diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js b/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js new file mode 100644 index 00000000000..eaa27747a03 --- /dev/null +++ b/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 ( + + ); +} + +export default ({ + title: 'Inverted', + name: 'inverted', + description: 'Test inverted prop on FlatList', + render: () => , +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js index 82c46773523..819ef78c9ff 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js +++ b/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);