예제

Version 2.0.0+

`initSettings` (중요)

다른 ScreenGuard API를 호출하기 전에 반드시 initSettings()를 한 번 호출해야 합니다. 아래는 각 파라미터별 예제입니다.

`enableCapture` & `enableRecord`

스크린샷과 화면 녹화를 독립적으로 제어하는 조합.

// 스크린샷 허용, 화면 녹화 차단
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: false,
});

// 화면 녹화 허용, 스크린샷 차단
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: true,
});

// 스크린샷 및 녹화 모두 차단 (가장 일반적)
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
});

// 모두 허용 (예: 리뷰/데모 화면용)
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
});

`enableContentMultitask` (iOS)

enableCapture / enableRecord와 함께 사용하여 App Switcher의 표시 여부를 제어합니다.

// 스크린샷 및 녹화 허용, App Switcher에서는 콘텐츠 숨김
await ScreenGuardModule.initSettings({
  enableCapture: true,
  enableRecord: true,
  enableContentMultitask: false,
});

// 스크린샷 및 녹화 차단, App Switcher에서는 콘텐츠 표시
await ScreenGuardModule.initSettings({
  enableCapture: false,
  enableRecord: false,
  enableContentMultitask: true,
});

`displayScreenGuardOverlay` (iOS)

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true, // 스크린샷/녹화 시 오버레이 표시
  timeAfterResume: 2000,
});

`displayScreenguardOverlayAndroid` (Android)

await ScreenGuardModule.initSettings({
  displayScreenguardOverlayAndroid: true, // 백그라운드에서 돌아올 때 오버레이 표시
});

`timeAfterResume`

await ScreenGuardModule.initSettings({
  displayScreenGuardOverlay: true,
  timeAfterResume: 2000, // 오버레이 2초간 표시
});

`getScreenshotPath`

await ScreenGuardModule.initSettings({
  getScreenshotPath: true, // screenshotData에 파일 경로 포함
});

`limitCaptureEvtCount`

await ScreenGuardModule.initSettings({
  limitCaptureEvtCount: 3, // 첫 3번의 스크린샷에 대해서만 이벤트 발생
});

`trackingLog`

await ScreenGuardModule.initSettings({
  trackingLog: true, // 활동 로깅 활성화
});

종합 예제

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();
    };
  }, []);

  // ...
}

색상으로 등록

단색 오버레이로 ScreenGuard를 활성화합니다 (예: Google 빨간색 #DB4437).

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

블러로 등록

블러 효과(반경 35)로 ScreenGuard를 활성화합니다.

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

이미지로 등록

배경색과 함께 사용자 정의 이미지를 표시합니다.

// 네트워크 이미지
await ScreenGuardModule.registerWithImage({
  source: { uri: 'https://example.com/logo.png' },
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
  alignment: 4, // center
});

// 로컬 이미지
await ScreenGuardModule.registerWithImage({
  source: require('./assets/logo.png'),
  width: 200,
  height: 200,
  backgroundColor: '#0f0f23',
});

부분 등록 새로움 ✨

특정 뷰 영역만 마스킹합니다 (iOS 전용, 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>이 콘텐츠는 스크린샷에서 마스킹됩니다</Text>
      </View>
      <Button title="가드 활성화" onPress={enablePartialGuard} />
    </View>
  );
}

등록 해제

await ScreenGuardModule.unregister();

스크린샷 이벤트 수신 (Hook)

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

function MyComponent() {
  const { screenshotData, activationStatus } = useSGScreenShot((event) => {
    console.log('스크린샷 감지:', event.name);
  });

  return (
    <View>
      <Text>보호 상태: {activationStatus?.isActivated ? '활성' : '비활성'}</Text>
      <Text>마지막 스크린샷: {screenshotData?.name || '없음'}</Text>
    </View>
  );
}

화면 녹화 이벤트 수신 (Hook)

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

function MyComponent() {
  const { recordingData } = useSGScreenRecord((event) => {
    if (event.isRecording) {
      console.log('화면 녹화가 시작되었습니다!');
    }
  });

  return (
    <Text>녹화 중: {recordingData?.isRecording ? '예' : '아니요'}</Text>
  );
}

Version <= 1.1.1

v1.x에는 initSettings()가 없었습니다. register 메서드를 직접 호출할 수 있습니다.

Promise 지원

색상으로 등록

import ScreenGuardModule from 'react-native-screenguard';

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

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

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

블러로 등록

// 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('등록됨'));

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

등록 해제

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

// v1.0.8+ (Promise .then)
ScreenGuardModule.unregister().then(() => console.log('등록 해제됨'));

// v < 1.0.8
ScreenGuardModule.unregister();

이미지로 등록

// 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('등록됨'));

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

스크린샷 이벤트 수신

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);
  }
});

// 정리
ScreenGuardModule.removeScreenshotEventListener();

화면 녹화 이벤트 수신

import ScreenGuardModule from 'react-native-screenguard';

// iOS 전용
ScreenGuardModule.registerScreenRecordingEventListener(() => {
  console.log('화면 녹화가 종료되었습니다');
});

// 정리
ScreenGuardModule.removeRecordingEventListener();

클래스 컴포넌트 (레거시)

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+는 async/await를 지원합니다. v < 1.0.8에서는 async/await를 제거하세요.
class App extends Component {
  componentDidMount() {
    ScreenGuardModule.registerScreenshotEventListener(true, (data) => {
      console.log('스크린샷:', 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>민감한 콘텐츠</Text>
        <Button title="색상" onPress={this.activateWithColor} />
        <Button title="블러" onPress={this.activateWithBlur} />
        <Button title="비활성화" onPress={this.deactivate} />
      </View>
    );
  }
}

export default App;

예제

Version 2.0.0+​

initSettings (중요)​

enableCapture & enableRecord​

enableContentMultitask (iOS)​

displayScreenGuardOverlay (iOS)​

displayScreenguardOverlayAndroid (Android)​

timeAfterResume​

getScreenshotPath​

limitCaptureEvtCount​

trackingLog​

종합 예제​

색상으로 등록​

블러로 등록​

이미지로 등록​

부분 등록 새로움 ✨​

등록 해제​

스크린샷 이벤트 수신 (Hook)​

화면 녹화 이벤트 수신 (Hook)​

Version <= 1.1.1​

색상으로 등록​

블러로 등록​

등록 해제​

이미지로 등록​

스크린샷 이벤트 수신​

화면 녹화 이벤트 수신​

클래스 컴포넌트 (레거시)​

Version 2.0.0+

`initSettings` (중요)

`enableCapture` & `enableRecord`

`enableContentMultitask` (iOS)

`displayScreenGuardOverlay` (iOS)

`displayScreenguardOverlayAndroid` (Android)

`timeAfterResume`

`getScreenshotPath`

`limitCaptureEvtCount`

`trackingLog`

종합 예제

색상으로 등록

블러로 등록

이미지로 등록

부분 등록 새로움 ✨

등록 해제

스크린샷 이벤트 수신 (Hook)

화면 녹화 이벤트 수신 (Hook)

Version <= 1.1.1

색상으로 등록

블러로 등록

등록 해제

이미지로 등록

스크린샷 이벤트 수신

화면 녹화 이벤트 수신

클래스 컴포넌트 (레거시)