Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? #3988
Description
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 |