How to set navigationOptions on stateless component with Typescript

Question

I have a react component like

const Example = () => (...);

Using react-navigation I would normally apply naviga

Answer 1

For react-navigation v4, where you have react-navigation-tabs and react-navigation-stack as separate libraries, you need to do something similar to Sat Mandir Khalsa's answer, but you just need to use the correct types from the correct library. For example, if it is a screen from createStackNavigator, you need to do:

import {
  NavigationStackScreenComponent,
  NavigationStackScreenProps
} from 'react-navigation-stack'

interface Props extends NavigationStackScreenProps {
  // your props...
}

export const HomeScreen: NavigationStackScreenComponent = ({ navigation }) => {
  return (
    
      Home
    
  )
}

HomeScreen.navigationOptions = {
  // your options...
}

Likewise, the react-navigation-tabs library has types like NavigationBottomTabScreenComponent and NavigationTabScreenProps that you can use instead.