Add scrollToEnd ability to viewability tests

Summary: Changelog: [Internal] - RNTester FlatList and SectionList examples to add prop for scrolling to end of list. Reviewed By: kacieb Differential Revision: D27816830 fbshipit-source-id: 6b4bd4cb9a651f4a4e9045d600cc219a6ba2e39b
facebook · Apr 21, 2021 · ca8a755 · ca8a755
1 parent 7384471
commit ca8a755
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git 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 (
     <FlatListExampleWithForwardedRef
+      ref={ref}
       exampleProps={exampleProps}
+      onTest={onTest}
       testOutput={output}>
       {offScreen === true ? <View style={styles.offScreen} /> : null}
     </FlatListExampleWithForwardedRef>
@@ -230,7 +241,7 @@ const FlatListExampleWithForwardedRef = React.forwardRef(
       <View style={styles.container}>
         {props.testOutput != null ? (
           <View testID="test_container" style={styles.testContainer}>
-            <Text numberOfLines={1} testID="output">
+            <Text style={styles.output} numberOfLines={1} testID="output">
               {props.testOutput}
             </Text>
             {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
@@ -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 (
     <SectionListExampleWithForwardedRef
+      ref={ref}
       exampleProps={exampleProps}
+      onTest={onTest}
       testOutput={output}>
       {offScreen === true ? <View style={styles.offScreen} /> : null}
     </SectionListExampleWithForwardedRef>
@@ -264,7 +274,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
       <View style={styles.container}>
         {props.testOutput != null ? (
           <View testID="test_container" style={styles.testContainer}>
-            <Text numberOfLines={1} testID="output">
+            <Text style={styles.output} numberOfLines={1} testID="output">
               {props.testOutput}
             </Text>
             {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: {