title: How to hide current screen when app goes background in React Native Android
body: <p>I have a react-native-init App which uses <a href="https://facebook.github.io/react-native/docs/appstate" rel="noreferrer">appState</a> 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.</p>
  
  <p>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).</p>
  
  <p>This can be easily achieved in iOS because iOS has three stages:</p>
  
  <ol>
  <li><strong>active</strong>: when the app is in foreground being used.</li>
  <li><strong>inactive</strong>: When the app is in transition about to go background.</li>
  <li><strong>background</strong>: When the app is already in background.</li>
  </ol>
  
  <p>So when the app goes <strong>inactive</strong>, a flag in the component state is changed and a component with an image is shown instead of the current screen.</p>
  
  <pre><code>handleAppStateChange = (nextAppState) =&gt; {
      if (nextAppState.match(/inactive|background/)) {
        this.setState({ showSplashScreen: true })
      }
      if (this.state.appState.match(/background/) &amp;&amp; nextAppState === 'active') {
        this.setState({ showSplashScreen: false })
      }
    }
  </code></pre>
  
  <p>However, android uses only <strong>active and background</strong> <em>appStates</em>, so when it goes background the function is called with <strong>background</strong> as <em>nextAppState</em> and the flag <em>showSplashScreen</em> in the state is changed to true, but seems like since the app is already <strong>background</strong> 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.</p>
  
  <p><strong><em>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?</em></strong></p>