How to set navigationOptions on stateless component with Typescript

reactjs typescript react-native react-navigation
xerotolerant picture xerotolerant · Mar 5, 2018 · Viewed 9k times · Source

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

Sat Mandir Khalsa picture Sat Mandir Khalsa · Mar 14, 2019

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

Related questions

How to specify (optional) default props with TypeScript for stateless, functional React components?

I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve it in TypeScript. With the following …

Read More
import * as React from 'react'; vs import React from 'react';

I've noticed that React can be imported like this: import * as React from 'react'; ...or like this: import React from 'react'; The first imports everything in the react module (see: Import an entire module's contents) The second imports only the …

Read More
Using createRef in react-native with typescript?

I am trying to figure out how I need to use React.createRef() in react native with typescript as following code throws errors // ... circleRef = React.createRef(); componentDidMount() { this.circleRef.current.setNativeProps({ someProperty: someValue }); } // ... Currently following errors are thrown for this.…

Read More