chore: experiments app tweaks (#1416)

mdjastrzebski · web-flow · commit 20c5e446b880 · 2023-08-08T11:23:48.000+02:00
* chore: fix expo warnings

* chore: log info about micro and macro tasks

* chore: expo upgrade

* refactor: simplify event handling

* chore: remove invalid deps

* chore: fix tsc
diff --git a/experiments-app/package.json b/experiments-app/package.json
@@ -14,18 +14,16 @@
   "dependencies": {
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
-    "add": "^2.0.6",
-    "expo": "~48.0.11",
-    "expo-status-bar": "~1.4.4",
+    "expo": "^49.0.0",
+    "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.71.6",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "yarn": "^1.22.19"
+    "react-native": "0.72.3",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.14",
-    "typescript": "^4.9.4"
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.3"
   }
 }
diff --git a/experiments-app/src/MainScreen.tsx b/experiments-app/src/MainScreen.tsx
@@ -28,6 +28,7 @@ function ListItem({ item }: ListItemProps) {
   const navigation = useNavigation();
 
   const handlePress = () => {
+    // @ts-expect-error missing navigation typing
     navigation.navigate(item.key);
   };
 
diff --git a/experiments-app/src/experiments.ts b/experiments-app/src/experiments.ts
@@ -8,27 +8,27 @@ export type Experiment = (typeof experiments)[number];
 
 export const experiments = [
   {
-    key: 'textInputEvents',
+    key: 'TextInputEvents',
     title: 'TextInput Events',
     component: TextInputEvents,
   },
   {
-    key: 'textInputEventPropagation',
+    key: 'TextInputEventPropagation',
     title: 'TextInput Event Propagation',
     component: TextInputEventPropagation,
   },
   {
-    key: 'scrollViewEvents',
+    key: 'ScrollViewEvents',
     title: 'ScrollView Events',
     component: ScrollViewEvents,
   },
   {
-    key: 'flatListEvents',
+    key: 'FlatListEvents',
     title: 'FlatList Events',
     component: FlatListEvents,
   },
   {
-    key: 'sectionListEvents',
+    key: 'SectionListEvents',
     title: 'SectionList Events',
     component: SectionListEvents,
   },
diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
+import { customEventLogger, nativeEventLogger } from '../utils/helpers';
 
 interface ItemData {
   id: string;
@@ -12,41 +12,26 @@ const data: ItemData[] = [...new Array(25)].map((_, index) => ({
   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}
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      onScroll={nativeEventLogger('scroll')}
+      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
+      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
+      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
+      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
+      onScrollToTop={nativeEventLogger('scrollToTop')}
+      onEndReached={customEventLogger('endReached')}
+      onContentSizeChange={customEventLogger('contentSizeChange')}
     />
   );
 }
diff --git a/experiments-app/src/screens/ScrollViewEvents.tsx b/experiments-app/src/screens/ScrollViewEvents.tsx
@@ -1,30 +1,19 @@
 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');
+import { customEventLogger, nativeEventLogger } from '../utils/helpers';
 
 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}
+      onScroll={nativeEventLogger('scroll')}
+      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
+      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
+      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
+      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
+      onScrollToTop={nativeEventLogger('scrollToTop')}
+      onContentSizeChange={customEventLogger('contentSizeChange')}
     >
       <Text style={styles.text}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
diff --git a/experiments-app/src/screens/SectionListEvents.tsx b/experiments-app/src/screens/SectionListEvents.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Text, View, SectionList } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
+import { customEventLogger, nativeEventLogger } from '../utils/helpers';
 
 interface SectionData {
   title: string;
@@ -42,22 +42,7 @@ const sections: SectionData[] = [
   },
 ];
 
-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>
   );
@@ -70,20 +55,20 @@ export function SectionListEvents() {
 
   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}
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      onScroll={nativeEventLogger('scroll')}
+      onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
+      onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
+      onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
+      onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
+      onScrollToTop={nativeEventLogger('scrollToTop')}
+      onEndReached={customEventLogger('endReached')}
+      onContentSizeChange={customEventLogger('contentSizeChange')}
     />
   );
 }
