Skip to main content
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.

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