Modal doesn't close when navigating to another tab.

Hey there, I am using the native-stack.

I have a bit of an issue. I have stacks nested inside tabs. I’m trying to close a modal when I jump to another tab. However, the modal stays open when I jump from one tab to another.

Current Behavior

Tab1 opens a modal. User places an order. This needs to send the user to Tab2 (where I can see my orders.)

- Tab1
  - Stack
      - Screen
      - Modal
- Tab 2 (Orders)

Illustration

// Modal inside of Tab1
import { TabActions, useNavigation } from '@react-navigation/native';

const { navigate, dispatch } = useNavigation()

const placeOrder = async () => {
  const success = await order()
  // ok, let's now close this modal and send the user to Tab2
  dispatch(TabActions.jumpTo('Orders')) // jumps tabs, but the modal stays open
}

I would expect this to do two things: 1) close the modal, 2) jump to tab 2. It does indeed jump to tab 2. However, the modal stays open. I’m not really sure what the proper behavior is, or how to handle this.

I’ve also tried…

I tried using popToTop() before jumpTo('Orders'), but then it never changes tabs. Same goes for goBack().

// tab1 modal
import { StackActions, useNavigation } from '@react-navigation/native';

const { navigate, dispatch } = useNavigation()

const placeOrder = async () => {
  const success = await order()
  // ok, let's now send the user to tab2
  dispatch(StackActions.popToTop()) // pops to main tab screen
  dispatch(TabActions.jumpTo('Orders')) // this never happens
}

In this case, it does indeed pop to the main tab navigator, but it never goes to the Orders tab.

[miticous]

I solved this issue by adding a navigation event listener to control when modal show up or not with some flag to prevent modal shown on screen load at the first time… Example:

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('blur', () => {
      setShowSuccessModal(false);
    });

    return unsubscribe;
  }, [navigation]);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      if (switcherScreenIndex === Screens.USER_DEFINE_PASSWORD) {
        setShowSuccessModal(true);
      }
    });

    return unsubscribe;
  }, [navigation, switcherScreenIndex]);

[nandorojo]

Hey thanks for following up. I haven’t yet, but I can close this for now while I keep experimenting. I’ll report back if I have new info. Thanks again your help, really appreciate it.