diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-maintainVisibleContentPosition.js b/packages/rn-tester/js/examples/FlatList/FlatList-maintainVisibleContentPosition.js new file mode 100644 index 00000000000..26ac2bfe0d3 --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-maintainVisibleContentPosition.js @@ -0,0 +1,99 @@ +/** + * Copyright (c) Meta Platforms, Inc. and 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 {RenderItemProps} from '../../../../virtualized-lists/Lists/VirtualizedListProps'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; + +import * as React from 'react'; +import {useCallback, useState} from 'react'; +import {Button, FlatList, StyleSheet, Text, View} from 'react-native'; + +const DATA = Array.from({length: 20}, (_, i) => ({ + id: i.toString(), +})); + +const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 0}; + +export function FlatList_maintainVisibleContentPosition(): React.Node { + const [height, setHeight] = useState(200); + const [isItemResponsive, setIsItemResponsive] = useState(true); + + const changeHeight = useCallback(() => { + setHeight(prevHeight => (prevHeight === 200 ? 400 : 200)); + }, []); + + const toggleResponsiveness = useCallback(() => { + setIsItemResponsive(prevIsItemResponsive => !prevIsItemResponsive); + }, []); + + const renderItem = useCallback( + ({item}: RenderItemProps<{id: string}>) => ( + + + {item.id} + + + ), + [height, isItemResponsive], + ); + + return ( + + + +