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.