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

Routing with nested modules in Angular 2 can be achieved by using the same

What is preventing me from adding members to an imported declaration?

Navigating Angular QueryList through loops

Tips for enhancing the TypeScript definition of Material UI 3 theme by integrating the Material UI pickers theme

NodeJS Jest test failing due to a global variable being set for a different test already

Guide to adding a loading spinner into your Angular project

The error message thrown is: "Unable to assign value to property 'formGroup' as it is not defined

Using TypeORM to Retrieve Data from Many-to-Many Relationships with Special Attributes

What is the best way to update state from a triple-layered object?

Typical approach to receiving a transformed object from an HTTP service

What is the best way to retrieve the `any` type when utilizing the `keyof` keyword?

"Creating a Typescript array by extracting items from a different const array (as seen in the official beginner tutorial

Issue with Async Pipe when connected to a recently generated observable is causing failures

Angular 6 - Build a dynamic single page housing various applications within

Angular keeps FormArray elements' validity up-to-date as new elements are added to the array

Is there a way to ensure that only individual objects are selected in FabricJS on the Canvas, rather than a group of objects?

Having trouble making API calls from the NextJS endpoint

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Implementing an interface with a variable key and defining the key simultaneously

Is there a way to signal an error within an Observable function that can handle multiple scenarios depending on the specific page being viewed in an Angular application?