Migrate FlatList examples to Flow component syntax (#55584)

Summary:
Pull Request resolved: #55584

Migrates React components in rn-tester FlatList examples from the legacy
function syntax to the modern Flow component syntax.

The Flow component syntax is the preferred pattern for writing React
components in Flow-typed codebases at Meta.

Files changed:
- FlatList-contentInset.js
- FlatList-inverted.js
- FlatList-maintainVisibleContentPosition.js
- FlatList-multiColumn.js
- FlatList-nested.js
- FlatList-onEndReached.js
- FlatList-onStartReached.js
- FlatList-stickyHeaders.js
- FlatList-withSeparators.js

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D93482900

fbshipit-source-id: 0bf306b28de9f919ed63a3da34042161e863bcdc

Author: fabriziocucci

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

@@ -15,7 +15,7 @@ import * as React from 'react';
 import {useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
-export function FlatList_contentInset(): React.Node {
+export component FlatList_contentInset() {
   const [initialContentInset, toggledContentInset] = [44, 88];
 
   const [output, setOutput] = useState(

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

@@ -14,7 +14,7 @@ import BaseFlatListExample from './BaseFlatListExample';
 import * as React from 'react';
 import {useState} from 'react';
 
-export function FlatList_inverted(): React.Node {
+export component FlatList_inverted() {
   const [output, setOutput] = useState('inverted false');
   const [exampleProps, setExampleProps] = useState({
     inverted: false,

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

@@ -21,7 +21,7 @@ const DATA = Array.from({length: 20}, (_, i) => ({
 
 const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 0};
 
-export function FlatList_maintainVisibleContentPosition(): React.Node {
+export component FlatList_maintainVisibleContentPosition() {
   const [height, setHeight] = useState<number>(200);
   const [isItemResponsive, setIsItemResponsive] = useState<boolean>(true);
 

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

@@ -31,7 +31,7 @@ import * as React from 'react';
 import {useCallback, useState} from 'react';
 import {Alert, FlatList, StyleSheet, View} from 'react-native';
 
-function MultiColumnExample(): React.Node {
+component MultiColumnExample() {
   const [data, setData] = useState(genNewerItems(1000));
   const [filterText, setFilterText] = useState('');
   const [fixedHeight, setFixedHeight] = useState(true);

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

@@ -76,7 +76,7 @@ function reducer(state: ItemsState, action: ItemsAction): ItemsState {
   return state;
 }
 
-function NestedListExample(): React.Node {
+component NestedListExample() {
   const [outer, dispatchOuter] = useReducer(reducer, initialItemsState);
   const [inner, dispatchInner] = useReducer(reducer, initialItemsState);
   const sortedInnerViewableItems = useMemo(
@@ -152,18 +152,12 @@ function NestedListExample(): React.Node {
   );
 }
 
-function OuterItemRenderer({
-  index,
-  item,
-  dispatchOuter,
-  dispatchInner,
-}: {
+component OuterItemRenderer(
   index: number,
   item: OuterItem,
   dispatchOuter: ItemsAction => void,
   dispatchInner: ItemsAction => void,
-  ...
-}) {
+) {
   useEffect(() => {
     dispatchOuter({
       type: 'add-rendered',
@@ -262,14 +256,7 @@ function OuterItemRenderer({
   }
 }
 
-function InnerItemRenderer({
-  item,
-  dispatchInner,
-}: {
-  item: number,
-  dispatchInner: ItemsAction => void,
-  ...
-}) {
+component InnerItemRenderer(item: number, dispatchInner: ItemsAction => void) {
   useEffect(() => {
     dispatchInner({
       type: 'add-rendered',

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

@@ -16,7 +16,7 @@ import BaseFlatListExample from './BaseFlatListExample';
 import * as React from 'react';
 import {useRef, useState} from 'react';
 
-export function FlatList_onEndReached(): React.Node {
+export component FlatList_onEndReached() {
   const [output, setOutput] = useState('');
   const exampleProps = {
     onEndReached: (info: {distanceFromEnd: number, ...}) =>

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

@@ -17,7 +17,7 @@ import * as React from 'react';
 import {useRef, useState} from 'react';
 import {FlatList} from 'react-native';
 
-export function FlatList_onStartReached(): React.Node {
+export component FlatList_onStartReached() {
   const [output, setOutput] = useState('');
   const exampleProps = {
     onStartReached: (info: {distanceFromStart: number, ...}) =>

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

@@ -38,7 +38,7 @@ const Item = ({item, separators}: ListRenderItemInfo<string>) => {
   );
 };
 
-export function FlatList_stickyHeaders(): React.Node {
+export component FlatList_stickyHeaders() {
   return (
     <FlatList
       data={DATA}

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

@@ -42,7 +42,7 @@ const Separator =
     );
   };
 
-export function FlatList_withSeparators(): React.Node {
+export component FlatList_withSeparators() {
   const exampleProps = {
     ItemSeparatorComponent: Separator('lightgreen', 'green'),
   };