Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>