Trouble migrating React Navigation v4 Deep Link configuration to React Navigation v5

[dochonglo]

I'm having some trouble migrating my deep-link from React Navigation v4 to React Navigation v5. 😊

For context, my deep linking has been working perfectly in React Navigation v5 with a tab bar navigator and stack navigators in each tab.

Here's my React Navigation v4 implementation. This has no problem deepening users into my app with links such as: myapp://discover/activites/:id

const MainApp = createBottomTabNavigator(
  {
    DiscoverTabStack: { screen: DiscoverTabStack, path: "" },
    GroupTabStack: { screen: GroupTabStack, path: "" },
    ProfileTabStack: { screen: ProfileTabStack, path: "" },
  },
);

const DiscoverTabStack = createStackNavigator(
  {
    Discover: { screen: DiscoverScreen, path: "discover" },
    DetailedActivityFromDeepLink: {
      screen: DetailedActivityFromDeepLinkScreen,
      path: "discover/activites/:id",
    },
  }

With React Navigation v4, I'm able to successfully deep link into the app to the correct place. However, I'm having some trouble with React Navigation v5.

Here's my React Navigation v5 implementation after following the docs: https://reactnavigation.org/docs/5.x/configuring-links

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

const prefixes = Linking.makeUrl("myapp://");
const linking = {
  prefixes: [prefixes],
  config: {
    screens: {
      DiscoverStack: {
        path: "",
        screens: {
          Discover: {
            path: "discover",
          },
          DetailedActivityFromDeepLink: {
            path: "discover/activites/:id",
            parse: {
              id: (id) => `${id}`,
            },
          },
        },
      },
    },
  },
};

const DiscoverScreens = ({ navigation, route }) => {
  return (
    <DiscoverStack.Navigator mode="card">
      <DiscoverStack.Screen
        name="Discover"
        component={DiscoverScreen}
      />
      <DiscoverStack.Screen
        name="DetailedActivityFromDeepLink"
        component={DetailedActivityFromDeepLinkScreen}
      />
    </DiscoverStack.Navigator>
  );
};

render() {
  return (
    <Container>
      <NavigationContainer linking={linking}>
        <Tab.Navigator>
          <Tab.Screen
            name="Discover"
            component={DiscoverScreens}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </Container>
  );
}

Unfortunately, the above is not working and cannot open links such as this: myapp://discover/activites/:id. What may be wrong with my approach? How does one deep-link into an app that has tab bars with stack navigators in each tab?

I'm sure that this is a challenge for the majority of apps out there, so it'll be awesome for some help!! Thanks in advance!