Discovering different types of navigation in React Navigation using navigationRef

Question

Discovering different types of navigation in React Navigation using navigationRef

I'm currently working on adding types to my TypeScript version of this function, but I'm facing some difficulties with it.

Perusing the React Navigation documentation:

// RootNavigation.js

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef<RootStackParamList>()

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

// Include other necessary navigation functions and export them

I am using Typescript and trying to define types for the params in navigate(name, params), but I'm unsure about the correct approach. Any insights on this?

I've already added typing for the container as shown below:

export const navigationRef = createNavigationContainerRef<RootStackParamList>()

typescript react-native react-navigation

Answer 1

Answer №1

Here is an example of how I use the navigate function:

// NavigationUtil.js

import {createNavigationContainerRef} from '@react-navigation/native';
import {RootStackParamList} from './RootStackParamList';

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

export function navigate<RouteName extends keyof RootStackParamList>(
  ...args: RouteName extends unknown
    ? undefined extends RootStackParamList[RouteName]
      ?
          | [screen: RouteName]
          | [screen: RouteName, params: RootStackParamList[RouteName]]
      : [screen: RouteName, params: RootStackParamList[RouteName]]
    : never
) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(...args);
  }
}

Answer 2

Here is an example of how I use the navigate function:

// NavigationUtil.js

import {createNavigationContainerRef} from '@react-navigation/native';
import {RootStackParamList} from './RootStackParamList';

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

export function navigate<RouteName extends keyof RootStackParamList>(
  ...args: RouteName extends unknown
    ? undefined extends RootStackParamList[RouteName]
      ?
          | [screen: RouteName]
          | [screen: RouteName, params: RootStackParamList[RouteName]]
      : [screen: RouteName, params: RootStackParamList[RouteName]]
    : never
) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(...args);
  }
}

Discovering different types of navigation in React Navigation using navigationRef

Answer №1

Similar questions

I'm looking to inject both default static values and dynamic values into React's useForm hook. But I'm running into a TypeScript type error

Using regular expressions in TypeScript to declare modules

Unlocking the Power of Passing Props to {children} in React Components

Can TypeScript's Zod library be utilized to parse a class instance?

Invoking a React function repeatedly (every second)

Describing an Object with some typed properties

Transform Loopback 4 filter into a SQL WHERE condition

Highcharts - running out of space for tooltips – what's the solution? Show only the tooltip for the series being hovered over, or adjust the layout to accommodate all tooltips

Typescript types can inadvertently include unnecessary properties

IntelliSense for TypeScript Variable Names in Intellij

Getting the perfect typings installed from DefinitelyTyped

What is the best way to change the `this` type of an object that is provided as a parameter to a function

VS Code is flagging TypeScript errors following the recent software update

Encountered an issue in Angular 6: Unable to access property '0' of undefined

Issue: Failed to Render: Error encountered during parsing of template: Element 'mat-checkbox' is not recognized as a valid element

Ensure that the query value remains constant in Express.js

In Vue 3, the v-model feature is utilized as parameter passing instead of using :prop and @emit

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

Attempting to search for an item by its id within a local json file using Angular

The module 'Express' does not have a public member named 'SessionData' available for export