diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExamples.js b/packages/rn-tester/js/examples/FlatList/FlatListExamples.js
index b8144eb7e4a091..dd7aff7302215d 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExamples.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExamples.js
@@ -188,8 +188,9 @@ export function FlatList_onViewableItemsChanged(props: {
viewabilityConfig: ViewabilityConfig,
offScreen?: ?boolean,
horizontal?: ?boolean,
+ useScrollRefScroll?: ?boolean,
}): React.Node {
- const {viewabilityConfig, offScreen, horizontal} = props;
+ const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
const [output, setOutput] = React.useState('');
const onViewableItemsChanged = React.useCallback(
info =>
@@ -207,9 +208,19 @@ export function FlatList_onViewableItemsChanged(props: {
horizontal,
};
+ const ref = React.useRef(null);
+ const onTest =
+ useScrollRefScroll === true
+ ? () => {
+ ref?.current?.getScrollResponder()?.scrollToEnd();
+ }
+ : null;
+
return (
{offScreen === true ? : null}
@@ -230,7 +241,7 @@ const FlatListExampleWithForwardedRef = React.forwardRef(
{props.testOutput != null ? (
-
+
{props.testOutput}
{props.onTest != null ? (
@@ -290,11 +301,11 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f2f2f7ff',
- padding: 4,
height: 40,
},
output: {
fontSize: 12,
+ width: '80%',
},
separator: {
height: 12,
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
index 34cd8770e1d54f..f960022a4160bd 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
@@ -226,8 +226,9 @@ export function SectionList_onViewableItemsChanged(props: {
viewabilityConfig: ViewabilityConfig,
offScreen?: ?boolean,
horizontal?: ?boolean,
+ useScrollRefScroll?: ?boolean,
}): React.Node {
- const {viewabilityConfig, offScreen, horizontal} = props;
+ const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
const [output, setOutput] = React.useState('');
const exampleProps = {
onViewableItemsChanged: info =>
@@ -240,10 +241,19 @@ export function SectionList_onViewableItemsChanged(props: {
viewabilityConfig,
horizontal,
};
+ const ref = React.useRef(null);
+ const onTest =
+ useScrollRefScroll === true
+ ? () => {
+ ref?.current?.getScrollResponder()?.scrollToEnd();
+ }
+ : null;
return (
{offScreen === true ? : null}
@@ -264,7 +274,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
{props.testOutput != null ? (
-
+
{props.testOutput}
{props.onTest != null ? (
@@ -327,10 +337,10 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f2f2f7ff',
- padding: 4,
height: 40,
},
output: {
+ width: '80%',
fontSize: 12,
},
separator: {