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

[rakeshpetit]

Summary

 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 Home)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by Home)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by Screen)
    in Screen (created by Home)
    in RNCSafeAreaView
    in Unknown
    in NativeWind.NoName
    in Unknown (created by SafeArea)
    in SafeArea (created by Home)
    in Home (created by Route(Home))
    in Route (created by Route(Home))
    in LocationProvider (created by Route(Home))
    in Route(Home) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by QualifiedSlot)
    in QualifiedSlot (created by Slot)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by QualifiedNavigator)
    in QualifiedNavigator (created by Navigator)
    in Navigator (created by Slot)
    in Slot (created by RootLayout)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by RootLayout)
    in Provider (created by RootLayout)
    in RootLayout (created by Route(RootLayout))
    in Route (created by Route(RootLayout))
    in LocationProvider (created by Route(RootLayout))
    in Route(RootLayout) (created by RootRoute)
    in RootRoute (created by ContextNavigator)
    in LocationProvider (created by ContextNavigator)
    in InitialRootStateProvider (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by InternalContextNavigationContainer)
    in InternalContextNavigationContainer (created by ContextNavigationContainer)
    in ContextNavigationContainer (created by ContextNavigator)
    in RootRouteNodeProvider (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

We receive an Yellow screen warning with the error mentioned above with example 1 whereas it works fine for example 2.

Minimal reproducible example

Example 1

import { Link } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { Text, View } from 'react-native'

const MyLink = () => {
  return <Text>Button</Text>
}

export default function Home() {
  return (
    <View>
      <StatusBar style="auto" />
      <Link href="/route" asChild>
        <MyLink />
      </Link>
    </View>
  )
}

Example 2

import { Link } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { Text, View } from 'react-native'

export default function Home() {
  return (
    <View>
      <StatusBar style="auto" />
      <Link href="/route" asChild>
        <Text>Button</Text>
      </Link>
    </View>
  )
}