diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json index e816af0a1d2..7470c242d8b 100644 --- a/packages/@react-native-windows/tester/overrides.json +++ b/packages/@react-native-windows/tester/overrides.json @@ -19,6 +19,40 @@ "baseFile": "packages/rn-tester/js/examples/Switch/SwitchExample.js", "baseHash": "fdf533bef0d75f8126faf21186b160ae7616e81f" }, + { + "type": "patch", + "file": "src/js/examples/FlatList/BaseFlatListExample.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js", + "baseHash": "0534172146a367964104ea45b2193cd389108b46", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-basic.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-basic.js", + "baseHash": "5a8bd77ecd44a43f5de57cf3fcf1653ed4f85818", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-multiColumn.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js", + "baseHash": "194b5caf919b2acb35ba5e0766b8b8451345e7a8", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-nested.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-nested.js", + "baseHash": "960b318861263f59423188b5d4f3e2de5dac4e66", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-stickyHeaders.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-stickyHeaders.js", + "baseHash": "7d524f19d1e93ea6f15b87d6c8096e13bb015847" + }, { "type": "patch", "file": "src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js", diff --git a/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js new file mode 100644 index 00000000000..30da1baf928 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js @@ -0,0 +1,175 @@ +/** + * 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 'react-native/Libraries/Lists/VirtualizedList'; + +import * as React from 'react'; +import { + Button, + FlatList, + Pressable, + StyleSheet, + Text, + View, +} from 'react-native'; + +const DATA = [ + 'Pizza', + 'Burger', + 'Risotto', + 'French Fries', + 'Onion Rings', + 'Fried Shrimps', + 'Water', + 'Coke', + 'Beer', + 'Cheesecake', + 'Ice Cream', +]; + +const Item = ({item, separators}: RenderItemProps) => { + return ( + { + separators.highlight(); + }} + onPress={() => { + separators.updateProps('trailing', {hasBeenHighlighted: true}); + separators.updateProps('leading', {hasBeenHighlighted: true}); + }} + onPressOut={() => { + separators.unhighlight(); + }} + style={({pressed}) => [ + styles.item, + { + backgroundColor: pressed ? 'red' : 'pink', + }, + ]} + testID={item}> + {item} + + ); +}; + +type Props = { + exampleProps: Partial>, + onTest?: ?() => void, + testLabel?: ?string, + testOutput?: ?string, + children?: ?React.Node, +}; + +const BaseFlatListExample = React.forwardRef( + // $FlowFixMe[incompatible-call] + ( + props: Props, + ref: + | ((null | FlatList) => mixed) + | {current: null | FlatList, ...}, + ) => { + return ( + + {props.testOutput != null ? ( + + + {props.testOutput} + + {props.onTest != null ? ( +