Web Analytics
Skip to main content

Example

Version 2.0.0+​

initSettings (Important)​

You must call initSettings() once before any other ScreenGuard API. Each parameter below shows a focused example.

enableCapture & enableRecord​

Combinations to control screenshot and screen recording independently.

// Allow screenshot, block screen recording
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: false,
});

// Allow screen recording, block screenshot
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: true,
});

// Block both screenshot and recording (most common)
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
});

// Allow both (e.g. for review/demo screens)
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
});

enableContentMultitask (iOS)​

Combine with enableCapture / enableRecord to control App Switcher visibility.

// Allow screenshot & recording, but hide content in App Switcher
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
  enableContentMultitask: false,
});

// Block screenshot & recording, but keep content visible in App Switcher
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
  enableContentMultitask: true,
});

displayScreenGuardOverlay (iOS)​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true, // show overlay during screenshot/record
  timeAfterResume: 2000,
});

displayScreenguardOverlayAndroid (Android)​

await ScreenGuardModule.initSettings({
  displayScreenguardOverlayAndroid: true, // show overlay when returning from background
});

timeAfterResume​

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true,
  timeAfterResume: 2000, // overlay visible for 2s
});

getScreenshotPath​

await ScreenGuardModule.initSettings({
  getScreenshotPath: true, // include file path in screenshotData
});

limitCaptureEvtCount​

await ScreenGuardModule.initSettings({
  limitCaptureEvtCount: 3, // only fire event for first 3 screenshots
});

trackingLog​

await ScreenGuardModule.initSettings({
  trackingLog: true, // enable activity logging
});

Combined example​

import React, { useEffect } from 'react';
import ScreenGuardModule from 'react-native-screenguard';

export default function App() {
  useEffect(() => {
    ScreenGuardModule.initSettings({
      displayScreenGuardOverlay: true,
      timeAfterResume: 2000,
      getScreenshotPath: true,
      trackingLog: true,
    });

    return () => {
      ScreenGuardModule.unregister();
    };
  }, []);

  // ...
}

Register with Color​

Activate ScreenGuard with a solid color overlay (e.g. Google red #DB4437).

await ScreenGuardModule.register({
  backgroundColor: '#DB4437',
});

Register with Blur​

Activate ScreenGuard with a blur effect, radius 35.

await ScreenGuardModule.registerWithBlurView({
  radius: 35,
});

Register with Image​

Show a custom image with a background color overlay.

// Network image
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4, // center
});

// Local image
await ScreenGuardModule.registerWithImage({
  source: require('./assets/logo.png'),
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
});

Register Partially NEW ✨​

Mask only a specific view region (iOS only, v2.0.2+).

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import ScreenGuardModule from 'react-native-screenguard';

export default function App() {
  const sensitiveRef = useRef<View>(null);

  const enablePartialGuard = async () => {
    await ScreenGuardModule.registerScreenguardPartially({
      viewRef: sensitiveRef,
      backgroundColor: '#000000',
    });
  };

  return (
    <View>
      <View ref={sensitiveRef}>
        <Text>This content will be masked in screenshots</Text>
      </View>
      <Button title="Enable Guard" onPress={enablePartialGuard} />
    </View>
  );
}

Unregister​

await ScreenGuardModule.unregister();

Listen to Screenshot Event (Hook)​

import { useSGScreenShot } from 'react-native-screenguard';

function MyComponent() {
  const { screenshotData, activationStatus } = useSGScreenShot((event) => {
    console.log('Screenshot detected:', event.name);
  });

  return (
    <View>
      <Text>Protection: {activationStatus?.isActivated ? 'Active' : 'Inactive'}</Text>
      <Text>Last screenshot: {screenshotData?.name || 'None'}</Text>
    </View>
  );
}

Listen to Screen Record Event (Hook)​

import { useSGScreenRecord } from 'react-native-screenguard';

function MyComponent() {
  const { recordingData } = useSGScreenRecord((event) => {
    if (event.isRecording) {
      console.log('Screen recording started!');
    }
  });

  return (
    <Text>Recording: {recordingData?.isRecording ? 'Yes' : 'No'}</Text>
  );
}

Version <= 1.1.1​

initSettings() did not exist in v1.x. You can call register methods directly.

Promise support

Register functions return a Promise from v1.0.8+ — use either await or .then(). For versions below 1.0.8, the functions return immediately with no Promise.

Register with Color​

import ScreenGuardModule from 'react-native-screenguard';

// v1.0.8+ (async/await)
await ScreenGuardModule.register({
  backgroundColor: '#DB4437', // Google red
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
}).then(() => {
  console.log('Registered');
}).catch((err) => {
  console.error(err);
});

// v < 1.0.8 (no Promise)
ScreenGuardModule.register({
  backgroundColor: '#DB4437',
  timeAfterResume: 1000,
});

Register with Blur​

// v1.0.8+ (async/await)
await ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
}).then(() => console.log('Registered'));

// v < 1.0.8
ScreenGuardModule.registerWithBlurView({
  radius: 35,
  timeAfterResume: 1000,
});

Unregister​

// v1.0.8+ (async/await)
await ScreenGuardModule.unregister();

// v1.0.8+ (Promise .then)
ScreenGuardModule.unregister().then(() => console.log('Unregistered'));

// v < 1.0.8
ScreenGuardModule.unregister();

Register with Image​

// v1.0.8+ (async/await)
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
});

// v1.0.8+ (Promise .then)
ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
}).then(() => console.log('Registered'));

// v < 1.0.8
ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4,
  timeAfterResume: 1000,
});

Listen to Screenshot Event​

import ScreenGuardModule from 'react-native-screenguard';

ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
  if (data != null) {
    console.log('path:', data.path);
    console.log('name:', data.name);
    console.log('type:', data.type);
  }
});

// Cleanup
ScreenGuardModule.removeScreenshotEventListener();

Listen to Screen Record Event​

import ScreenGuardModule from 'react-native-screenguard';

// iOS only
ScreenGuardModule.registerScreenRecordingEventListener(() => {
  console.log('Screen recording finished');
});

// Cleanup
ScreenGuardModule.removeRecordingEventListener();

Class Component (Legacy)​

For React Native < 0.59.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import ScreenGuardModule from 'react-native-screenguard';

// v1.0.8+ supports async/await. For v < 1.0.8, remove async/await.
class App extends Component {
  componentDidMount() {
    ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
      console.log('Screenshot:', data?.name);
    });
  }

  componentWillUnmount() {
    ScreenGuardModule.removeScreenshotEventListener();
    ScreenGuardModule.unregister();
  }

  activateWithColor = async () => {
    await ScreenGuardModule.register({
      backgroundColor: '#DB4437',
      timeAfterResume: 1000,
    });
  };

  activateWithBlur = async () => {
    await ScreenGuardModule.registerWithBlurView({
      radius: 35,
      timeAfterResume: 1000,
    });
  };

  deactivate = async () => {
    await ScreenGuardModule.unregister();
  };

  render() {
    return (
      <View>
        <Text>Sensitive content</Text>
        <Button title="Color" onPress={this.activateWithColor} />
        <Button title="Blur" onPress={this.activateWithBlur} />
        <Button title="Deactivate" onPress={this.deactivate} />
      </View>
    );
  }
}

export default App;