software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.14k stars 982 forks source link

Add `ref` property to `Buttons` #2903

Closed m-bert closed 6 months ago

m-bert commented 6 months ago

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 ```jsx 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 ( Press me Test Test Test ); } 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', }, }); ```