popTo from Modal

[astrahov]

I've tried everything, but I can't solve the problem.

I have a modal screen where data is selected. Once selected, the data is sent to the screen that calls the selection screen.

RootStack
-- SomeTab
---- SomeStack
------ SomeScreen
-- OtherStack
---- OtherScreen
-- ModalScreen

// SomeScreen.tsx
navigation.push('ModalScreen', ...)

// OtherScreen.tsx
navigation.push('ModalScreen', ...)

// ModalScreen.tsx
navigation.popTo(???, { selectedValue: ... })

//
navigation.popTo('SomeScreen', { selectedValue: ... }) <-- ERROR
navigation.popTo('OtherScreen', { selectedValue: ... }) <-- ERROR

// This works, but ModalScreen doesn't know which nested nav chain to use ('SomeTab' > 'SomeStack' or 'OtherStack')
navigation.popTo('OtherStack', {
    screen: 'OtherScreen',
    params: {
        selectedValue: ...
    }
})

This is possible, but how correct is it?

// SomeScreen.tsx
navigation.push('ModalScreen', {
    backRoute: {
        name: 'SomeTab',
        params: {
            screen: 'SomeStack',
            params: {
                screen: 'SomeScreen',
            },
        },
    },
})

// OtherScreen.tsx
navigation.push('ModalScreen', {
    backRoute: {
        name: 'OtherStack',
        params: {
            screen: 'OtherScreen',
        },
    },
})

[satya164]

Not sure I understood correctly. Does this clarify?

This works, but ModalScreen doesn't know which nested nav chain to use ('SomeTab' > 'SomeStack' or 'OtherStack')

navigation.popTo('OtherStack', { ... }) is correct API. popTo requires the name of the screen so it can typecheck the params.

This is possible, but how correct is it?

The exact approach depends on your use case. If these are the only 2 screens you want to pass params back to, then I'd just pass the screen name as param when pushing, then have 2 navigation calls conditionally:

if (route.params.fromScreen === 'ScreenA') {
  navigation.popTo(..) // go to ScreenA and pass params
} else {
  navigation.popTo(..) // go to ScreenB and pass params
}

On another note, OtherStack nested in RootStack is bad practice. Keep the stacks flat. Only nest when necessary for UI (e.g. stack inside tab inside tab). Use groups for organization.

[asaddevx]

Hey @astrahov , the maintainer's reply actually gives you the answer. Here's the summary:

1. popTo('OtherStack', { ... }) is the correct way — popTo needs the navigator/screen name, not the nested screen directly. That's by design.

2. For the "which screen called me?" problem, pass the caller's name as a param when pushing:

// SomeScreen.tsx
navigation.push('ModalScreen', { fromScreen: 'SomeScreen' })

// OtherScreen.tsx
navigation.push('ModalScreen', { fromScreen: 'OtherScreen' })

Then in ModalScreen.tsx:

if (route.params.fromScreen === 'SomeScreen') {
  navigation.popTo('SomeStack', { screen: 'SomeScreen', params: { selectedValue } })
} else {
  navigation.popTo('OtherStack', { screen: 'OtherScreen', params: { selectedValue } })
}

3. Bonus tip from the maintainer , having OtherStack directly inside RootStack alongside tabs is bad practice. Keep your navigator structure flat unless nesting is required for UI purposes (like a stack inside a tab).

Hope that clears it up!

[vincere-mori]

popTo only searches the navigator that owns the current route. In your example the modal is on the root stack, while SomeScreen and OtherScreen are nested inside child navigators, so the root stack cannot popTo('SomeScreen') directly.

For a picker/selection modal I would avoid making the modal know the whole nested route tree. Treat it as "return a result to whoever opened me":

// caller
navigation.navigate('ModalScreen', {
  requestId,
})

// modal
selectionStore.resolve(requestId, selectedValue)
navigation.goBack()

Then the caller reads the result from a small store/context/query cache when it regains focus. This keeps ModalScreen independent from SomeTab > SomeStack vs OtherStack.

Your backRoute object can work, but it couples the modal to the root navigator shape and it gets fragile once routes are renamed or nested deeper. If you really want route params instead of a store, pass only a small returnTo descriptor from the caller and do a root-level navigate(returnTo.name, { ...returnTo.params, params: { selectedValue } }), but for selected data I would still prefer goBack() plus caller-owned state.