21

I want to make sure the lifecycle method ComponentWillUnmount fires when I navigate to a new page. I found this post, but that doesn't seem to mention anything about navigating to a new page. I also found this post but I'm using react-navigation. In addition, I'm not using pop/push. I'm simply using this.props.navigation.navigate('SomePage') to get to the next page

VK1
  • 1,676
  • 4
  • 28
  • 51
  • 1
    Is there something you want to do, or a function you want to call in `componentWillUnmount`? Or are you trying to remove the previous page? – wicky Mar 06 '19 at 08:44
  • There are a few methods that remove bluetooth listeners. – VK1 Mar 06 '19 at 08:57

3 Answers3

33

You can use this.props.navigation.replace('routName'); It will do your job.

Sarmad Shah
  • 3,725
  • 1
  • 20
  • 42
7

React navigation never destroys the screen. It means your screen will never unmount or when you go back it will never remount (didMount). To do such you have to use useFocusEffect

import React, { useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';

const Home = () => {
  useFocusEffect(
    useCallback(() => {
      // Do something when the screen is focused/mount

      return () => {
        // Do something when the screen is unfocused/unmount
        // Useful for cleanup functions
      };
    }, [])
  );

  return <Home />;
}

Reference : Navigation Lifecycle

E_net4
  • 27,810
  • 13
  • 101
  • 139
Sultan Aslam
  • 5,600
  • 2
  • 38
  • 44
3

Checkout React Navigation's ways to handle a component's lifecycle event in their docs here

TL;DR, you can checkout React Navigation's navigation lifecycle event to perform actions when you switch screens. Hope it helps.

wicky
  • 948
  • 6
  • 13