Test examples (#3961)

## Description

This PR ports some legacy examples to v3, which I didn't rewrite
previosuly in
#3857.
Particularly those marked as "release tests" and those related to
pressable.

It also adds two new examples:
* reattach, for testing whether gesture reattaching works, because I
often find myself testing it
* timer, inspired by old multitap example, which I found confusing.

## Test plan

Check if the examples work

Author: akwasniewski

apps/common-app/src/common.tsx

@@ -32,6 +32,21 @@ export interface ExamplesSection {
   data: Example[];
 }
 
+export const COLORS = {
+  offWhite: '#f8f9ff',
+  headerSeparator: '#eef0ff',
+  PURPLE: '#b58df1',
+  NAVY: '#001A72',
+  RED: '#A41623',
+  YELLOW: '#F2AF29',
+  GREEN: '#0F956F',
+  GRAY: '#ADB1C2',
+  KINDA_RED: '#FFB2AD',
+  KINDA_YELLOW: '#FFF096',
+  KINDA_GREEN: '#C4E7DB',
+  KINDA_BLUE: '#A0D5EF',
+};
+
 /* eslint-disable react-native/no-unused-styles */
 export const commonStyles = StyleSheet.create({
   centerView: {
@@ -44,6 +59,8 @@ export const commonStyles = StyleSheet.create({
     width: 150,
     borderRadius: 20,
     marginBottom: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   ball: {
     height: 120,
@@ -72,6 +89,25 @@ export const commonStyles = StyleSheet.create({
     justifyContent: 'center',
     textAlign: 'center',
   },
+  row: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 40,
+    padding: 20,
+  },
+  centered: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  caption: {
+    fontSize: 12,
+    color: COLORS.GRAY,
+    fontWeight: '600',
+    marginTop: 4,
+  },
 });
 /* eslint-enable react-native/no-unused-styles */
 
@@ -93,7 +129,7 @@ const styles = StyleSheet.create({
     color: '#4A5568',
   },
   feedback: {
-    marginTop: 20,
+    marginVertical: 10,
     fontSize: 16,
     fontWeight: '600',
   },
@@ -197,21 +233,6 @@ export const Feedback = ({ duration = 1000, ref }: FeedbackProps) => {
   );
 };
 
-export const COLORS = {
-  offWhite: '#f8f9ff',
-  headerSeparator: '#eef0ff',
-  PURPLE: '#b58df1',
-  NAVY: '#001A72',
-  RED: '#A41623',
-  YELLOW: '#F2AF29',
-  GREEN: '#0F956F',
-  GRAY: '#ADB1C2',
-  KINDA_RED: '#FFB2AD',
-  KINDA_YELLOW: '#FFF096',
-  KINDA_GREEN: '#C4E7DB',
-  KINDA_BLUE: '#A0D5EF',
-};
-
 const LOREM_IPSUM = `
 Curabitur accumsan sit amet massa quis cursus. Fusce sollicitudin nunc nisl, quis efficitur quam tristique eget. Ut non erat molestie, ullamcorper turpis nec, euismod neque. Praesent aliquam risus ultricies, cursus mi consectetur, bibendum lorem. Nunc eleifend consectetur metus quis pulvinar. In vitae lacus eu nibh tincidunt sagittis ut id lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sagittis mauris rhoncus, maximus justo in, consequat dolor. Pellentesque ornare laoreet est vulputate vestibulum. Aliquam sit amet metus lorem.
 

apps/common-app/src/legacy/release_tests/gesturizedPressable/testingBase.tsx

@@ -7,8 +7,8 @@ import {
   PressableProps as RNPressableProps,
 } from 'react-native';
 import {
-  Pressable as GesturizedPressable,
-  PressableProps as GHPressableProps,
+  LegacyPressable as GesturizedPressable,
+  LegacyPressableProps as GHPressableProps,
 } from 'react-native-gesture-handler';
 
 const TestingBase = (props: GHPressableProps & RNPressableProps) => (

apps/common-app/src/new_api/hover_mouse/mouse_buttons/index.tsx

@@ -70,13 +70,15 @@ function Tests({ name, color, mouseButton, feedbackRef }: TestsProps) {
     onUpdate: () => {
       feedbackRef.current?.showMessage(`Panning with ${name}`);
     },
+    disableReanimated: true,
   });
 
   const longPress = useLongPressGesture({
     mouseButton,
     onActivate: () => {
       feedbackRef.current?.showMessage(`LongPress with ${name}`);
     },
+    disableReanimated: true,
   });
 
   const fling = useFlingGesture({
@@ -85,6 +87,7 @@ function Tests({ name, color, mouseButton, feedbackRef }: TestsProps) {
     onActivate: () => {
       feedbackRef.current?.showMessage(`Fling with ${name}`);
     },
+    disableReanimated: true,
   });
 
   const gestures = [tap, longPress, pan, fling];

apps/common-app/src/new_api/index.tsx

@@ -5,6 +5,7 @@ import OverlapExample from './showcase/overlap';
 import SharedValueExample from './showcase/shared_value';
 import SvgExample from './showcase/svg';
 import StateManagerExample from './showcase/state_manager';
+import TimerExample from './showcase/timer';
 
 import CameraExample from './complicated/camera';
 import ChatHeadsExample from './complicated/chat_heads';
@@ -32,6 +33,15 @@ import ScrollViewExample from './components/scrollview';
 import Swipeable from './components/swipeable/index';
 import SwitchTextInputExample from './components/switchAndInput';
 
+import RectButtonExample from './tests/rectButton';
+import TwoFingerPanExample from './tests/twoFingerPan';
+import WebStylesResetExample from './tests/webStylesReset';
+import PointerTypeExample from './tests/pointerType';
+import ReattachingExample from './tests/reattaching';
+import NestedRootViewExample from './tests/nestedRootView';
+import NestedPressablesExample from './tests/nestedPressables';
+import PressableExample from './tests/pressable';
+
 import { ExamplesSection } from '../common';
 import EmptyExample from '../empty';
 
@@ -62,13 +72,18 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: 'Bottom Sheet', component: BottomSheetExample },
       { name: 'Overlap', component: OverlapExample },
       { name: 'Animated', component: AnimatedExample },
+      { name: 'Timer', component: TimerExample },
     ],
   },
   {
     sectionTitle: 'Hover and mouse',
     data: [
       { name: 'Stylus Data', component: StylusDataExample },
-      { name: 'Context Menu', component: ContextMenuExample },
+      {
+        name: 'Context Menu',
+        component: ContextMenuExample,
+        unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
+      },
       { name: 'Hover Icons', component: HoverIconsExample },
       { name: 'Hoverable Icons', component: HoverableIconsExample },
       { name: 'Mouse Buttons', component: MouseButtonsExample },
@@ -95,4 +110,21 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },
     ],
   },
+  {
+    sectionTitle: 'Tests',
+    data: [
+      { name: 'RectButton', component: RectButtonExample },
+      { name: 'Two Finger Trackpad Pan', component: TwoFingerPanExample },
+      {
+        name: 'Web Styles Reset',
+        component: WebStylesResetExample,
+        unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
+      },
+      { name: 'Pointer Type', component: PointerTypeExample },
+      { name: 'Reattaching', component: ReattachingExample },
+      { name: 'Modal with Nested Root View', component: NestedRootViewExample },
+      { name: 'Nested pressables', component: NestedPressablesExample },
+      { name: 'Pressable', component: PressableExample },
+    ],
+  },
 ];

apps/common-app/src/new_api/showcase/timer/index.tsx

@@ -0,0 +1,96 @@
+import React, { useRef } from 'react';
+import { StyleSheet, View, Text, TextInput } from 'react-native';
+import {
+  useLongPressGesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  cancelAnimation,
+  Easing,
+  useAnimatedProps,
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated';
+import {
+  Feedback,
+  FeedbackHandle,
+  COLORS,
+  commonStyles,
+} from '../../../common';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export default function TimerExample() {
+  const feedbackRef = useRef<FeedbackHandle>(null);
+  const duration = useSharedValue(0);
+  const colorProgress = useSharedValue(0);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: `Duration: ${duration.value.toFixed(2)}s`,
+    } as any;
+  });
+
+  const animatedBoxStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.PURPLE, COLORS.NAVY]
+      ),
+    };
+  });
+
+  const longPressGesture = useLongPressGesture({
+    onBegin: () => {
+      colorProgress.value = withTiming(1, { duration: 150 });
+      duration.value = 0;
+      duration.value = withTiming(600, {
+        duration: 600000,
+        easing: Easing.linear,
+      });
+    },
+    onFinalize: () => {
+      colorProgress.value = withTiming(0, { duration: 300 });
+      cancelAnimation(duration);
+    },
+  });
+
+  return (
+    <GestureHandlerRootView style={commonStyles.centerView}>
+      <View style={styles.container}>
+        <AnimatedTextInput
+          underlineColorAndroid="transparent"
+          editable={false}
+          value="Duration: 0.00s"
+          style={styles.timerText}
+          animatedProps={animatedProps}
+        />
+        <GestureDetector gesture={longPressGesture}>
+          <Animated.View style={[commonStyles.box, animatedBoxStyle]} />
+        </GestureDetector>
+        <Text style={commonStyles.instructions}>
+          Hold the box to measure press duration
+        </Text>
+        <Feedback ref={feedbackRef} />
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  timerText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: COLORS.NAVY,
+    marginBottom: 20,
+    textAlign: 'center',
+    fontVariant: ['tabular-nums'],
+  },
+});