How to hide current screen when app goes background in React Native Android

Question

I have a react-native-init App which uses appState to detect when an app goes background in order to hide the screen that the user was using (for example a list of emails), and put an image in front of it until the user calls the app foreground again and is authenticated.

This is to prevent any person, checking which are the current opened apps, from seeing what the last screen that the user was checking in my app looks like, and see the image instead (like a splash screen).

This can be easily achieved in iOS because iOS has three stages:

1. active: when the app is in foreground being used.
2. inactive: When the app is in transition about to go background.
3. background: When the app is already in background.

So when the app goes inactive, a flag in the component state is changed and a component with an image is shown instead of the current screen.

handleAppStateChange = (nextAppState) => {
    if (nextAppState.match(/inactive|background/)) {
      this.setState({ showSplashScreen: true })
    }
    if (this.state.appState.match(/background/) && nextAppState === 'active') {
      this.setState({ showSplashScreen: false })
    }
  }

However, android uses only active and background appStates, so when it goes background the function is called with background as nextAppState and the flag showSplashScreen in the state is changed to true, but seems like since the app is already background the component does not react to the state change and when you check the list of opened apps you still see the last screen been used, a screen that can contain sensitive data.

Is there any way to detect in react-native Android when the app is going to go background so that the current screen can be replaced with an image before going background?

Answer 1

THere's mechanisms built into Android to prevent the leak of sensitive data. Use them, do NOT attempt to overwrite with an image- or at least don't rely on that alone.

The correct way to do this is to set the SECURE flag on the window, so that the Android OS will take care of this and other possible issues for you, such as screen shots. The code to do that is

getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE,WindowManager.LayoutParams.FLAG_SECURE);

This can be placed in your activity's onCreate, before setContentView is called.