Fix Pressable styling by removing unnecessary wrapping View

[latekvo]

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

Collapsed code

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',
  },
});

[m-bert]

I trust you that we don't need that View 🤨