React Navigation6 Header issue-CodePudding

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.

CodePudding user response：

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>
  )
}