Unable to access passed parameters from deep links in React Navigation V6

Question

Unable to access passed parameters from deep links in React Navigation V6

I'm currently working on setting up a simple linking logic to open an app via an invitation link. The link format would be something like this: [scheme]://auth/[invitaion-code]

To achieve this, I have set up the following linking object to pass to the NavigationContainer

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: ['my app scheme'],
  config: {
    screens: {
      Authorizer: {
        path: "auth/:code",
      },
    },
  },
};

Additionally, I have defined the following navigation stack:

    <NavigationContainer ref={navigationRef} linking={linking}>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
        initialRouteName={initialRouteName}
      >
        <Stack.Screen name="Authorizer" component={AuthorizerView} />
      </Stack.Navigator>
    </NavigationContainer>

Now, my question is how can I access the code parameter inside my AuthorizerView Component?

I have attempted the following, but the value always comes out as undefined

const AuthorizerView: React.FC<Props> = ({ navigation }: Props) => {
  const {code} = navigation.params;

Here is the log of the navigation object:

{"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dispatch": [Function dispatch], "getId": [Function getId], "getParent": [Function getParent], "getState": [Function anonymous], "goBack": [Function anonymous], "isFocused": [Function isFocused], "navigate": [Function anonymous], "pop": [Function anonymous], "popToTop": [Function anonymous], "push": [Function anonymous], "removeListener": [Function removeListener], "replace": [Function anonymous], "reset": [Function anonymous], "setOptions": [Function setOptions], "setParams": [Function anonymous]}

This issue is similar to this question, but none of the existing answers have proved successful for me, prompting me to ask this question anew.

typescript react-native expo react-navigation deep-linking

Answer 1

Answer №1

To enhance your linking object, consider implementing a getInitialURL function and a subscribe method:

import * as Linking from "expo-linking";
import { URLListener } from "expo-linking";

/**
 * Retrieves the initial URL when the app is launched via a deep link.
 */
const getInitialURL = async () => {
  // Obtain the initial deep link URL
  const initialDeepLinkUrl = await Linking.getInitialURL();

  return initialDeepLinkUrl;
};

/**
 * Handles links during app runtime.
 */
const subscribe = (listener: (url: string) => void) => {
  // URL listener for Linking.addEventListener to trigger the provided listener
  const onReceiveURL: URLListener = ({ url }) => {
    listener(url);
  };

  // Subscribe to incoming links from deep linking
  const linkingSubscription = Linking.addEventListener("url", onReceiveURL);

  return () => {
    // Remove event listeners
    linkingSubscription.remove();
  };
};

Update your linking object with these additions:

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: ["my app scheme"],
  config: {
    screens: {
      Authorizer: {
        path: "auth/:code",
      },
    },
  },
  getInitialURL,
  subscribe,
};

While this approach may be comprehensive, it was effective for handling notifications in my scenario. Consider adapting these methods for your own needs.

Answer 2

To enhance your linking object, consider implementing a getInitialURL function and a subscribe method:

import * as Linking from "expo-linking";
import { URLListener } from "expo-linking";

/**
 * Retrieves the initial URL when the app is launched via a deep link.
 */
const getInitialURL = async () => {
  // Obtain the initial deep link URL
  const initialDeepLinkUrl = await Linking.getInitialURL();

  return initialDeepLinkUrl;
};

/**
 * Handles links during app runtime.
 */
const subscribe = (listener: (url: string) => void) => {
  // URL listener for Linking.addEventListener to trigger the provided listener
  const onReceiveURL: URLListener = ({ url }) => {
    listener(url);
  };

  // Subscribe to incoming links from deep linking
  const linkingSubscription = Linking.addEventListener("url", onReceiveURL);

  return () => {
    // Remove event listeners
    linkingSubscription.remove();
  };
};

Update your linking object with these additions:

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: ["my app scheme"],
  config: {
    screens: {
      Authorizer: {
        path: "auth/:code",
      },
    },
  },
  getInitialURL,
  subscribe,
};

While this approach may be comprehensive, it was effective for handling notifications in my scenario. Consider adapting these methods for your own needs.

Unable to access passed parameters from deep links in React Navigation V6

Answer №1

Similar questions

`AngularJS Voice Recognition Solutions`

Error message: There appears to be a type error within the labelFunc of the KeyBoardDatePicker component in the Material-UI

Tips for specifying types in protractor.conf.js while utilizing the @ts-check feature

Learn how to use JavaScript to parse binary files

Encountering an error message when trying to launch an application: Module

Using Visual Studio Code, the next app created with nx now supports relative imports

Obtain the query response time/duration using react-query

Creating a personalized HTML email template with a TypeScript foreach loop

Best Practices for Updating UI State in Client Components Using NextJS and Server Actions

Can you explain the rule known as the "next-line" in TypeScript?

Is it possible to invoke a component's function within the click function of a Chartjs chart?

Data fetched by Next.js is failing to display on the web page

Angular 2 wrap-up: How to seamlessly transfer filter data from Filter Component to App Component

Using TypeScript to define callback functions within the Cordova.exec method

List of nested objects converted into a flat array of objects

Can Typescript restrict a value to only exist within a specified set of key names within the same object?

What advantages does subscribe() offer compared to map() in Angular?

Using TypeScript to efficiently filter an Array by converting all values to lowercase

Consider the presence of various peer dependency versions in a react-typescript library

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?