Typescript with React-navigation

Question

I have a doubt in typing the prop Navigation of a functional component, my code is currently like this:

import React from 'react';

import { Container, Button, ButtonText } from './styles';
import { NavigationStackProp } from 'react-navigation-stack';


export default function Home({ navigation }: <NavigationStackProp>) {
  return (
    <Container>
      <Button onPress={() => navigation.navigate('Auth')}>
        <ButtonText>Logout</ButtonText>
      </Button>
    </Container>
  );
}

But Visual Studio is giving alert in Navigation:

Property 'navigation' does not exist on type '() => any'. ts(2339) As correct that?

Answer 1

I had the same doubt and I managed to solve making an interface and using Navigationstackprop it will map properties into the function.

Example of the Interface:

interface iHomeProps {
  navigation: NavigationStackProp<any,any>
};

How your code should look:

import React from 'react';

import { Container, Button, ButtonText } from './styles';
import { NavigationStackProp } from 'react-navigation-stack';

interface iHomeProps {
  navigation: NavigationStackProp<any,any>
};

export default function Home: React.FC<iHomeProps>({ navigation }) {
  return (
    <Container>
      <Button onPress={() => navigation.navigate('Auth')}>
        <ButtonText>Logout</ButtonText>
      </Button>
    </Container>
  );

}