diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
index 8e6b10479de7..9468ca97a51e 100644
--- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
@@ -9,30 +9,154 @@
*/
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import type {ScrollViewInstance} from 'react-native';
-import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {useRef, useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+
+const ROW_HEIGHT = 100;
+const INITIAL_OFFSET = ROW_HEIGHT * 6;
+const ANCHOR_POSITION = 10_000_000;
+const ROWS = Array.from({length: 30}, (_, index) => index);
function Playground() {
+ const [useZeroSizedAnchor, setUseZeroSizedAnchor] = useState(false);
+
return (
-
- Edit "RNTesterPlayground.js" to change this file
-
+
+ );
+}
+
+function AnchorExample({useZeroSizedAnchor}: {useZeroSizedAnchor: boolean}) {
+ const scrollView = useRef(null);
+ const [adjustment, setAdjustment] = useState(0);
+ const [offset, setOffset] = useState(0);
+
+ const rows = ROWS.map(index => (
+
+ Row {index}
+
+ ));
+
+ return (
+
+
+ {useZeroSizedAnchor
+ ? 'Scroll to row 6, then move the anchor. Row 6 should stay at the top. This uses the zero-sized anchor and item wrapper layout used by LegendList.'
+ : 'Scroll to row 6, then grow that row. Its top edge should stay in place. Negative z-index reverses the native child order.'}
+
+
);
}
const styles = StyleSheet.create({
container: {
+ flex: 1,
padding: 10,
},
+ example: {
+ flex: 1,
+ },
+ instructions: {
+ color: '#111827',
+ paddingVertical: 8,
+ },
+ scrollView: {
+ flex: 1,
+ borderWidth: 2,
+ borderColor: '#dc2626',
+ },
+ row: {
+ justifyContent: 'flex-start',
+ borderBottomWidth: 1,
+ borderColor: '#111827',
+ },
+ label: {
+ color: '#111827',
+ fontSize: 18,
+ padding: 8,
+ },
});
export default {
title: 'Playground',
name: 'playground',
- description: 'Test out new features and ideas.',
+ description: 'Android maintainVisibleContentPosition anchor selection.',
render: (): React.Node => ,
} as RNTesterModuleExample;