[C-1515] Allow repeat pushes via useNavigation inside nested navigator

packages/mobile/src/hooks/useNavigation.ts

@@ -8,6 +8,8 @@ import { useNavigation as useNativeNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { isEqual } from 'lodash'
 
+import { getNearestStackNavigator } from 'app/utils/navigation'
+
 export type ContextualParams = {
   fromNotifications?: boolean
 }
@@ -48,16 +50,21 @@ export function useNavigation<
   const performCustomPush = useCallback(
     (...config: PerformNavigationConfig<ParamList>) => {
       if (!isEqual(lastNavAction.current, config)) {
-        ;(navigation as NativeStackNavigationProp<any>).push(...config)
-        lastNavAction.current = config
+        const stackNavigator = getNearestStackNavigator(navigation)
+
+        if (stackNavigator) {
+          // Reset lastNavAction when the transition ends
+          const unsubscribe = stackNavigator.addListener(
+            'transitionEnd',
+            (e) => {
+              lastNavAction.current = undefined
+              unsubscribe()
+            }
+          )
 
-        // Reset lastNavAction when the transition ends
-        const unsubscribe = (
-          navigation as NativeStackNavigationProp<any>
-        ).addListener('transitionEnd', (e) => {
-          lastNavAction.current = undefined
-          unsubscribe()
-        })
+          stackNavigator.push(...config)
+          lastNavAction.current = config
+        }
       }
     },
     [navigation, lastNavAction]

packages/mobile/src/utils/navigation.ts

@@ -1,4 +1,6 @@
-import type { NavigationState } from '@react-navigation/native'
+import type { Maybe } from '@audius/common'
+import type { NavigationProp, NavigationState } from '@react-navigation/native'
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 
 /**
  * Navigation state selector that selects the current route
@@ -21,3 +23,21 @@ export const getPrimaryRoute = (state: NavigationState) => {
   // The route at index 2 is the primary route
   return getRoutePath(state)?.[2]
 }
+
+/**
+ * Given a navigator, get the nearest stack navigator in the hierarchy
+ */
+export const getNearestStackNavigator = (
+  navigator: NavigationProp<any>
+): Maybe<NativeStackNavigationProp<any>> => {
+  if (navigator.getState?.()?.type === 'stack') {
+    return navigator as unknown as NativeStackNavigationProp<any>
+  }
+  const parent = navigator.getParent()
+
+  if (!parent) {
+    return undefined
+  }
+
+  return getNearestStackNavigator(parent)
+}