ComponentWillUnmount is not getting called React-Navigation

I know this question already exists on StackOverflow but most questions and answers are very old. I am working on an app that performs a fetch call to a db inside componentDidMount obviously using react-native.

I have an interval running in componentDidMount that calls a query and it works well. Now I need to call clearInterval(this.interval) inside componentWillUnmount to stop the query and logging in my app.

1. It should be called when I press a save button and navigate with props.navigation.navigate("new Screen", {params})

I read a solution for this where I should use props.navgiation.replace("Screen") - but it doesn't work for me

2. The second important part is that componentWillUnmount also needs to be called when I press on another tab (using bottom-tab-navigator)

I understand that the screens in a stack navigator for example never really unmount. So is there a different way to call componentWillUnmount maybe something like when the user left screen( or loses focus on-screen) or user left the specific routeName or something.

My componentWillUnmount - really simple:

  componentWillUnmount(){
    clearInterval(this.interval)
    console.log("Component did Unmount")
  }

its only called if I go to my LogOut Screen and log-out to be in my LoginScreen again.

(EDIT) My Navigator:

const EintragenStack = createStackNavigator(
  {
    Eintragen: {
      screen: StundenEintragen2,
      navigationOptions: {
        headerTitle: "Stundenverwaltung",
        headerTitleStyle:{
          color: "white",
          alignSelf: "center"
        },
        headerStyle:{
          backgroundColor: "#a51717"
        },  
      }
    }
  }
)

const CheckStack = createStackNavigator(
  {
    Übersicht: StundenChecken,
    Monat: Monatsübersicht2, // Monatsübersicht
    Tag: TagesübersichtDiff, // Tagesübersicht
    Edit: {
      screen: StundenEdit,
      navigationOptions:{
        headerTitle: "Stunden bearbeiten",
        headerTitleStyle: {
          color: "white",
          alignSelf: "center"
        },
        headerStyle: {
          backgroundColor: "#F39237"
        }
      }
    }
  },
  {
    backBehavior: "history"
  }
);
const Tabs = createBottomTabNavigator(
  { 
    Eintragen: EintragenStack,     // StundenEintragen
    Checken: CheckStack,
    Logout: Logout
  },
  {
    backBehavior: "history",
    tabBarOptions: {
      labelStyle: {
        fontSize: 12,
        color: "black"
      },
      activeTintColor: "red",
      activeBackgroundColor: "#ccc"
    }
  }
);
const AppNavigator = createSwitchNavigator({
  Login: Auth, //SecondAuth,
  Tabs: Tabs,
});

EintragenStack.navigationOptions = {   
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-add-circle-outline" color="green" />;
  }

};
CheckStack.navigationOptions = {
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-calendar" color="black" />;
  }
};
Logout.navigationOptions = {
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-power" color="red" />;
  }
};

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

!! NEW EDIT !!

I actually kinda fixxed it for my needs but the problem still exists overall. I dont know if this is a good approach but for me I did it like this:

1. I am calling checkUnlockHandler in componentWillMount every 30sec.
2. When checkUnlockHandler gets to an if that tells him that he doesnt need running anymore I call clearInterval(this.interval("here is my checkUnlockHandler"))
3. After that my interval in componentDidMount stops running wich is good.
4. Problems: Interval still runs in other screens, It feels weird to call a function inside componentDidMount wrapped in a interval and inside this function to tell when the interval should stop.