chore: pressable experiment

Author: mdjastrzebski

experiments-app/src/experiments.ts

@@ -1,4 +1,5 @@
 import { AccessibilityScreen } from './screens/Accessibility';
+import { PressEvents } from './screens/PressEvents';
 import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
 import { TextInputEvents } from './screens/TextInputEvents';
 import { ScrollViewEvents } from './screens/ScrollViewEvents';
@@ -13,6 +14,11 @@ export const experiments = [
     title: 'Accessibility',
     component: AccessibilityScreen,
   },
+  {
+    key: 'PressEvents',
+    title: 'Press Events',
+    component: PressEvents,
+  },
   {
     key: 'TextInputEvents',
     title: 'TextInput Events',

experiments-app/src/screens/PressEvents.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  TextInput,
+  View,
+  Pressable,
+  TouchableOpacity,
+} from 'react-native';
+import { nativeEventLogger, logEvent } from '../utils/helpers';
+
+export function PressEvents() {
+  const [value, setValue] = React.useState('');
+
+  const handleChangeText = (value: string) => {
+    setValue(value);
+    logEvent('changeText', value);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.wrapper}>
+        <TextInput
+          style={styles.textInput}
+          value={value}
+          onPress={nativeEventLogger('press')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        />
+      </View>
+      <View style={styles.wrapper}>
+        <Text
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          Text
+        </Text>
+      </View>
+      <View style={styles.wrapper}>
+        <Pressable
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          <Text>Pressable</Text>
+        </Pressable>
+      </View>
+      <View style={styles.wrapper}>
+        <TouchableOpacity
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          <Text>Pressable</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrapper: {
+    padding: 20,
+    backgroundColor: 'yellow',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    margin: 20,
+    padding: 8,
+    fontSize: 18,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});

experiments-app/src/utils/helpers.ts

@@ -1,5 +1,7 @@
 import { NativeSyntheticEvent } from 'react-native/types';
 
+let lastEventTimeStamp: number | null = null;
+
 export function nativeEventLogger(name: string) {
   return (event: NativeSyntheticEvent<unknown>) => {
     logEvent(name, event?.nativeEvent);
@@ -14,5 +16,6 @@ export function customEventLogger(name: string) {
 
 export function logEvent(name: string, ...args: unknown[]) {
   // eslint-disable-next-line no-console
-  console.log(`Event: ${name}`, ...args);
+  console.log(`[${Date.now() - (lastEventTimeStamp ?? Date.now())}ms] Event: ${name}`, ...args);
+  lastEventTimeStamp = Date.now();
 }

src/__tests__/render.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
-import { getConfig, resetToDefaults } from '../config';
+import { configure, getConfig, resetToDefaults } from '../config';
 import { fireEvent, render, RenderAPI, screen } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
@@ -247,7 +247,16 @@ test('supports legacy rendering', () => {
   expect(screen.root).toBeDefined();
 });
 
-test('supports concurrent rendering', () => {
+// Enable concurrent rendering globally
+configure({ concurrentRoot: true });
+
+test('globally enable concurrent rendering', () => {
+  render(<View testID="test" />);
+  expect(screen.root).toBeOnTheScreen();
+});
+
+// Enable concurrent rendering locally
+test('locally enable concurrent rendering', () => {
   render(<View testID="test" />, { concurrentRoot: true });
-  expect(screen.root).toBeDefined();
+  expect(screen.root).toBeOnTheScreen();
 });