How to remove listener in another screen - React Native

Question

I want to alert a user before leaving a screen (NewNews.js). It works fine, but I do not want it to be called when he click the save button (PreviewSave.js). Remove listeners are no longer maintained.

After pressing save button the customAlert is triggered. I would like to remove the listener in save function (PreviewSave.js) but it is not working.

NewNews.js

let exitListener;

useEffect(() => {
    exitListener = navigation.addListener('beforeRemove', e => {
        e.preventDefault();
        customAlert(                 // <- alerting user and waiting for his response
            string.exit,
            string.exitMore,

            () => {
                navigation.dispatch(e.data.action);
            },
            () => {
                console.log('Cancel Pressed');
            },
            string.understand,
        );

    return () => exitListener()
    },[]);

const renderScene = (...) => {
    ...
    return (
        <PreviewSave ...
            navigation={navigation}
            listener={exitListener}.        // here I try to pass the listener
        />
    );
}

return (
    ...
    <TavView ...
        renderScene={renderScene} ... />
);

PreviewSave.js

...
const save = async () => {
    // listener()
    // listener.remove();
    listener;                              // none of these work

    if (route?.item) {
        navigation.goBack();
        navigation.navigate(string.articles, {
            screen: string.article
        });
    } else {
        navigation.goBack();
    }
};

return (
    ...
    <TouchableOpacity onPress={() => save()}>
         <Text>{string.save}</Text>
    </TouchableOpacity>

);

dependencies

    "react": "^17.0.2",
    "react-native": "^0.67.4",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11"

score 1 · Accepted Answer · answered May 31 '22 at 10:34

1

Actually, your variable is going to be reset on the next render batch, and the function to remove the listener will be lost. To retain the function on consequent renders, you need to use useRef

let exitListener = useRef();

useEffect(() => {
    exitListener.current = navigation.addListener('beforeRemove', e => {
        e.preventDefault();
        customAlert(                 // <- alerting user and waiting for his response
            string.exit,
            string.exitMore,

            () => {
                navigation.dispatch(e.data.action);
            },
            () => {
                console.log('Cancel Pressed');
            },
            string.understand,
        );

    return exitListener;
    // return () => exitListener()
    });

And then pass it.

const renderScene = (...) => {
    ...
    return (
        <PreviewSave ...
            navigation={navigation}
            listener={exitListener.current}
        />
    );
}

answered May 31 '22 at 10:34

ancyrweb

1,220
12
12

Can you share a reproducible ? – ancyrweb May 31 '22 at 10:40
Just did it ! :) – ancyrweb May 31 '22 at 10:41
useRef is a mechanism similar to pointers in C : it remembers a value through different renders and does so until the ref is destroyed (when the component unmounts). – ancyrweb May 31 '22 at 10:45
You should indeed return it for the `useEffect` function to destroy it. Also, you should pass an empty array as the second parameter of `useEffect`, otherwise your effect will run on every render (which seems unecessary in this case). – ancyrweb May 31 '22 at 10:47
1

The second parametr is provided, Just not in the question. Thank you! Lets delete comments ;) – Patrycja Trzcińska May 31 '22 at 10:50

How to remove listener in another screen - React Native

1 Answers1