react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Fix border styling issues in `RNGestureHandlerButton`

Open latekvo opened this issue 9 months ago • 0 comments

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
img img

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

latekvo avatar Feb 14 '25 13:02 latekvo