Hide content screen in background mode

Look what I built!
1

I’ve been trying to replicate a specific feature of WhatsApp for some time in my app, and I’ve already searched everywhere and so far I haven’t found anything that could effectively help me with something. The functionality in question is basically that a black screen appears in place of the current screen when the app goes into the background, the problem is that in my current implementation this only occurs in the foreground event when I am coming from the background event, which is not it makes sense being that the screen that I want to hide keeps appearing and only disappears when I enter the application, it is as if at the moment of the background event the application threads stop and there is no time for the transition to occur correctly. I would like to know if anyone has experienced something similar and if so how did you manage to solve this problem.

import React, { useEffect, useState } from 'react';
import { View, Text, AppState } from 'react-native';

function App () {

  const [ is_in_background, set_is_in_background ] = useState(false);
  
  useEffect(() => {
   
    const subscription = AppState.addEventListenner('change', nextState => {
       
      if (nextState !== 'active') set_is_in_background(true);

      if (nextState === 'active') set_is_in_background(false);
   
    });

    return () => subscription.remove();

  }, []);

  if(is_in_background) {
   
    return (
      <View>
        <Text>Black screen</Text>
      </View>
    );

  }

  return (
    <View>
      <Text>Screen Content</Text>
    </View>   
  );
}