From 8f2c51bde3fd06fdf15293a4a9d048820a56ade3 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@fb.com>
Date: Thu, 18 Mar 2021 11:33:32 -0700
Subject: [PATCH] Example update to flex 1 and and make visibilityConfig as
 prop

Summary:
Changelog:
[General][Changed] - Updated SectionList example in RNTester

Lists need an explicit height set, otherwise their intrinsic height is the height of the root view. This causes rendering issues as shown in the test plan.

Additionally, refactored to allow visibilityConfig to be passed as prop for future tests.

Reviewed By: kacieb

Differential Revision: D27098086

fbshipit-source-id: b19155de79d00dddc287a1e2f9cdb240f2f31e27
---
 .../SectionList-onViewableItemsChanged.js     | 12 ++++++++-
 .../SectionList/SectionListExamples.js        | 25 ++++++++++++-------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
index 2c59bfc7d52..872e8b6831a 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
@@ -12,6 +12,12 @@
 import {SectionList_onViewableItemsChanged} from './SectionListExamples';
 const React = require('react');
 
+const VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+  waitForInteraction: true,
+};
+
 exports.title = 'SectionList onViewableItemsChanged';
 exports.testTitle = 'Test onViewableItemsChanged callback';
 exports.category = 'ListView';
@@ -24,7 +30,11 @@ exports.examples = [
     render: function(): React.Element<
       typeof SectionList_onViewableItemsChanged,
     > {
-      return <SectionList_onViewableItemsChanged />;
+      return (
+        <SectionList_onViewableItemsChanged
+          viewabilityConfig={VIEWABILITY_CONFIG}
+        />
+      );
     },
   },
 ];
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
index df68a5209f4..b81cf9674af 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js
@@ -16,7 +16,11 @@ import {
   Text,
   View,
 } from 'react-native';
+
 import * as React from 'react';
+type SectionListProps = React.ElementProps<typeof SectionList>;
+
+type ViewabilityConfig = $PropertyType<SectionListProps, 'viewabilityConfig'>;
 
 const DATA = [
   {
@@ -37,12 +41,6 @@ const DATA = [
   },
 ];
 
-const VIEWABILITY_CONFIG = {
-  minimumViewTime: 1000,
-  viewAreaCoveragePercentThreshold: 100,
-  waitForInteraction: true,
-};
-
 const Item = ({item, section, separators}) => {
   return (
     <Pressable
@@ -224,7 +222,10 @@ export function SectionList_withSeparators(): React.Node {
   );
 }
 
-export function SectionList_onViewableItemsChanged(): React.Node {
+export function SectionList_onViewableItemsChanged(props: {
+  viewabilityConfig: ViewabilityConfig,
+}): React.Node {
+  const {viewabilityConfig} = props;
   const [output, setOutput] = React.useState('');
   const exampleProps = {
     onViewableItemsChanged: info =>
@@ -234,7 +235,7 @@ export function SectionList_onViewableItemsChanged(): React.Node {
           .map(viewToken => viewToken.item)
           .join(', '),
       ),
-    viewabilityConfig: VIEWABILITY_CONFIG,
+    viewabilityConfig,
   };
 
   return (
@@ -258,7 +259,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
     ref: ?React.ElementRef<typeof SectionListExampleWithForwardedRef>,
   ): React.Node {
     return (
-      <View>
+      <View style={styles.container}>
         {props.testOutput != null ? (
           <View testID="test_container" style={styles.testContainer}>
             <Text numberOfLines={1} testID="output">
@@ -278,6 +279,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
           testID="section_list"
           sections={DATA}
           keyExtractor={(item, index) => item + index}
+          style={styles.list}
           renderItem={Item}
           renderSectionHeader={({section: {title}}) => (
             <Text style={styles.header}>{title}</Text>
@@ -323,6 +325,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#f2f2f7ff',
     padding: 4,
+    height: 40,
   },
   output: {
     fontSize: 12,
@@ -333,4 +336,8 @@ const styles = StyleSheet.create({
   separtorText: {
     fontSize: 10,
   },
+  list: {
+    flex: 1,
+  },
+  container: {flex: 1},
 });