Fix Pressable styling by removing unnecessary wrapping View (#3087)

## Description

This PR removes outer `View` from `Pressable` which was previously used
for applying props, which were otherwise unavailable on `NativeButton`.

All such props have been either manually implemented, or have turned out
to be available to use directly in `NativeButton`, so the outer `View`
can be safely removed.

closes #3085

## Test plan

- paste the provided code in place of the `EmptyExample`
- open the `EmptyExample`
- see how both the boxes on the left, and the ones on the right behave
identically

## Verifying accessibility

- platform specific setup
  - `[iOS]` Turn on `smart inverted colors mode`
  - `[Android]` Turn on `talkback`
- paste the provided code in place of the `EmptyExample`
- open the `EmptyExample`
- platform specific steps
- `[iOS]` See how the `Nested box model styling` section has regular
colors
- `[Android]` Press the `Nested box model styling` and hear how it says
`Accessibility is working`

note:
Most accessibility styles are not implemented on `web`, but you can
verify that accessibility is working on web by inspecting the
`Pressable` and looking for `role="button"` prop in the HTML, it is an
accessibility prop that i found to be working on web.


## Code

<details>

<summary>
Collapsed code
</summary>

```tsx

import React from 'react';
import { StyleSheet, Text, View, Pressable as RNPressable } from 'react-native';
import {
  Pressable as GHPressable,
  PressableProps,
} from 'react-native-gesture-handler';

function Pressables(props: PressableProps) {
  const onPressInGH = () => console.log('GH press');
  const onPressInRN = () => console.log('RN press');

  return (
    <View style={styles.container}>
      <GHPressable
        {...(props as any)}
        onPressIn={onPressInGH}
        style={[styles.pressable, props.style]}>
        {props.children ?? <Text>Gesture Handler!</Text>}
      </GHPressable>
      <RNPressable
        {...(props as any)}
        onPressIn={onPressInRN}
        style={[styles.pressable, props.style]}>
        {props.children ?? <Text>React Native!</Text>}
      </RNPressable>
    </View>
  );
}

export default function EmptyExample() {
  return (
    <View style={styles.multirow}>
      <Text style={styles.header}>Padding</Text>
      <Pressables style={{ padding: 16 }} />

      <Text style={styles.header}>GH nested pressable</Text>
      <Pressables style={{ flex: 1, backgroundColor: 'plum' }}>
        <GHPressable
          style={{
            backgroundColor: 'orange',
          }}>
          <Text>Gesture Handler</Text>
        </GHPressable>
      </Pressables>

      <Text style={styles.header}>RN nested pressable</Text>
      <Pressables style={{ flex: 1, backgroundColor: 'plum' }}>
        <RNPressable
          style={{
            backgroundColor: 'orange',
          }}>
          <Text>React Native</Text>
        </RNPressable>
      </Pressables>

      <Text style={styles.header}>2 nested pressables</Text>
      <Pressables
        style={{ flex: 1, backgroundColor: 'plum', flexDirection: 'row' }}>
        <GHPressable
          style={{
            backgroundColor: 'pink',
          }}>
          <Text style={{ padding: 8 }}>GH</Text>
        </GHPressable>
        <RNPressable
          style={{
            backgroundColor: 'orange',
          }}>
          <Text style={{ padding: 8 }}>RN</Text>
        </RNPressable>
      </Pressables>

      <Text style={styles.header}>Nested box model styling</Text>
      <Pressables accessibilityIgnoresInvertColors>
        <View style={{ backgroundColor: 'orange', padding: 8, margin: 8 }}>
          <View style={{ backgroundColor: 'plum', margin: 8 }}>
            <Text>Hello World!</Text>
          </View>
        </View>
      </Pressables>

      <Text style={styles.header}>Flex view in a fixed size Pressable</Text>
      <Pressables style={{ width: 100, height: 100 }}>
        <View style={styles.textWrapper}>
          <Text>Pressable!</Text>
        </View>
      </Pressables>

      <Text style={styles.header}>Flex view in a formless size Pressable</Text>
      <Pressables>
        <View style={styles.textWrapper}>
          <Text>Pressable!</Text>
        </View>
      </Pressables>

      <Text style={styles.header}>Standalone pressable</Text>
      <Pressables>
        <Text>Pressable!</Text>
      </Pressables>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  multirow: {
    flex: 1,
    flexDirection: 'column',
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    gap: 30,
    margin: 30,
    marginTop: 5,
  },
  pressable: {
    backgroundColor: 'tomato',
    borderWidth: 1,
    maxWidth: '30%',
  },
  textWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

```

</details>

Author: latekvo

src/components/Pressable/Pressable.tsx

@@ -9,7 +9,6 @@ import {
   View,
   ViewStyle,
   processColor,
-  StyleSheet,
 } from 'react-native';
 import NativeButton from '../GestureHandlerButton';
 import {
@@ -18,7 +17,6 @@ import {
   isTouchWithinInset,
   gestureTouchToPressableEvent,
   addInsets,
-  splitStyles,
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
@@ -386,33 +384,22 @@ export default function Pressable(props: PressableProps) {
       ? children({ pressed: pressedState })
       : children;
 
-  const flattenedStyles = StyleSheet.flatten(styleProp ?? {});
-
-  const [innerStyles, outerStyles] = splitStyles(flattenedStyles);
-
   return (
-    <View {...remainingProps} style={outerStyles}>
-      <GestureDetector gesture={gesture}>
-        <NativeButton
-          ref={pressableRef}
-          hitSlop={appliedHitSlop}
-          enabled={isPressableEnabled}
-          touchSoundDisabled={android_disableSound ?? undefined}
-          rippleColor={processColor(
-            android_ripple?.color ?? defaultRippleColor
-          )}
-          rippleRadius={android_ripple?.radius ?? undefined}
-          style={[
-            { width: '100%', height: '100%' },
-            pointerStyle,
-            innerStyles,
-          ]}>
-          {childrenProp}
-          {__DEV__ ? (
-            <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
-          ) : null}
-        </NativeButton>
-      </GestureDetector>
-    </View>
+    <GestureDetector gesture={gesture}>
+      <NativeButton
+        {...remainingProps}
+        ref={pressableRef}
+        hitSlop={appliedHitSlop}
+        enabled={isPressableEnabled}
+        touchSoundDisabled={android_disableSound ?? undefined}
+        rippleColor={processColor(android_ripple?.color ?? defaultRippleColor)}
+        rippleRadius={android_ripple?.radius ?? undefined}
+        style={[pointerStyle, styleProp]}>
+        {childrenProp}
+        {__DEV__ ? (
+          <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
+        ) : null}
+      </NativeButton>
+    </GestureDetector>
   );
 }

src/components/Pressable/utils.ts

@@ -1,4 +1,4 @@
-import { Insets, ViewStyle } from 'react-native';
+import { Insets } from 'react-native';
 import { LongPressGestureHandlerEventPayload } from '../../handlers/GestureHandlerEventPayload';
 import {
   TouchData,
@@ -125,56 +125,10 @@ const gestureTouchToPressableEvent = (
   };
 };
 
-type StylePropKeys = (keyof ViewStyle)[];
-
-// Source:
-// - From ViewStyle extracted FlexStyle sub-interface which contains all of the box-model manipulating props.
-// - From FlexStyle handpicked those styles, which act on the inner part of the box-model.
-const innerStyleKeys = new Set([
-  'alignContent',
-  'alignItems',
-  'flexBasis',
-  'flexDirection',
-  'flexWrap',
-  'rowGap',
-  'gap',
-  'columnGap',
-  'justifyContent',
-  'overflow',
-  'padding',
-  'paddingBottom',
-  'paddingEnd',
-  'paddingHorizontal',
-  'paddingLeft',
-  'paddingRight',
-  'paddingStart',
-  'paddingTop',
-  'paddingVertical',
-  'start',
-  'end',
-  'direction', // iOS only
-] as StylePropKeys);
-
-const splitStyles = (from: ViewStyle): [ViewStyle, ViewStyle] => {
-  const outerStyles: Record<string, unknown> = {};
-  const innerStyles: Record<string, unknown> = {};
-
-  for (const key in from) {
-    if (innerStyleKeys.has(key as keyof ViewStyle)) {
-      innerStyles[key] = from[key as keyof ViewStyle];
-    } else {
-      outerStyles[key] = from[key as keyof ViewStyle];
-    }
-  }
-
-  return [innerStyles, outerStyles];
-};
-
 export {
   numberAsInset,
   addInsets,
   isTouchWithinInset,
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
-  splitStyles,
 };