diff --git a/experiments-app/src/screens/TextInputEventPropagation.tsx b/experiments-app/src/screens/TextInputEventPropagation.tsx
@@ -1,15 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
-
-const handlePressIn = buildEventLogger('TextInput.pressIn');
-const handlePressOut = buildEventLogger('TextInput.pressOut');
-const handleFocus = buildEventLogger('TextInput.focus');
-const handleBlur = buildEventLogger('TextInput.blur');
-const handleChange = buildEventLogger('TextInput.change');
-const handleSubmitEditing = buildEventLogger('TextInput.submitEditing');
-
-const handlePressablePress = buildEventLogger('Pressable.press');
+import { nativeEventLogger } from '../utils/helpers';
 
 export function TextInputEventPropagation() {
   const [value, setValue] = React.useState('');
@@ -21,18 +12,15 @@ export function TextInputEventPropagation() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Pressable onPress={handlePressablePress}>
+      <Pressable onPress={nativeEventLogger('Pressable.press')}>
         <TextInput
           style={styles.textInput}
           value={value}
           editable={true}
           onChangeText={handleChangeText}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onSubmitEditing={handleSubmitEditing}
+          onChange={nativeEventLogger('TextInput.change')}
+          onPressIn={nativeEventLogger('TextInput.pressIn')}
+          onPressOut={nativeEventLogger('TextInput.pressOut')}
         />
       </Pressable>
     </SafeAreaView>
diff --git a/experiments-app/src/screens/TextInputEvents.tsx b/experiments-app/src/screens/TextInputEvents.tsx
@@ -1,25 +1,13 @@
 import * as React from 'react';
 import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
-import { buildEventLogger } from '../utils/helpers';
-
-const handlePressIn = buildEventLogger('pressIn');
-const handlePressOut = buildEventLogger('pressOut');
-const handleFocus = buildEventLogger('focus');
-const handleBlur = buildEventLogger('blur');
-const handleChange = buildEventLogger('change');
-const handleEndEditing = buildEventLogger('endEditing');
-const handleSubmitEditing = buildEventLogger('submitEditing');
-const handleKeyPress = buildEventLogger('keyPress');
-const handleTextInput = buildEventLogger('textInput');
-const handleSelectionChange = buildEventLogger('selectionChange');
-const handleContentSizeChange = buildEventLogger('contentSizeChange');
+import { nativeEventLogger, logEvent } from '../utils/helpers';
 
 export function TextInputEvents() {
   const [value, setValue] = React.useState('');
 
   const handleChangeText = (value: string) => {
     setValue(value);
-    console.log(`Event: changeText`, value);
+    logEvent('changeText', value);
   };
 
   return (
@@ -29,17 +17,17 @@ export function TextInputEvents() {
         value={value}
         editable={true}
         onChangeText={handleChangeText}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onEndEditing={handleEndEditing}
-        onSubmitEditing={handleSubmitEditing}
-        onKeyPress={handleKeyPress}
-        onTextInput={handleTextInput}
-        onSelectionChange={handleSelectionChange}
-        onContentSizeChange={handleContentSizeChange}
+        onChange={nativeEventLogger('change')}
+        onKeyPress={nativeEventLogger('keyPress')}
+        onEndEditing={nativeEventLogger('endEditing')}
+        onSubmitEditing={nativeEventLogger('submitEditing')}
+        onTextInput={nativeEventLogger('textInput')}
+        onSelectionChange={nativeEventLogger('selectionChange')}
+        onContentSizeChange={nativeEventLogger('contentSizeChange')}
+        onFocus={nativeEventLogger('focus')}
+        onBlur={nativeEventLogger('blur')}
+        onPressIn={nativeEventLogger('pressIn')}
+        onPressOut={nativeEventLogger('pressOut')}
       />
     </SafeAreaView>
   );
diff --git a/experiments-app/src/utils/helpers.ts b/experiments-app/src/utils/helpers.ts
@@ -1,8 +1,18 @@
 import { NativeSyntheticEvent } from 'react-native/types';
 
-export function buildEventLogger(name: string) {
+export function nativeEventLogger(name: string) {
   return (event: NativeSyntheticEvent<unknown>) => {
-    const eventData = event?.nativeEvent ?? event;
-    console.log(`Event: ${name}`, eventData);
+    logEvent(name, event?.nativeEvent);
   };
 }
+
+export function customEventLogger(name: string) {
+  return (...args: unknown[]) => {
+    logEvent(name, ...args);
+  };
+}
+
+export function logEvent(name: string, ...args: unknown[]) {
+  // eslint-disable-next-line no-console
+  console.log(`Event: ${name}`, ...args);
+}
diff --git a/experiments-app/yarn.lock b/experiments-app/yarn.lock
