Fix border styling issues in RNGestureHandlerButton

[latekvo]

Description

This PR adds missing prop styles fields to the RNGestureHandlerButton delegate.

Since a lot of new logic would be required to support these new props, I decided to also rewrite ButtonViewGroup to use ReactViewGroup instead of ViewGroup, as our current implementation seemed to already share most of it's drawing-related code with the ReactViewGroup.
The only logic missing from ReactViewGroup was the ripple logic, the foreground logic, and the touch handling logic, so i kept those in place. Remaining redundant code was removed.

Fixes #3304

before	after

Test plan

Collapsed example

import React from 'react';
import { StyleSheet, Text, View, Pressable as RNPressable } from 'react-native';
import { Pressable } from 'react-native-gesture-handler';
import { isFabric } from '../../../src/utils';

export default function EmptyExample() {
  console.log('isFabric:', isFabric());
  const rippleConfig = { radius: 50, color: 'green' };

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <RNPressable style={styles.pressableOne} android_ripple={rippleConfig}>
          <Text>react-native</Text>
        </RNPressable>
        <Pressable style={styles.pressableOne} android_ripple={rippleConfig}>
          <Text>gesture-handler</Text>
        </Pressable>
      </View>
      <View style={styles.row}>
        <RNPressable style={styles.pressableTwo}>
          <Text>react-native</Text>
        </RNPressable>
        <Pressable style={styles.pressableTwo}>
          <Text>gesture-handler</Text>
        </Pressable>
      </View>
      <View style={styles.row}>
        <RNPressable style={styles.pressableThree}>
          <Text>react-native</Text>
        </RNPressable>
        <Pressable style={styles.pressableThreeSafe}>
          <Text>gesture-handler</Text>
        </Pressable>
      </View>
    </View>
  );
}

const SIZE = 110;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 5,
  },
  row: {
    flexDirection: 'row',
    gap: 5,
  },
  pressableOne: {
    backgroundColor: 'tomato',
    borderBottomColor: '#0ff',
    borderBottomWidth: 5,
    borderRightWidth: 5,
    width: SIZE,
    height: SIZE,
  },
  pressableTwo: {
    backgroundColor: 'yellow',
    borderWidth: 5,
    borderTopColor: '#0ff',
    borderBottomColor: '#0f0',
    borderLeftColor: '#f00',
    borderRightColor: '#00f',
    width: SIZE,
    height: SIZE,
  },
  pressableThree: {
    backgroundColor: 'cyan',
    borderWidth: 20,
    width: SIZE,
    height: SIZE,
    borderBottomRightRadius: 50,
    borderTopLeftRadius: '50%',
  },
  pressableThreeSafe: {
    backgroundColor: 'cyan',
    borderWidth: 20,
    width: SIZE,
    height: SIZE,
    borderBottomRightRadius: 50,
    // borderTopLeftRadius: '50%',
  },
});

[j-piasecki]

I'm not sure whether this is the right approach. React Native overrides the native onTouchEvent in its ViewGroup: https://github.com/facebook/react-native/blob/326467c856de9a8038688828c0b34c084e1a07dd/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.kt#L269-L280, and we would have no way of restoring the default behavior. I'd assume this would break some native interactions (like delaying the press inside a scroll view).

I think an approach with two views, where the outer one applies styling and the inner one is the actual button, would be safer and work on both platforms (iOS suffers from the same problem). We tried that in the past and failed, but now we could build it relying on display: contents not to break any layout.

[m-bert]

Closing this as #3634 was merged.