@testing-library/react-native 12.1.3 → 12.2.1

package/experiments-app/.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
-  "expoServerPort": 19000,
-  "packagerPort": 19000,
+  "expoServerPort": null,
+  "packagerPort": null,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

package/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"
   }
 }

package/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);
   };
 

package/experiments-app/src/experiments.ts

@@ -1,17 +1,35 @@
 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];
 
 export const experiments = [
   {
-    key: 'textInputEvents',
+    key: 'TextInputEvents',
     title: 'TextInput Events',
     component: TextInputEvents,
   },
   {
-    key: 'textInputEventPropagation',
+    key: 'TextInputEventPropagation',
     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,
+  },
 ];

package/experiments-app/src/screens/FlatListEvents.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { customEventLogger, nativeEventLogger } from '../utils/helpers';
+
+interface ItemData {
+  id: string;
+  title: string;
+}
+
+const data: ItemData[] = [...new Array(25)].map((_, index) => ({
+  id: `${index + 1}`,
+  title: `Item ${index + 1}`,
+}));
+
+export function FlatListEvents() {
+  const renderItem = ({ item }: { item: ItemData }) => {
+    return <Item item={item} />;
+  };
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      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')}
+    />
+  );
+}
+
+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,
+  },
+});

package/experiments-app/src/screens/ScrollViewEvents.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { StyleSheet, Text, ScrollView } from 'react-native';
+import { customEventLogger, nativeEventLogger } from '../utils/helpers';
+
+export function ScrollViewEvents() {
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="scrollableAxes"
+      scrollEventThrottle={150}
+      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
+        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,
+  },
+});

package/experiments-app/src/screens/SectionListEvents.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { StyleSheet, Text, View, SectionList } from 'react-native';
+import { customEventLogger, nativeEventLogger } 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'],
+  },
+];
+
+export function SectionListEvents() {
+  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
+      sections={sections}
+      keyExtractor={(item, index) => item + index}
+      renderSectionHeader={renderSectionHeader}
+      renderItem={renderItem}
+      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')}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: 'white',
+    fontSize: 24,
+  },
+  item: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+
+  title: {
+    fontSize: 20,
+  },
+});

package/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>

package/experiments-app/src/screens/TextInputEvents.tsx

@@ -1,20 +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 handleSubmitEditing = buildEventLogger('submitEditing');
+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 (
@@ -24,12 +17,17 @@ export function TextInputEvents() {
         value={value}
         editable={true}
         onChangeText={handleChangeText}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onSubmitEditing={handleSubmitEditing}
+        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>
   );

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