React Native Branch.io deep-link Not Navigating to a Specific Screen( React Native Navigation V6), When App Kill/Close

Question

I am implementing branch.io deep linking in my project, I have configured the branch for deep-linking as per the document and with the help of other references like: React Navigation v5: How to use with Branch.io

How to navigate from linking (deep linking with branch.io) when navigator hasn't been created yet?

When I clicked on branch link app opens, but not redirecting to specific screen, below are the warning I am receiving in terminal

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.

And this is the response of params I am getting from branch.io link(App is configured as universal link in branch dashboard)

{"$canonical_url": "https://myApp.test-app.link/StartupDetailReport", "$marketing_title": "deeplinktest15", "$og_description": "deepdescription", "$one_time_use": false, "+click_timestamp": 1668166318, "+clicked_branch_link": true, "+is_first_session": false, "+match_guaranteed": true, "+rn_cached_initial_event": true, "~campaign": "goldy2", "~channel": "deal", "~creation_source": 1, "~feature": "marketing", "~id": 1119283322135719300, "~marketing": true, "~referring_link": "https://myApp.test-app.link/CbCDkMqxQub", "~tags": ["dfdf"]}

And below is my complete code of App.js for navigationContainer configuration

`

import React from 'react';
import {Linking, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './src/HomeScreen';
import ChatScreen from './src/ChatScreen';
import DealScreen from './src/DealScreen';
import ProfileScreen from './src/ProfileScreen';
import branch from 'react-native-branch';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const config = {
  screens: {
    HomeTab: {
      screens: {
        Home: 'home',
        Chat: {
          path: 'feed',
        },
        Deal: 'StartupDetailReport',
      },
    },
    Profile: 'user',
  },
};

const linking = {
  prefixes: ['myApp://', 'https://myApp.test-app.link'],

  subscribe(listener) {
    branch.subscribe(({error, params, uri}) => {
      if (error) {
        console.error('Error from Branch: ' + error);
        return;
      }

      if (params['+non_branch_link']) {
        const nonBranchUrl = params['+non_branch_link'];
        // Route non-Branch URL if appropriate.
        return;
      }

      if (!params['+clicked_branch_link']) {
        // Indicates initialization success and some other conditions.
        // No link was opened.
        return;
      }

      // A Branch link was opened
      const url = params.$canonical_url;

      listener(url);

    });

    return () => {
      branch.unsubscribe();
    };
  },
  config,
};

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeTab() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Deal" component={DealScreen} />
    </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator initialRouteName="HomeTab">
        <Stack.Screen name="HomeTab" component={HomeTab} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

`

I am expecting that when I click on branch link it should take me to this "StartupDetailReport" Screen

Note: My app is working correctly when app is in background mode, once I kill/close the app and open from branch link its not working as expected.

Please Hepl me I don't know what's wrong with my code Thanks.

Answer 1

you need to also use the async getInitialURL()`. It's specifically used for when the app is initially opened.

So something like this should work for you as it did for me:

const linking = {
  prefixes: ...,
  subscribe() { ... },
  async getInitialURL() {


    const params = await branch.getLatestReferringParams();
    if (params.$canonical_url) return params.$canonical_url


    // As a fallback, you may want to do the default deep link handling
    const url = await Linking.getInitialURL();

    return url;
  }
}