In my code I have a problem with unmount a ponent. I am using drawer-navigator and when i navigating between drawer-screens the previous screen is not dying and when i open that screen again everything is still there.

But i want to re-render or unmount and mount the ponent again when i navigate between drawer-screens. Is there a way for that? Or how can i make my ponent unmount manually? I know there is a lot of question about this but i couldn't find that i want.

My react native version is 0.63

In my code I have a problem with unmount a ponent. I am using drawer-navigator and when i navigating between drawer-screens the previous screen is not dying and when i open that screen again everything is still there.

But i want to re-render or unmount and mount the ponent again when i navigate between drawer-screens. Is there a way for that? Or how can i make my ponent unmount manually? I know there is a lot of question about this but i couldn't find that i want.

My react native version is 0.63

• javascript
• reactjs
• react-native
• react-navigation

2 Answers 2

react navigation never destroy the screen. Its mean your screen will never unMount or when you go back it will never remount (didMount). To Perform such see the example below

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

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

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

  return <Home />;
}

Reference : Navigation Lifecycle

You should check this page of react-navigation documentation

Consider a stack navigator with screens A and B. After navigating to A, its ponentDidMount is called. When pushing B, its ponentDidMount is also called, but A remains mounted on the stack and its ponentWillUnmount is therefore not called.

Conclusion, the screens are not detroyed and re-created everytime you navigate, it's by design.

If you want to execute some code when you leave or open again a page you should use the lifecycle events presented in the same documentation