How to prevent sensitive content with an image in task in react native

I would like to have an image in multitasking to prevent sensitive content.

It's working on IOS but not on android. I have an component Mask.tsx

  const Mask: React.FC = () => {
  const [visible, setVisible] = useState(false);

  useAppState({
    onForeground: () => setVisible(false),
    onBackground: () => setVisible(true),
  });

  return visible ? <MaskImage source={hidden} /> : null;
};

}

the hook from appState

    function handleAppStateChange(nextAppState: AppStateStatus) {
      if (nextAppState === 'active') {
        isValidFunction(onForeground) && onForeground();
      } else if (
        appState === 'active'&&
        nextAppState.match(/inactive|background/)
      ) {
        isValidFunction(onBackground) && onBackground();
      }
      setAppState(nextAppState);
      isValidFunction(onChange) && onChange(nextAppState);
    }
    AppState.addEventListener('change', handleAppStateChange);

    return () => AppState.removeEventListener('change', handleAppStateChange);
  }, [onChange, onForeground, onBackground, appState]);

And I put <Mask /> on App.tsx