How to blur the IOS screenshot when app in background

How to / Third Party Tooling
1

Hi,
On my app’s webview, user input some forms there privacy data.
But when app is in background, inputs are not mask and ios take a screenshot for multitask view.
Is there a way to blur the screen for security? For example, Zoom app.

thanks.

2

see: ScreenCapture - Expo Documentation

2 Likes
3

@notbrent
thanks for your helping.
I am embarrassed by my lack of knowledge.
It’s exactly what I was looking for.
I will try it out as soon as I can.

Thank you so much!

4

hi,

I tried expo-screen-capture, but it didn’t work in IOS.

Currently, taking screenshots on iOS cannot be prevented. This is due to underlying OS limitations.

This time, I was able to fulfill this requirement of “How to blur the IOS screenshot when app in background” by combining them.
https://docs.expo.io/versions/v36.0.0/react-native/appstate/
(AppState · React Native)
BlurView - Expo Documentation

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: true,
    };
  }


  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
  }

  activate = async () => {
    await ScreenCapture.preventScreenCaptureAsync();
  };

  deactivate = async () => {
    await ScreenCapture.allowScreenCaptureAsync();
  };

  handleAppStateChange = (nextAppState) => {
// TODO: for android. may never be stable...?
    if (nextAppState === 'active') {
      this.deactivate();
    } else {
      this.activate();
    }

    this.setState({
      isActive: nextAppState === 'active',
    });
  };

  render() {
    const { isActive } = this.state;
    return (
      <View style={styles.appWrapper}>


        {(!isActive) && (
        <BlurView
          style={styles.blurMask}
          tint="default"
          intensity={100}
        />
        )}


      </View>
    );
  }
}

thanks!