reactjs - How to set navigationOptions on stateless component with Typescript

Question

I have a react component like

const Example = () => (<View>...</View>);

Using react-navigation I would normally apply navigation options by saying

Example.navigationOptions = { options };

With typescript I am getting the error

[ts] Property 'navigationOptions' does not exist on type '(props: Props) => Element'.

How can I fix this?

I tried writing an interface

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

But with no luck.

Answer 1

You can use the following:

import {
  NavigationScreenProps,
  NavigationScreenComponent
} from 'react-navigation'

interface Props extends NavigationScreenProps {
  // ... other props
}

const MyScreen: NavigationScreenComponent<Props> = ({ navigation }) => {
  // ... your component
}

MyScreen.navigationOptions = {
  // ... your navigation options
}

export default MyScreen