Change the preview image of an app on Recents Screen

Question

I am making a React Native app which has a secure section where the user has to enter his password to unlock the protected content. The problem is, when the user switches to another app before locking that section, a screen capture along with the unlocked content will be generated and displayed on the Recents Screen.

Is there a way to replace the preview with something else, a blank screen or a custom screen like the Chrome/Firefox incognito mode?

Answer 1

You could listen to the app going in background and show a white/empty modal on top of the current screen

import {AppState} from 'react-native'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      appState: AppState.currentState
    }
  }

  componentDidMount() {
    AppState.addEventListener("change", this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener("change", this._handleAppStateChange);
  }

  _handleAppStateChange = (newAppState) => {
    if(newAppState === 'background' && newAppState !== this.state.appState) {
      // SHOW EMPTY SCREEN
    }

    if(newAppState !== 'background' && this.state.appState === 'background') {
      // HIDE EMPTY SCREEN
    }
    
    if (newAppState !== this.state.appState) {
      this.setState({ appState: newAppState })
    }
  }

  ... rest of the app ....
}

AppState documentation