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

[rzfzr]

Current behaviour

When using a Button, I get the following error.

import React from 'react';
import {Link} from 'expo-router';
import {Button} from 'react-native-paper';

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

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

Check the render method of `SlotClone`.
    in Button (created by SlotClone)
    in SlotClone (created by Slot)
    in Slot
    in ExpoRouterLink (created by Page)
    in Page
    in Unknown (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by QualifiedSlot)
    in QualifiedSlot (created by DefaultNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by QualifiedNavigator)
    in QualifiedNavigator (created by Navigator)
    in Navigator (created by DefaultNavigator)
    in RNCSafeAreaView
    in Unknown (created by DefaultNavigator)
    in DefaultNavigator
    in Unknown (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in ThemeProvider (created by PaperProvider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by PaperProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in manus(RootComponent)

Expected behaviour

Not have that error?

How to reproduce?

Here's my package.json

{
  "name": "manus",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "clear": "expo start --dev-client --clear",
    "android": "react-native run-android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "lint": "eslint .",
    "test": "jest"
  },
  "resolutions": {
    "metro": "0.76.7"
  },
  "dependencies": {
    "@react-native-firebase/app": "^18.2.0",
    "@react-native-firebase/auth": "^18.2.0",
    "@react-native-firebase/firestore": "^18.2.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-voice/voice": "^3.2.4",
    "expo": "^49.0.3",
    "expo-constants": "~14.4.2",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-paper": "^5.9.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.9",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.72.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "engines": {
    "node": ">=16"
  }
}

Your Environment

software	version
android	13
react-native	0.72.3
react-native-paper	5.9.1
node	16.20.1
npm or yarn	1.22.19
expo sdk	49.0.3

[TensionCoding]

I am experiencing the same issue by passing the Button component to the Link component

[LucastheFront]

Does anyone has updates on this topic? I am experiencing the same issue and it's pretty sad that we can't use a custom functional component inside the Link component.

[Haukez]

I have the same issue experience by passing the Button component to the Link component. I use a Button from https://reactnativeelements.com/docs/next/components/button

[lukewalczak]

Should be fixed in version 5.11.1

[rollingmoai]

Updates on this? TouchableRipple still has the same problem.

[rzfzr]

Updates on this? TouchableRipple still has the same problem.

@rollingmoai are you on 5.11.1? If so it might require an additional fix...

[rollingmoai]

Yes, only the button component is fixed.

[DimitarNestorov]

@rollingmoai try v5.11.2

[rollingmoai]

Can confirm it now works. Thanks for the quick fix!

[vadolasi]

ListItem has not yet been fixed

[DimitarNestorov]

@vadolasi Can you try v5.11.6

[yugantjoshi]

Experiencing this problem on the Card component. Each card should be able to route me to the dynamic route when clicked. Using "react-native-paper": "5.12.3",

[santiago-paz]

Updates?

[adnan-razzaq]

Facing same issues for Box component. IconButton

[topherlandry]

I seem to be getting the same issue with TextInputOutlined. TextInputFlat isn't wrapped either. But TextInput is.

[wolak]

Same issue for Chip.

{label}

[ELHart05]

Same story

                <Controller
                    name="phone"
                    control={control}
                    rules={{
                        required: {
                            value: true,
                            message: "Phone is required"
                        },
                        pattern: {
                            value: /^[0-9]{9,15}$/,
                            message: "Invalid phone number"
                        }
                    }}
                    render={({ field: { ...field } }) => (
                        <CrystalPhoneInput
                            {...field}
                            isPale
                        />
                    )}
                />