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: {