0

new to React Native here.

I have a simple component/screen with this code:

useEffect(() => {
        console.log("OPENING LOGIN");
        AppState.addEventListener("change", testFunction);
        return (() => {
            console.log("Removing HELLO LISTENER");
            AppState.removeEventListener("change", testFunction);
        });
    }, []);

    const testFunction = () => {
        console.log("APPSTATE CHANGE FUNCTION RUNNING");
    };

    const changeScreen = () => {
        return props.navigation.navigate("MainView", {});
    };

This starts a eventListener when the component is mounted. When the component is unmounted, I log something else out, and would like to remove the same listener.

However, when the changeScreen function is fired, which navigates the user to a whole new component/screen, I do not receive the "Removing HELLO LISTENER" log, and the listener still fires.

My question is:

Why is this component not unmounted when naivagting to a new Screen?

Thank you for your time!

Cevin Thomas
  • 387
  • 3
  • 14
  • You can refer this answer https://stackoverflow.com/a/61967910/1435722 which explains the different methods – Guruparan Giritharan Jun 26 '20 at 12:46
  • That is awesome, thank you! After reading this I am still unsure about this: This is my stack [A, B]. When going from B to C, I would like the stack to be [A, C]. Is This possible? – Cevin Thomas Jun 26 '20 at 12:50
  • The will happen if you update the navigation state, but you can chose to navigate to a from c which will unmount B and C – Guruparan Giritharan Jun 26 '20 at 12:53
  • I understand. Because at the moment, I need to unmount B component when moving to C, because I need to remove the event listener from B. @GuruparanGiritharan – Cevin Thomas Jun 26 '20 at 12:56
  • As only option would be removing the screen from the stack the you will have the back functionality working normally – Guruparan Giritharan Jun 26 '20 at 13:01

0 Answers0