Cannot use Button as child of Link.

[Michota]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

When using a Button with expo-router's <Link/> component with asChild` property, I get the following error.

export default function Page() {
  return (
    <Link href="/onboarding" asChild>
      <Button>
        Go About
      </Button>
    </Link>
  );
}

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Expected behavior

This should not happen, and should work out of box, just like in a case of other libraries.

Describe the bug

The Link and button are both working as intended, but errors are throwed to console. It works as it should with vanilla (imported from react-native package) component.

Steps To Reproduce

1. Install @rneui and expo-router packages
2. Use <Link> component with asChild prop and enter value to href prop
3. Place Button component as child of <Link/> (either by using <Link/>'s children prop, or just by placing Button between tags of <Link/>, like this <Link>

Screenshots

Your Environment

`npx @rneui/envinfo`

  ```
  React Native Elements Env Info

Global Dependencies:

No related dependency found

Local Dependencies:

• @rneui/base : ^4.0.0-rc.8
• @rneui/themed : ^4.0.0-rc.8
• expo : ~50.0.7
• react : 18.2.0
• react-native : 0.73.4
• @types/react : ~18.2.45

[MatrixTurtle269]

Facing the same issue

[ellisio]

This is because of the component not using Pressable, which forwards to a View. They have a comment in the code to refactor, but no updates as of late.

https://github.com/react-native-elements/react-native-elements/blob/next/packages/base/src/Button/Button.tsx#L173-L179