Sometimes, we want to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.
In this article, we’ll look at how to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.
How to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native?
To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.
For instance, we write
const Comnp = () => {
//...
const { height, width } = Dimensions.get("window");
return (
<View style={styles.container}>
<Image
style={{
height,
width,
}}
source={require("image!foo")}
resizeMode="cover"
/>
<TouchableHighlight style={styles.button}>
<Text> highlight text</Text>
</TouchableHighlight>
</View>
);
};
to add the Text component into the TouchableHighlight component.
We keep the Image outside the TouchableHighlight so we only have a single child component in the TouchableHighlight component.
Conclusion
To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.
