Understanding the NavigationContainer reference in Typescript and react-navigation

In my current project with react-navigation, I've come across a scenario where I need to navigate from outside of a component (specifically after receiving a push notification).

The challenge is that when I use the navigation.navigate method from within a component, I receive accurate Typescript Autocomplete and Intellisense based on all the types defined in the documentation.

However, when utilizing the navigationRef.current?.navigate method, the type information is not present.

Is there a way to incorporate type information into the ref object as well?

javascripttypescriptreact-nativereact-navigationreact-navigation-v5

Answer №1

To specify the type of route in the navigate method, you need to provide the generic type.

For example, if you have different screens with specified route names and parameter types as shown below:

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

To make use of these defined types in your navigate method, you can use them as generics like this:

// Now you can choose between 'Home', 'Profile', or 'Feed' when calling the navigate method
navigationRef.current?.navigate<keyof RootStackParamList>('Home');

Answer №2

While working on push notification implementation, I encountered a similar issue. To address it, I created a navigation helper file named navigationHelper.ts.

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
    navigationRef.current?.navigate(name, params);
}

Within AppNavigator.tsx:

import {navigate} from './helpers/NavigationHelper';

 messaging().onNotificationOpenedApp(remoteMessage => {
          console.log(
            'Notification caused app to open from background state:',
            remoteMessage,
          );
          let data = JSON.parse(remoteMessage?.data?.data);
          if (data?.page == 'ride_detail') {
            navigate('RideDetailsIndex', {id: data?.ride_id});
          }
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes me to create components with incorrect paths?

Can someone assist me with creating a new component in the dynamic-print folder instead of it being created in the app? Thank you ...

angulartypescriptpowershellcommand-line

Conserving node.js native imports for Electron with rollup

I am working on a project using Electron, Svelte, and Typescript. Initially, I used a specific template from here, but it restricted access to node.js built-in imports like fs for security reasons in the browser/electron frontend. However, I do not requir ...

javascriptnode.jstypescriptelectronrollup

Script for uploading multiple images without using flash, with customization options available for each individual upload

Looking for a non-flash images uploader script that has the following features: Ability to upload multiple files Supports drag and drop functionality Displays progress bar for each upload Shows small preview of each upload Allows for resumable downloads ...

javascriptjqueryajaxfile-upload

Is it possible for me to generate c3js graphs dynamically?

Here is my current progress: <div id="chart"></div> <script> var names = <?php echo json_encode($array1) ?>; var count = <?php echo json_encode($array2) ?>; var x=0; while (names[x]!=null) ...

javascriptphploopsc3.js

Transferring information from AJAX to PHP script with the click of a button

Simply put, I am in the process of adding a pop-up update panel to my to-do website using an HTML button. The website already has a login-register system and uses MySQL queries to display different tables for each user. The update buttons on the website c ...

javascriptphpjqueryajax

Node.js frequently returns null with its url methods

I'm having some trouble getting node.js to display the HTTP request properties in the browser. I've tried printing the properties of the request URL, but they either show up as null or don't display at all. Below is the code for the server ( ...

javascriptnode.js

Preserving the state of an Angular application across page refreshes

What is the best way to maintain state persistence between page reloads? I'm not referring to state management with ngrx, but rather the scenario where refreshing the page causes user logouts, unsaved changes, and other data loss. Initially, I consid ...

angulartypescriptngrx

Javascript code requires server to have default text field values

Based on the choice made by a user, a text field box will either remain concealed or revealed: $("#aForm").on("change", function() { if ($(this).val() == "a") $("#textField").hide(); else $("#textField").show(); }); The issue arises when the ...

javascriptjqueryhtml

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

javascriptcss

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

Complete AJAX event: matching URL using regular expressions

After a specific ajax request is completed, I am attempting to execute a function. To target the desired request among multiple requests on the site, I am using settings.url as outlined in the official documentation: $( document ).ajaxComplete(function( e ...

javascriptjqueryregexajaxurl

How can I create a table using a loop and an onclick function for each <td>?

I have written code to create a table in PHP using a loop. I want to add an onclick function to each cell so that when a particular cell is clicked, the background color changes. However, I am encountering an error. Am I doing something wrong? <head& ...

javascriptphpjqueryhtml

Difference between ng-controller variable and ng-init variable

When working with the code snippet below in angularJS, <script type="text/javascript"> angular.module('app').controller('add', ['$scope',function($scope) { $scope.name = "Bonita Ln"; }]); </script& ...

javascriptangularjsng-controllerng-init

Imported sphere contained within a three.js box3

Seeking guidance: I am trying to figure out how to determine the dimensions of my 3D objects that I have imported. Currently, I am using the code snippet below: var box = new THREE.Box3().setFromObject(obj); This code allows me to calculate the boxes for ...

javascriptobjectthree.js3d

What is the outcome of XmlHttpRequest.responseText?

I am new to JavaScript and looking to explore the potential of XMLHttpRequest.responseText with a specified URL. Can someone guide me on how to efficiently test this? let url = "http://m.google.com/"; <br> let xmlHttp = new XMLHttpRequest(); <br& ...

javascriptxmlhttprequestresponsetext

Asynchronous execution of Angular 2 services

Currently, I am working on a project that utilizes Angular and RxJS. My approach involves creating an injectable class responsible for fetching data from a JSON source as shown below: import {Injectable, Inject} from '@angular/core'; import {Ht ...

typescriptangularrxjs

Using Tween animations with Three.js

I have some queries regarding tween js within three.js. Below is the code snippet where the particles are generated as shown in the image: Image 1 // Code snippet for initializing var scene; var renderer; var container; var stats; var sphere; // Omitted ...

javascriptthree.jstweenjs

Tips for achieving a gradual transformation of an element according to the scrolling position

I have been experimenting with using waypoints for two specific purposes. The first objective is to determine whether a user is scrolling up or down and if the container comes into view. However, this functionality is not working as expected. The sec ...

javascriptjquerycssscrolljquery-waypoints

I'm encountering an issue where my information doesn't seem to be getting through to the Django

For some reason, the data I am trying to post to /api/recipe/recipes/ is not showing up in my HTML {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <script src="h ...

javascripthtmljqueryajaxrest

Is it possible to execute multiple functions and return computed data from a single route in Node?

Struggling with making a single API call to a route in the MEAN stack to populate a chart.js graph on the front end. The API call is required to return year-to-date, month-to-date, and historical data including last year's figures. Following functiona ...

node.jsmongodbtypescriptexpressmean-stack