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

React native Typescript RouteProp: does not exist on type 'IntrinsicAttributes & Props'

$
0
0

I am using react navigation props name RouteProp in my app. My app works fine without Typescript error. I am trying to test my component, does it render the data properly. In my test suite I import the components and when I trying to send the props I am getting typescript error:

Type '{ key: string; name: Routes; params: { product:Partial; }; }' is not assignable to type'ProductDetailsScreenRouteProp'. Type '{ key: string; name: Routes;params: { product: Partial; }; }' is not assignable to type'Readonly<{ key: string; name: Routes.ProductDetails; }>'.Types of property 'name' are incompatible.Type 'Routes' is not assignable to type 'Routes.ProductDetails'.ts(2322) product_details_screen.tsx(43, 3):The expected type comes from property 'route' which is declared hereon type 'IntrinsicAttributes & Props'

I really don't what I am doing wrong.

PS: My test pass. I want to rid of this typescript error

This is my component

    import { RouteProp } from '@react-navigation/native';    type ProductDetailsScreenRouteProp = RouteProp<      RootStackParamList,      Routes.ProductDetails>;    interface Props {      route: ProductDetailsScreenRouteProp;    }    const ProductDetailsScreen = (props: Props) => {      const { product } = props.route.params;   .....    }

This is the test suite I am getting typescript error

import React from 'react';import { render, cleanup } from '@testing-library/react-native';import ProductDetailsScreen from './screens/productscreen';import MockedNavigator from './mocked_navigator';import { mockData } from './data.ts';import Routes from 'navigations/routes';const route = {  key: 'key',  name: Routes.ProductDetails,  params: {    product: mockData, // fake data object  },};describe('<ProductDetailsScreen/>', () => {  afterEach(cleanup);  test('render valid data', () => {    const component = (<MockedNavigator screen={() => <ProductDetailsScreen route={route} />} /> // This route giving me the error    );    const { getByTestId } = render(component);    const headerText = getByTestId('product_title');    expect(headerText).toBeDefined();  });});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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