How to only render modal in the initial route of the stacknavigator?

Question

The initial screen of my stacknavigator has a modal that shows up upon the occurrence of a certain event ... problem is when I navigate to other screens the modal still shows up when the event is triggered. I want it only to show up when the initial route is showing up.

Answer 1

Maybe you can check this.props.navigation.state.routeName so that you know if it's initial screen or not.

I got this from this document. https://reactnavigation.org/docs/navigators/navigation-prop

Answer 2

How about using state?

import React, { useEffect,useState } from "react";

const MainScreen = (props) => {
  const [seenReminder, setReminder] = useState(false);
  
  useEffect(()=>{
    if (!seenReminder){
      props.navigation.navigate('reminder')
      setReminder(true)
    }
  }, [seenReminder]);

  return (
    <View ></View>
  );
};
export default MainScreen;