Add maintainVisibleContentPosition example in rn-tester (#47126)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47126

This will be used to validate the fix to `maintainVisibleContentPosition` for the two major use cases when the FlatList resizes:
* when the items have fixed size
* when the items scale with the size of the list

Changelog: [Internal]

Reviewed By: Abbondanzo

Differential Revision: D64339251

fbshipit-source-id: d0ee8d73cd9e6527a7ce0950e8f3941337b70474

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<number>(200);
+  const [isItemResponsive, setIsItemResponsive] = useState<boolean>(true);
+
+  const changeHeight = useCallback(() => {
+    setHeight(prevHeight => (prevHeight === 200 ? 400 : 200));
+  }, []);
+
+  const toggleResponsiveness = useCallback(() => {
+    setIsItemResponsive(prevIsItemResponsive => !prevIsItemResponsive);
+  }, []);
+
+  const renderItem = useCallback(
+    ({item}: RenderItemProps<{id: string}>) => (
+      <View
+        key={item.id}
+        style={{
+          height: (isItemResponsive ? height : 200) - 32,
+          paddingVertical: 8,
+        }}>
+        <View style={styles.item}>
+          <Text style={styles.itemText}>{item.id}</Text>
+        </View>
+      </View>
+    ),
+    [height, isItemResponsive],
+  );
+
+  return (
+    <View style={styles.root}>
+      <FlatList
+        data={DATA}
+        decelerationRate="fast"
+        key={isItemResponsive ? 'responsive' : 'non-responsive'}
+        maintainVisibleContentPosition={MAINTAIN_VISIBLE_CONTENT_POSITION}
+        pagingEnabled={true}
+        renderItem={renderItem}
+        showsVerticalScrollIndicator={false}
+        snapToAlignment="center"
+        style={{height}}
+      />
+      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <Button onPress={changeHeight} title="Change height" />
+        <Button
+          onPress={toggleResponsiveness}
+          title={`Make item ${isItemResponsive ? 'non-responsive' : 'responsive'}`}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    alignItems: 'center',
+    backgroundColor: '#4CAF50',
+    borderRadius: 16,
+    flex: 1,
+    justifyContent: 'center',
+  },
+  itemText: {
+    color: '#fff',
+    fontSize: 24,
+  },
+  root: {
+    gap: 16,
+    paddingHorizontal: 16,
+  },
+});
+
+export default ({
+  title: 'maintainVisibleContentPosition',
+  name: 'maintainVisibleContentPosition',
+  description: 'Test maintainVisibleContentPosition prop on FlatList',
+  render: () => <FlatList_maintainVisibleContentPosition />,
+}: RNTesterModuleExample);

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

@@ -13,6 +13,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
 import BasicExample from './FlatList-basic';
 import ContentInsetExample from './FlatList-contentInset';
 import InvertedExample from './FlatList-inverted';
+import MaintainVisibleContentPosition from './FlatList-maintainVisibleContentPosition';
 import MultiColumnExample from './FlatList-multiColumn';
 import NestedExample from './FlatList-nested';
 import OnEndReachedExample from './FlatList-onEndReached';
@@ -36,6 +37,7 @@ export default ({
   showIndividualExamples: true,
   examples: [
     BasicExample,
+    MaintainVisibleContentPosition,
     OnStartReachedExample,
     OnEndReachedExample,
     ContentInsetExample,