'React-Native deep linking not working with nested Navigation

Versions:

"@react-navigation/bottom-tabs": "^5.11.10",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.4",
"react": "17.0.1",
"react-native": "^0.64.3",

I am working on React Native Application. Below is the Structure.

I try my best however every time when i try to reach any path e.g. "adb shell am start -W -a android.intent.action.VIEW -d "test://devices" com.myappname.app"

or

"adb shell am start -W -a android.intent.action.VIEW -d "test://feed" com.myappname.app"

this only Opens App and Nothing Happens forward to that. Ideally it should reach to that screen, correct ?

Am getting no error msg which is driving me crazy. I know am missing something very small, but what it is ? Can someone check the config structure..? Any Lead or help will be appreciated.

Navigations/index.js

<NavigationContainer linking={Linking}>
      {isAuthenticated ? (
        isRegCompleted ? (
          <HomeNavigator /> //Home Navigation
        ) : (
          <EnterPersonalDetails />
        )
      ) : ( 
        <AuthNavigator /> //Auth Navigation
        )} 
    </NavigationContainer>

Linking.js

const config = {
      screens: {
        HomeNavigator: { 
          screens: {
            TABS: {
              screens: {
                Devices: 'devices',
                Feed: 'feed',
              },
            },
          }
        },
    }
};

const Linking = {
    prefixes: ["test://"],
    config,
};
export default Linking;

HomeNavigator.js

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

    const HomeNavigator = () => {
  const {
    dashboardDispatch,
    authState: {language},
  } = useContext(GlobalContext);

  return (
    <Stack.Navigator>
      <Stack.Screen
        name={TABS}
        children={() => TabNavigator(language)}
        options={{
          title: language.AUTOFARM,
          headerBackTitleVisible: false,
          headerShown: false,
        }}
      />
      <Stack.Screen
        name={RECORDS}
        component={Records}
        options={{
          title: language.RECORDS,
          headerShown: false,
          headerBackTitleVisible: false,
        }}
      />
      <Stack.Screen
        name={DEVICEDATA}
        component={deviceData}
        options={{
          title: language.DEVICE_DATA,
          headerShown: false,
          headerBackTitleVisible: false,
        }}
      />
    </Stack.Navigator>
  );

const TabNavigator = language => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <Tab.Navigator
        initialRouteName={Devices}
        mode={'modal'}
        backBehavior={'none'}
        tabBarOptions={{
          activeTintColor: colors.primary,
          showIcon: true,
          tabStyle: {paddingTop: 10},
          safeAreaInsets: {bottom: 10},
          keyboardHidesTabBar: true,
        }}>
        <Tab.Screen
          name={DEVICES}
          component={Devices}
          options={{
            tabBarIcon: ({color, size}) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
            tabBarLabel: language.HOME,
            path: 'devices'
          }}
        />
        <Tab.Screen
          name={FEED}
          component={Feed}
          options={{
            tabBarLabel: language.FEED,
            tabBarIcon: ({color, size}) => (
              <MaterialCommunityIcons
                name="page-previous"
                color={color}
                size={size}
              />
            ),
            path: 'feed'
          }}
        />
      </Tab.Navigator>
    </SafeAreaView>
  );
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source