Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RectButton, BorderlessButton and BaseButton don't have support for View ref methods #2894

Closed
tonihm96 opened this issue May 4, 2024 · 0 comments · Fixed by #2903
Closed
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: MacOS Platform: Web Repro provided A reproduction with a snack or repo is provided

Comments

@tonihm96
Copy link

tonihm96 commented May 4, 2024

Description

When passing refs to any of the aforementioned components, none of react-native's View methods are available, which means it is not possible to call measure or measureLayout for these components.

Steps to reproduce

  1. Pass ref down to RectButton, BorderlessButton or BaseButton
  2. Try to call ref.current.measure()

Snack or a link to a repository

https://snack.expo.dev/@tonihm96/react-native-gesture-handler-example

Gesture Handler version

2.14.0

React Native version

0.73.6

Platforms

Android, iOS, Web, MacOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

Pixel 2 XL UpsideDownCake

Acknowledgements

Yes

@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: MacOS Platform: Web Repro provided A reproduction with a snack or repo is provided labels May 4, 2024
@tonihm96 tonihm96 changed the title RectButton, BorderlessButton and BaseButton don't have support for View ref methods RectButton, BorderlessButton and BaseButton don't have support for View ref methods May 4, 2024
m-bert added a commit that referenced this issue May 17, 2024
## 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

<details>
<summary> Tested on slightly modified code from issue </summary>

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

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: MacOS Platform: Web Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant