react-native-gesture-handler
react-native-gesture-handler copied to clipboard
Add `ref` property to `Buttons`
Description
Currently our components (BaseButton
, RectButton
and BorderlessButton
) don't support refs
, so it is impossible to use methods like measure
.
This PR adds wrapper to these components, so that they are now exported as ForwardRef
.
Fixes #2894
Test plan
Tested on slightly modified code from issue
import React, { useRef } from 'react';
import { Text, StyleSheet } from 'react-native';
import {
BaseButton,
BorderlessButton,
GestureHandlerRootView,
RectButton,
} from 'react-native-gesture-handler';
export default function App() {
const rectButtonRef = useRef(null);
const borderlessButtonRef = useRef(null);
const baseButtonRef = useRef(null);
const handlePress = () => {
try {
baseButtonRef.current?.measure?.((x, y, width, height) => {
console.log('baseButtonRef', x, y, width, height);
});
rectButtonRef.current?.measure?.((x, y) => {
console.log('rectButtonRef', x, y);
});
borderlessButtonRef.current?.measure?.((x, y) => {
console.log('borderlessButtonRef', x, y);
});
} catch (e) {
console.error(e);
}
};
return (
<GestureHandlerRootView style={styles.container}>
<RectButton onPress={handlePress} style={styles.button}>
<Text style={styles.text}>Press me</Text>
</RectButton>
<BaseButton ref={baseButtonRef} style={styles.button}>
<Text style={styles.text}>Test</Text>
</BaseButton>
<BorderlessButton ref={borderlessButtonRef} style={styles.button}>
<Text style={styles.text}>Test</Text>
</BorderlessButton>
<RectButton ref={rectButtonRef} style={styles.button}>
<Text style={styles.text}>Test</Text>
</RectButton>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: 20,
},
button: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
backgroundColor: 'grey',
paddingHorizontal: 20,
paddingVertical: 10,
},
text: {
color: 'white',
},
});