React Navigation6 Header issue - react-native

Question

i'm building application with ReactNative and Expo, i building component called Header showing the title of each screen,
so i send props of name on each time render the component
<Header title={"Home Screen"}/>
Header.js comoment
import React,{ useState } from 'react';
import { Text, View, Image,StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { useNavigation } from "#react-navigation/native";
const Header=( navigation, title) =>{
const { navigate } = useNavigation();
return(
<View style={styles.container}>
<Icon name="user" size={28}/>
<Text style={{fontWeight:'bold'}} >{title}</Text>
<Icon name="bell" size={28} />
</View>
)
}
export default Header;
const styles = StyleSheet.create({
container:{
position:"absolute",
display:'flex',
justifyContent: 'space-between',
flexDirection:'row',
height: 60,
top:10 ,
left:6,
right:6,
elevation:0,
backgroundColor: '#fff',
alignItems: 'center',
}
})
this error showing:
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Answer 1

You just missed to de-structure your props in Header. Simply change your Header component to have
const Header=({ title }) =>{ // added {} to de-structure your props
const { navigate } = useNavigation();
return(
<View style={styles.container}>
<Icon name="user" size={28}/>
<Text style={{fontWeight:'bold'}} >{title}</Text>
<Icon name="bell" size={28} />
</View>
)
}