ScrollView experiments

experiments-app/src/experiments.ts

@@ -1,5 +1,8 @@
 import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
 import { TextInputEvents } from './screens/TextInputEvents';
+import { ScrollViewEvents } from './screens/ScrollViewEvents';
+import { FlatListEvents } from './screens/FlatListEvents';
+import { SectionListEvents } from './screens/SectionListEvents';
 
 export type Experiment = (typeof experiments)[number];
 
@@ -14,4 +17,19 @@ export const experiments = [
     title: 'TextInput Event Propagation',
     component: TextInputEventPropagation,
   },
+  {
+    key: 'scrollViewEvents',
+    title: 'ScrollView Events',
+    component: ScrollViewEvents,
+  },
+  {
+    key: 'flatListEvents',
+    title: 'FlatList Events',
+    component: FlatListEvents,
+  },
+  {
+    key: 'sectionListEvents',
+    title: 'SectionList Events',
+    component: SectionListEvents,
+  },
 ];

experiments-app/src/screens/FlatListEvents.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+interface ItemData {
+  id: string;
+  title: string;
+}
+
+const data: ItemData[] = [...new Array(25)].map((_, index) => ({
+  id: `${index + 1}`,
+  title: `Item ${index + 1}`,
+}));
+
+const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
+const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
+const handleScroll = buildEventLogger('scroll');
+const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
+const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
+const handleScrollToTop = buildEventLogger('scrollToTop');
+
+export function FlatListEvents() {
+  const handleContentSizeChange = (w: number, h: number) => {
+    console.log(`Event: contentSizeChange`, w, h);
+  };
+
+  const handleEndReached = (info: { distanceFromEnd: number }) => {
+    console.log(`Event: endReached`, info.distanceFromEnd);
+  };
+
+  const renderItem = ({ item }: { item: ItemData }) => {
+    return <Item item={item} />;
+  };
+
+  return (
+    <FlatList
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      onContentSizeChange={handleContentSizeChange}
+      onMomentumScrollBegin={handleMomentumScrollBegin}
+      onMomentumScrollEnd={handleMomentumScrollEnd}
+      onScroll={handleScroll}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={handleScrollEndDrag}
+      onScrollToTop={handleScrollToTop}
+      onEndReached={handleEndReached}
+    />
+  );
+}
+
+interface ItemProps {
+  item: ItemData;
+}
+
+const Item = ({ item }: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{item.title}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  item: {
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+  },
+  title: {
+    fontSize: 20,
+  },
+});

experiments-app/src/screens/ScrollViewEvents.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { StyleSheet, Text, ScrollView } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
+const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
+const handleScroll = buildEventLogger('scroll');
+const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
+const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
+const handleScrollToTop = buildEventLogger('scrollToTop');
+
+export function ScrollViewEvents() {
+  const handleContentSizeChange = (w: number, h: number) => {
+    console.log(`Event: contentSizeChange`, w, h);
+  };
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      onContentSizeChange={handleContentSizeChange}
+      onMomentumScrollBegin={handleMomentumScrollBegin}
+      onMomentumScrollEnd={handleMomentumScrollEnd}
+      onScroll={handleScroll}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={handleScrollEndDrag}
+      onScrollToTop={handleScrollToTop}
+    >
+      <Text style={styles.text}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Gravida neque
+        convallis a cras semper auctor neque. Ultrices in iaculis nunc sed augue
+        lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit amet tellus
+        cras adipiscing enim. Velit aliquet sagittis id consectetur purus ut
+        faucibus pulvinar.
+      </Text>
+      <Text style={styles.text}>
+        Eget gravida cum sociis natoque penatibus. Nunc sed blandit libero
+        volutpat sed cras. Aliquet bibendum enim facilisis gravida neque
+        convallis a cras. Euismod nisi porta lorem mollis aliquam. Consequat
+        mauris nunc congue nisi vitae suscipit tellus. Mauris pellentesque
+        pulvinar pellentesque habitant morbi tristique. Nulla aliquet enim
+        tortor at auctor.
+      </Text>
+      <Text style={styles.text}>
+        A condimentum vitae sapien pellentesque. Quis eleifend quam adipiscing
+        vitae. Elit ut aliquam purus sit amet luctus venenatis. Id faucibus nisl
+        tincidunt eget nullam non nisi est. Nunc non blandit massa enim nec dui
+        nunc. Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames
+        ac turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed
+        blandit.
+      </Text>
+      <Text style={styles.text}>
+        Molestie nunc non blandit massa enim nec dui nunc. Velit laoreet id
+        donec ultrices tincidunt arcu. Imperdiet nulla malesuada pellentesque
+        elit eget. Id neque aliquam vestibulum morbi blandit cursus. Ut
+        tristique et egestas quis. Nisl nunc mi ipsum faucibus vitae aliquet nec
+        ullamcorper sit. Cursus mattis molestie a iaculis at erat.
+      </Text>
+      <Text style={styles.text}>
+        Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui sapien
+        eget mi proin sed. Metus vulputate eu scelerisque felis. In pellentesque
+        massa placerat duis ultricies lacus sed turpis. Id leo in vitae turpis
+        massa sed elementum.
+      </Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    fontSize: 24,
+  },
+});

