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

Add `ref` property to `Buttons`

Open m-bert opened this issue 2 months ago • 0 comments

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

m-bert avatar May 10 '24 10:05 m-bert