Fix LegacyPressable (#4016)

## Description

`LegacyPressable` does not work as underlying button implementation had
changed. Because previous button is still accessible, I've changed
`LegacyPressable` to use it instead of new one, bringing back old
behavior.

On web it required some changes as buttons are exported as `export
default`, so simply changing non-web button and import in `Pressable`
caused crash on web.

I've also removed `forwardedRef` from web button and fixed button
example so it doesn't always indicate `onLongPress`.

## Test plan

Tested on expo-example, on examples with `Pressable` and `Buttons`
example

Author: m-bert

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

@@ -29,7 +29,7 @@ function ButtonWrapper({
     <ButtonComponent
       style={[styles.button, { backgroundColor: color }]}
       onPress={() =>
-        feedback?.current?.showMessage(`[${ButtonComponent.name}] onLongPress`)
+        feedback?.current?.showMessage(`[${ButtonComponent.name}] onPress`)
       }
       onLongPress={() => {
         feedback?.current?.showMessage(`[${ButtonComponent.name}] onLongPress`);

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

@@ -70,7 +70,7 @@ export interface ButtonProps extends ViewProps, AccessibilityProps {
   /**
    * Invoked on mount and layout changes.
    */
-  onLayout?: (event: LayoutChangeEvent) => void;
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
@@ -101,7 +101,7 @@ export interface ButtonProps extends ViewProps, AccessibilityProps {
   testOnly_onLongPress?: Function | null | undefined;
 }
 
-const ButtonComponent =
+export const ButtonComponent =
   RNGestureHandlerButtonNativeComponent as HostComponent<ButtonProps>;
 
 export default function GestureHandlerButton({ style, ...rest }: ButtonProps) {

packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, ViewProps } from 'react-native';
 
-export default React.forwardRef<React.ComponentRef<typeof View>>(
-  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
+type ButtonProps = ViewProps & {
+  ref?: React.Ref<React.ComponentRef<typeof View>>;
+};
+
+export const ButtonComponent = (props: ButtonProps) => (
+  <View accessibilityRole="button" {...props} />
 );
+
+export default ButtonComponent;

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

@@ -19,7 +19,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import NativeButton from '../GestureHandlerButton';
+import { ButtonComponent as NativeButton } from '../GestureHandlerButton';
 import {
   gestureToPressableEvent,
   addInsets,