react-native-gesture-handler
react-native-gesture-handler copied to clipboard
Fix border styling issues in `RNGestureHandlerButton`
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%',
},
});