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

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}
+        />
+      );
     },
   },
 ];

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},
 });