Having difficulty using the Link component with the asChild property and custom component as the child element #632
Replies: 14 comments 5 replies
-
If you could share your code, the problem would be more understandable, but did you try innerRef instead of forwardRef? |
Beta Was this translation helpful? Give feedback.
-
Any updates on this? I'm having the exact same issue. |
Beta Was this translation helpful? Give feedback.
-
I think react-native-paper has a PR to address this, not sure if it's been merged in yet. Personally I have a custom button component and I include the ref and wrap the component with forwardref so for example:
|
Beta Was this translation helpful? Give feedback.
-
Getting set up with expo and RN for the first time. As a test, I extracted the button to a new component and ran into this same issue. I get an error in the console saying: "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?" and the link stops working. Working code:import { Link } from "expo-router"
import { View, Button, StyleSheet } from "react-native"
export default function TestScreen() {
return (
<View style={styles.container}>
<Link href="/home" asChild>
<Button title="Go Home" color="#841584" />
</Link>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#6544E9",
alignItems: "center",
justifyContent: "center",
},
image: {
width: 165,
height: 50,
},
}) broken code:import { Link } from "expo-router"
import { View, Button, StyleSheet } from "react-native"
const MyButton = ({ title, color }) => {
return <Button title={title} color={color} />
}
export default function TestScreen() {
return (
<View style={styles.container}>
<Link href="/home" asChild>
<MyButton title="Go Home" color="#841584" />
</Link>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#6544E9",
alignItems: "center",
justifyContent: "center",
},
image: {
width: 165,
height: 50,
},
}) |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I'm also having the same problem trying to use my own Button component inside a Link component from expo router. Here is my code: Button Component
App Component:
Any ideas on how to solve this ? When I use the useRef hook inside the App Component and console log it, I can see that the ref is successfully set up on the Pressable. Thanks for your help, |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I've just had another look at this after upgrading to expo-router version 2, however, I'm still having issues when wanting to wrap a custom component in a Link for navigating. It would be great if the documentation actually covered how this can be achieved. I don't get the warning but the navigation isn't triggered so it's not been passed correctly or it's missing certain props to enable this functionality. |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, You need to pass the onPress and onClick props to your custom button as such.
The Link prop requires those two props to be passed down. |
Beta Was this translation helpful? Give feedback.
-
Here is how I handled this: import { Pressable, Text, View } from "react-native";
import { Link } from "expo-router";
import styles, { colors } from "../utils/styles";
import { forwardRef } from "react";
import BaseView from "../components/BaseView";
const LinkButton = forwardRef(({ onPress, onClick, ...props }, ref) => (
<Pressable
style={({ pressed }) => (
{
...styles.button.base,
...(pressed ? styles.button.active : styles.button.passive)
}
)}
ref={ref}
onPress={onPress}
onClick={onClick}
>
{({ pressed }) => (
<Text
style={{
...styles.fonts.base,
textAlign: "center",
color: (pressed ? colors.white.primary : colors.blue.primary)
}}
>
{props.children}
</Text>
)}
</Pressable>)
)
const Root = () => {
return (
<View style={styles.baseView}>
<Text style={styles.textLanding}>Hello</Text>
<Link href="/login" asChild>
<LinkButton>
Login
</LinkButton>
</Link>
</View>
)
}
export default Root; |
Beta Was this translation helpful? Give feedback.
-
Set asChild={true} tells the Link component to treat its child component as the clickable element. Just put a Pressable inside the Link, that works for me. |
Beta Was this translation helpful? Give feedback.
-
This answer from another topic seems to work well for me with a good use of typescript : #278 (comment) |
Beta Was this translation helpful? Give feedback.
-
If anyone needs to fix this...
Hope it helps |
Beta Was this translation helpful? Give feedback.
-
What also a bit of a shame is that <Link href={`/details/${id}`} asChild>
<Text style={styles.linkText}>{`Show details for ${${id}}`}</Text>
</Link> does work (no warning, working link) <Link href={`/details/${id}`} asChild>
<Button title={`Show details for ${${id}}`}/>
</Link> does not. (warning, sometimes working link but breaks component render) |
Beta Was this translation helpful? Give feedback.
-
Any news on this? I have a custom Button component which uses
And I use it with
Only way I could make it work was my wrapping the custom button component in a |
Beta Was this translation helpful? Give feedback.
-
Hello, I also face this kind of issue. I fixed it like this
|
Beta Was this translation helpful? Give feedback.
-
Hi everyone,
When using the Link component with the "asChild" to forward the props to my custom component/s, however, I'm very confused about how you should actually use this component.
When I wrap my components in the Link component and set asChild to true I get the following warning: "Function components cannot be given refs. Attempts to access this ref will fail warning"
What I did to try and resolve the issue:
It's not very clear why this is happening as based on the documentation there is no mention of needing to add the forwardRef in the Link section of the documentation;
It would be great to get some clarifications around the usage of the Link component as I favour this for navigating instead of using onClick onLongPress etc
Thank's,
Alex
Warning screenshot:
Beta Was this translation helpful? Give feedback.
All reactions