How to set header title dynamically inside of a component in react navigaton 6?

CategoryMealScreen.navigationOptions = navigationData => {
  const catId = navigationData.navigation.getParam('categoryId');

  const selectedCategory = CATEGORIES.find(cat => cat.id === catId);

  return {
    headerTitle: selectedCategory.title
  };
};

The above works fine with react navigation 4 inside of a component. But it doesn’t work for react navigation 6 . I want to use this inside of a component not on the navigator . "navigationOptions" is not available in version 6, I tired using "options" instead but that also didn’t work. I want to set the header title dynamically inside of a component. Please help.

>Solution :

You can use the navigation.setOptions in the latest react navigation and change the title parameter inside that, like shown below:

useEffect(()=>{
      props.navigation.setOptions({ title: "Title"})
  },[])

Do it inside the component you want to use.