I am trying to build a simple react-native application and facing the following issue in my code. If I remove the <Link> component and keep the <Text> component, error is going away. If I try to keep the <Link> component and remove the <Text> component, error comes back.
Can anyone please help me with this?
import * as React from "react";
import { View, Text } from "react-native";
import { Link } from "react-router-native";
function Home() {
return (
<View>
<Text>Welcome!</Text>
<Link to="/profile">Visit your profile</Link>
</View>
);
}
Error: React.Children.only expected to receive a single React element child.
In v6 react-router, The <Link> should have exactly 1 element. But in your case, The text Visit, your and profile is being assumed as 3 text nodes.
To make it as one element, You can simply wrap it into <Text>. So the <Link> will have only one <Text> element but that has 3 text nodes inside which is not a problem to <Link>
function Home() {
return (
<View>
<Text>Welcome!</Text>
<Link to="/profile">
<Text>Visit your profile<Text>
</Link>
</View>
);
}
The react-router V6 docs say that <Link> renders a TouchableHighlight and it must have at least (and most) one child and also must be wrapped in a <View> element. Please change your implementation as follows.
import * as React from 'react';
import {View, Text} from 'react-native';
import {Link} from 'react-router-native';
function Home() {
return (
<View>
<Text>Welcome!</Text>
<Link to="/profile">
<Text>Visit your profile</Text>
</Link>
</View>
);
}
If you want to override default styling and behavior, please refer to the Props reference for TouchableHighlight.