rn-webwrapper-bridge-types

rn-webwrapper-bridge-types

React Native WebView와 웹 간의 통신을 위한 AppBridge TypeScript 타입 정의입니다.

사용 프로젝트

RN-Expo-WebApp-Wrapper-Template

설치

npm install rn-webwrapper-bridge-types --save-dev

사용법

방법 A: tsconfig.json에 등록 (권장)

tsconfig.json의 compilerOptions.types에 패키지명을 추가합니다.

{
  "compilerOptions": {
    "types": ["rn-webwrapper-bridge-types"]
  }
}

방법 B: import 사용

앱의 진입점 파일(예: main.ts, app.tsx)에서 한 번만 import하면 됩니다.

import 'rn-webwrapper-bridge-types';

타입 정의

interface AppBridge {
  /** 앱으로 메시지 전송 (응답 없음) */
  send(action: string, payload?: Record<string, unknown>): void;

  /** 앱으로 메시지 전송 후 응답 대기 */
  call<T = unknown>(action: string, payload?: Record<string, unknown>, timeout?: number): Promise<T>;

  /** 앱에서 온 메시지 리스너 등록 ('*'로 모든 메시지 수신 가능) */
  on(action: string, callback: (payload: unknown, message?: unknown) => void): void;

  /** 등록된 리스너 해제 */
  off(action: string, callback?: (payload: unknown, message?: unknown) => void): void;

  /** 앱 환경인지 체크 */
  isApp(): boolean;

  /** 버전 */
  version: string;
}

interface Window {
  AppBridge?: AppBridge;
}

사용 예시

// 앱 환경 체크
if (window.AppBridge?.isApp()) {
  // 메시지 전송
  window.AppBridge.send('navigate', { screen: 'home' });

  // 응답이 필요한 메시지
  const result = await window.AppBridge.call<{ token: string }>('getToken');
  console.log(result.token);

  // 메시지 리스너 등록
  window.AppBridge.on('notification', (payload) => {
    console.log('알림 수신:', payload);
  });

  // 모든 메시지 수신
  window.AppBridge.on('*', (payload, message) => {
    console.log('메시지 수신:', message);
  });
}

라이선스

MIT