Add ref property to Buttons

[m-bert]

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

[j-piasecki]

Also, you mentioned not wanting innerRef to be accessible, I think we are exporting this type publicly.

[m-bert]

Yup, I've missed that. I've changed that in cf193d1, though I'm not sure if this is the best way to do this. Maybe there are some TypeScript tricks that we could use to make it look better, cc @tjzel

[tjzel]

I can't really think of a solution here that wouldn't need any extensive changes sadly :c

[j-piasecki]

Assuming that this doesn't break types, it looks ok to me.