CODEWITHSUNDEEP
androidreact-nativeandroid-activity
Gustavo Franco
Gustavo Franco

Reputation: 230

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

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?

Upvotes: 12

Views: 7660

Answers (3)

Viết Kenji Gi
Viết Kenji Gi

Reputation: 428

i try this, that work prefect in android: https://github.com/misaku/react-native-background-secure, ios you could use appstate

Upvotes: 0

Gabe Sechan
Gabe Sechan

Reputation: 93726

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.

Upvotes: 5

Firas Shrourou
Firas Shrourou

Reputation: 715

Take a look on the Activity Life Cycle of android apps, you can check the following link

there are three stages that can help you

onPause: called when activity is not visible to the user.

onStop: called when activity is no longer visible to the user.

onResume: called when activity will start interacting with the user again.

enter image description here

Upvotes: 1

Related Questions