Definition for the type react-navigation-v6 <Stack.Group>

Question

Definition for the type react-navigation-v6 <Stack.Group>

I'm having trouble figuring out the proper type definition for a Stack group that includes screens (refer to TestStack.Group and the nested TestStack.Screen).

The navigation stack:

const TestStack = createNativeStackNavigator<TestStackParamList>();
function TestNavigator() {
  return (
    <TestStack.Navigator initialRouteName="TestScreen">
      <TestStack.Screen
        name="TestScreen"
        component={TestScreen}
        options={{ headerShown: true, title: "", headerTransparent: true }}
      />
      <TestStack.Group screenOptions={{ presentation: "modal" }}>
        <TestStack.Screen name="TestModal" component={TestModal} options={{ title: "" }} />
      </TestStack.Group>
    </TestStack.Navigator>
  );
}

Part of the root stack is defined as:

export type RootStackParamList = {
  TestStack: NavigatorScreenParams<TestStackParamList> | TestScreenParams;
...
}

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
};

export type TestScreenParams = {
  param1: string;
  param2: string;
};

I've attempted the following (among other variations..)

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
  TestModal: RouteGroupConfig<TestStackGroupParamList, NativeStackNavigationOptions>;
};

export type TestStackGroupParamList = {
  TestModal: { simplified: string; type: ModalType };
};

This linter error is being displayed:

Type '({ children, navigation, route, }: TestModalProps) => ReactNode' is not assignable to type 'ScreenComponentType<TestStackParamList, "TestModal"> | undefined'.

The error message is clear, but I am struggling to find the correct "combination" of navigation types.

typescript react-navigation react-navigation-v6

Answer 1

Answer №1

When dealing with Screens in Stack Groups, there's no requirement for special typings; they can be treated just like those outside the Stack Group. For example, TestStackParamList could be defined as shown below.

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
  TestModal: { simplified: string; type: ModalType };
};

Below is the complete file with typings (some assumptions were made about missing code in the question). You can also verify that there are no type issues in this code by checking out the CodeSandbox.

import React from "react";
import {
  createNativeStackNavigator,
  NativeStackScreenProps
} from "@react-navigation/native-stack";

/* SECTION: SCREENS */
function TestScreen() {
  // TODO: Return the actual component
  return null;
}

type TestModalProps = NativeStackScreenProps<TestStackParamList, "TestModal">;

function TestModal({ route }: TestModalProps) {
  const { simplified, type } = route.params;
  // TODO: Use the route params and return the actual component
  return null;
}
/* END SECTION: SCREENS */

/* SECTION: NAVIGATION */
// TODO: Replace with actual modal types
type ModalType = "type1" | "type2";

export type TestScreenParams = {
  param1: string;
  param2: string;
};

export type TestModalScreenParams = {
  simplified: string;
  type: ModalType;
};

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
  TestModal: TestModalScreenParams;
};

const TestStack = createNativeStackNavigator<TestStackParamList>();

export function TestNavigator() {
  return (
    <TestStack.Navigator initialRouteName="TestScreen">
      <TestStack.Screen
        name="TestScreen"
        component={TestScreen}
        options={{ headerShown: true, title: "", headerTransparent: true }}
      />
      <TestStack.Group screenOptions={{ presentation: "modal" }}>
        <TestStack.Screen
          name="TestModal"
          component={TestModal}
          options={{ title: "" }}
        />
      </TestStack.Group>
    </TestStack.Navigator>
  );
}

Answer 2

When dealing with Screens in Stack Groups, there's no requirement for special typings; they can be treated just like those outside the Stack Group. For example, TestStackParamList could be defined as shown below.

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
  TestModal: { simplified: string; type: ModalType };
};

Below is the complete file with typings (some assumptions were made about missing code in the question). You can also verify that there are no type issues in this code by checking out the CodeSandbox.

import React from "react";
import {
  createNativeStackNavigator,
  NativeStackScreenProps
} from "@react-navigation/native-stack";

/* SECTION: SCREENS */
function TestScreen() {
  // TODO: Return the actual component
  return null;
}

type TestModalProps = NativeStackScreenProps<TestStackParamList, "TestModal">;

function TestModal({ route }: TestModalProps) {
  const { simplified, type } = route.params;
  // TODO: Use the route params and return the actual component
  return null;
}
/* END SECTION: SCREENS */

/* SECTION: NAVIGATION */
// TODO: Replace with actual modal types
type ModalType = "type1" | "type2";

export type TestScreenParams = {
  param1: string;
  param2: string;
};

export type TestModalScreenParams = {
  simplified: string;
  type: ModalType;
};

export type TestStackParamList = {
  TestScreen: TestScreenParams;
  TestResultScreen: TestScreenParams;
  StaticContentScreen: StaticContentParams;
  TestModal: TestModalScreenParams;
};

const TestStack = createNativeStackNavigator<TestStackParamList>();

export function TestNavigator() {
  return (
    <TestStack.Navigator initialRouteName="TestScreen">
      <TestStack.Screen
        name="TestScreen"
        component={TestScreen}
        options={{ headerShown: true, title: "", headerTransparent: true }}
      />
      <TestStack.Group screenOptions={{ presentation: "modal" }}>
        <TestStack.Screen
          name="TestModal"
          component={TestModal}
          options={{ title: "" }}
        />
      </TestStack.Group>
    </TestStack.Navigator>
  );
}

Definition for the type react-navigation-v6 <Stack.Group>

Answer №1

Similar questions

Encountering an error when attempting to add the 'shelljs' module to an Angular 2 TypeScript project

Using optional chaining on the left side in JavaScript is a convenient feature

Leveraging the typeof Operator within a Class

The parameter type 'void' cannot be assigned to the parameter type 'SetStateAction<{}>'

Error in Next.js only occurs during the production build when using styled components, tailwind CSS, and twin styling

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

How to Add a Rule to an Existing Application Load Balancer Listener using AWS CDK

After using apt to install tsc, I find myself in a dilemma on how to either delete or upgrade it

How can I modify the pristine state of NgModel in Angular 2 using code?

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

Guidelines for creating a masterpage and details page layout in Angular 6

Modify the dropdown menu title dynamically based on the selection made in Angular

Using Angular: filtering data streams from a date range observable object

Retrieving a collection of names from the properties of a specific type

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

How can Node / Javascript import various modules depending on the intended platform?

How to capture a screenshot of the current screen using Nativescript programmatically

The `note` binding element is assumed to have an unspecified `any` type

Incorporating a JavaScript file into Angular