navigationOptions do not exist on type - react-navigation v6 with Typescript

I'm currently trying to integrate Typescript with React Native and I'm having issues using the react-navigation v6.

I've read plenty of resources around this but it's all related to older version of react-navigation and it seems to have changed quite dramatically from v4.

When trying to add component specific values to the navigation options I get this error:

Property 'navigationOptions' does not exist on type 'FC

Here is the component:

import React, { FC, useEffect } from 'react'import { useSelector } from 'react-redux'import { View, ImageBackground, StyleSheet } from 'react-native'import { RootState } from 'store/rootReducer'import { Headline } from 'react-native-paper'import { SharedElement } from 'react-navigation-shared-element'import { ProductListProp } from '../../models/navigationModel'interface IProductOverviewScreenProps {  route: ProductListProp['route'];  navigation: ProductListProp['navigation'];}const ProductDetailScreen:FC <IProductOverviewScreenProps> = ({ route, navigation }) => {  const products = useSelector((state: RootState) => state.products.availableProducts)  const { productId } = route.params  const selectedProduct = products.filter((product) => product.id === productId)[0]  useEffect(() => {    navigation.setOptions({ title: selectedProduct.title })  }, [selectedProduct])  return (<View><SharedElement id={ selectedProduct.id }><ImageBackground          style={ styles.image }          source={ { uri: selectedProduct.imageUrl } }        /></SharedElement><Headline>{selectedProduct.title}</Headline></View>  )}// this is where the error isProductDetailScreen.navigationOptions = {  title: 'some title'}const styles = StyleSheet.create({  image: {    width: '100%',    height: 400,  }})export default ProductDetailScreen

I know that I can use the setOptions wrapped in useEffect but as this takes a moment to set in the View I'd prefer to pass the product title down in the params and set it to avoid glitchy text in the header.

Update

The way I fixed this issue was to add to the types.ts file in the root of the project and define the roots for the different screens.

If there are no params required for the root then it can be set to undefined, or you define the types for the params in this file as well:

types.ts

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'import { NativeStackScreenProps } from '@react-navigation/native-stack'declare global {  // eslint-disable-next-line @typescript-eslint/no-namespace  namespace ReactNavigation {    // eslint-disable-next-line @typescript-eslint/no-empty-interface    interface RootParamList extends RootStackParamList {}  }}export type RootStackParamList = {  Root: NavigatorScreenParams<RootTabParamList> | undefined;  Modal: undefined;  NotFound: undefined;  Login: undefined;  StartUp: undefined;}export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<RootStackParamList,Screen>export type RootTabParamList = {  Milestones: undefined;  AcceptanceCriteria: undefined;  TabThree: undefined;  TabFour: undefined;}export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<BottomTabScreenProps<RootTabParamList, Screen>,NativeStackScreenProps<RootStackParamList>>

And then reference these in the navigation file like this:

import { RootStackParamList, RootTabParamList } from '../../types'const BottomTab = createBottomTabNavigator<RootTabParamList>()const Stack = createNativeStackNavigator<RootStackParamList>()const MaterialTabs = createMaterialBottomTabNavigator<RootTabParamList>()