Hide screen content when switching apps

Expo SDK
1

Please provide the following:

  1. SDK Version: SDK 36
  2. Platforms(Android/iOS):

Just wonder if anyone has a good solution for blurring/hiding screen content when switching apps.

I can detect appState’s state to create a modal screen to cover the whole app for IOS when the app become inactive, but same trick does not work for android.
The android problem is described in this blog post. How to Create a Security Screen on iOS and Android in React Native | by Jonas Kuiler | Medium

Here’s also feature request from 2018. So I wonder if anyone has better solution after two years?

2

Instead of a modal, use an absolute positioned View in your app root rendered element, with default style display: none. Set the style to display: “flex” when you want to hide the content.

// this could be a variable in state or something
// when app state changes to background, set it to true to hide content
// restore it to false when the app state changes back to active
const hideContent = false;

const App = (props)=>{
  return <View style={{ flex:1 }}>
    <View style={{ flex:1 }}>
      <Text>Your app content goes here</Text>
    </View>
    <View style={[
      { position: "absolute", width: "100%", height: "100%", backgroundColor: "black"},
      { display: (hideContent === false) ? "none" : "flex" }
    ]} />
  </View>
}
3

Hi,
The problem is not if I can render the view to block the content.
Which I am making a modal to do this for IOS already.
The problem is on Android, the appState change triggers after the user is already outside the app (on the home screen or using the app switcher) So even I set the state to change the modal to show, it does not change the screen until the user goes back to the app.
Please see the link I linked in the question.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.