experiments-app/src/screens/SectionListEvents.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { StyleSheet, Text, View, SectionList } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+interface SectionData {
+  title: string;
+  data: string[];
+}
+
+const sections: SectionData[] = [
+  {
+    title: 'Main dishes',
+    data: [
+      'Pizza',
+      'Burger',
+      'Risotto',
+      'Pasta',
+      'Fish',
+      'Chicken',
+      'Beef',
+      'Dumplings',
+    ],
+  },
+  {
+    title: 'Sides',
+    data: [
+      'French Fries',
+      'Onion Rings',
+      'Fried Shrimps',
+      'Potatoes',
+      'Salad',
+      'Garlic Bread',
+    ],
+  },
+  {
+    title: 'Drinks',
+    data: ['Water', 'Coke', 'Beer', 'Tea', 'Coffee', 'Soda', 'Matcha'],
+  },
+  {
+    title: 'Desserts',
+    data: ['Cheese Cake', 'Ice Cream', 'Chocolate', 'Cookies', 'Fruits'],
+  },
+];
+
+const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
+const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
+const handleScroll = buildEventLogger('scroll');
+const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
+const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
+const handleScrollToTop = buildEventLogger('scrollToTop');
+
+export function SectionListEvents() {
+  const handleContentSizeChange = (w: number, h: number) => {
+    console.log(`Event: contentSizeChange`, w, h);
+  };
+
+  const handleEndReached = (info: { distanceFromEnd: number }) => {
+    console.log(`Event: endReached`, info);
+  };
+
+  const renderSectionHeader = ({ section }: { section: SectionData }) => (
+    <Text style={styles.header}>{section.title}</Text>
+  );
+
+  const renderItem = ({ item }: { item: string }) => (
+    <View style={styles.item}>
+      <Text style={styles.title}>{item}</Text>
+    </View>
+  );
+
+  return (
+    <SectionList
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      sections={sections}
+      keyExtractor={(item, index) => item + index}
+      renderSectionHeader={renderSectionHeader}
+      renderItem={renderItem}
+      onContentSizeChange={handleContentSizeChange}
+      onMomentumScrollBegin={handleMomentumScrollBegin}
+      onMomentumScrollEnd={handleMomentumScrollEnd}
+      onScroll={handleScroll}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={handleScrollEndDrag}
+      onScrollToTop={handleScrollToTop}
+      onEndReached={handleEndReached}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: 'white',
+    fontSize: 24,
+  },
+  item: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+
+  title: {
+    fontSize: 20,
+  },
+});