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?

In standard Android, you would [use `FLAG_SECURE`](https://stackoverflow.com/a/9822607/115145). I am not certain what the React Native equivalent is. — CommonsWare, May 16 '18 at 20:30
Agree with @CommonsWare, i guess there is no proper way. however in android there is `android:excludeFromRecents`. — Masoom Badi, May 16 '18 at 21:17
That's unfortunate... Thanks for pointing out the native solutions guys. I found a [FLAG_SECURE native module](https://github.com/kristiansorens/react-native-flag-secure-android) for React Native, will test it out later. Would be great [if there's an equivalent of FLAG_SECURE on iOS](https://stackoverflow.com/questions/46221825/how-to-prevent-users-taking-screenshots-of-app-on-ios). — Blazing Fast, May 17 '18 at 05:36

score 2 · Answer 1 · answered Jul 22 '20 at 08:51

2

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

answered Jul 22 '20 at 08:51

gbalduzzi

9,356
28
58

I like your answer. is it possible to implement it with hooks ? – Legeo Jul 22 '20 at 08:54
Yes. In the official documentation i linked there is a hook example – gbalduzzi Jul 22 '20 at 08:55
1

well i follow the official documentation, and i've to say that works perfectly. Thank you man you won the bounty. – Legeo Jul 22 '20 at 13:30
@Legeo I tried this way sometime I'm able to see the blank screen and sometimes I'm not able to see the app contents. Have faced the same? – Vivek Dhayalan Jul 13 '23 at 03:20

Muhammad Numan · Answer 2 · 2020-07-22T17:05:45.287

0

you can use react-native-flag-secure-android package

yarn add react-native-flag-secure-android

USAGE

import FlagSecure from 'react-native-flag-secure-android';
 
function flagSecure(enable) {
  if (enable) {
    FlagSecure.activate();
  } else {
    FlagSecure.deactivate();
  }
}

Note: it will work for android

edited Jul 22 '20 at 17:05

answered Jul 21 '20 at 18:29

Muhammad Numan

23,222
6
63
80

is this valid for ios too ? – Legeo Jul 21 '20 at 21:42
there isn't a way to change the image in the IOS recent Image too ? i read in the comment in the original post about the library FlagSecure. – Legeo Jul 22 '20 at 08:21
@Legeo you can use https://www.npmjs.com/package/react-native-screenshield which works on both android and ios – Muhammad Numan Jul 22 '20 at 08:58
did you tried to install with yarn the library. npmjs.com/package/react-native-screenshield ? i receive an error during the installation. – Legeo Jul 22 '20 at 12:46
@Legeo sorry I did not test this package – Muhammad Numan Jul 22 '20 at 17:06

Change the preview image of an app on Recents Screen

2 Answers2