Version: 7.7.0

TypeScript

Strongly typed components#

Both functional and class components can be typed to get the benefits of strongly typed options and props.

Class Component
Functional Component

import { NavigationComponent, NavigationComponentProps } from 'react-native-navigation';

interface Props extends NavigationComponentProps {
  age: number;
}

export default class MyComponent extends NavigationComponent<Props> {
  // Options are strongly typed
  static options() {
    return {
      statusBar: {
        // Some options are of union type. We're using `as const` to let the-
        // TS compiler know this value is not a regular string
        style: 'dark' as const,
      },
      topBar: {
        title: {
          text: 'My Screen',
        },
      },
    };
  }

  constructor(props: Props) {
    super(props);
  }
}

Typed props in commands#

Arguments are passed to components view the passProp. This is a common source for errors as these props tend to change overtime. Luckily we can type the passProps property to avoid these regressions. The example below shows how to declare types for passProps when pushing a screen.

import { Navigation } from 'react-native-navigation';

interface Props {
  name: string;
}

Navigation.push<Props>(componentId, {
  component: {
    name: 'MyComponent',
    passProps: {
      name: 'Bob',
      // @ts-expect-error
      color: 'red', // Compilation error! color isn't declared in Props
    },
  },
});

The following commands accept typed passProps:

push
setStackRoot
showModal
showOverlay