🚀 React Native WebView SDK

React Native WebView 통합 SDK로서 다음 기능을 제공합니다:

• 🔗 Bridge — Native ↔ Web 양방향 통신
• 🔐 Social Login — Google / Kakao / Naver 통합 로그인
• 🔔 Firebase Push — Foreground & Background 알림 처리
• ⏪ BackHandler — Android 물리 뒤로가기 버튼 처리

📦 Installation

npm install @ohbyeongmun/react-native-webview-sdk
# OR
yarn add @ohbyeongmun/react-native-webview-sdk

🧭 Structure Overview

| Module | Path | Description | |------------|----------------|--------------| | Bridge | src/bridge | Native ↔ Web 통신 및 BackHandler | | Auth | src/auth | Google / Kakao / Naver 로그인 | | Firebase | src/firebase | Firebase 푸시 알림 처리 |

🔧 Import Example

import { Bridge, Auth, Firebase } from "@ohbyeongmun/react-native-webview-sdk";

🧱 Bridge Example

import React, { useRef, useEffect } from "react";
import { WebView } from "react-native-webview";
import { Bridge } from "@ohbyeongmun/react-native-webview-sdk";

const App = () => {
  const webviewRef = useRef<WebView>(null);

  useEffect(() => {
    Bridge.setWebViewRef(webviewRef);

    // 웹에서 보낸 이벤트 수신
    Bridge.on("web:ping", (data) => {
      console.log("📩 From Web:", data);
    });
  }, []);

  return <WebView ref={webviewRef} source={{ uri: "https://example.com" }} />;
};

⏪ BackHandler Example

import React, { useRef, useState } from "react";
import { BackHandler } from "react-native";
import { WebView } from "react-native-webview";
import { handleBackPress } from "@ohbyeongmun/react-native-webview-sdk";

const App = () => {
  const webViewRef = useRef<WebView>(null);
  const [backPressCount, setBackPressCount] = useState(0);
  const [isRoot, setIsRoot] = useState(true);

  React.useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
      return handleBackPress(isRoot, backPressCount, setBackPressCount, webViewRef);
    });

    return () => backHandler.remove();
  }, [isRoot, backPressCount]);

  return <WebView ref={webViewRef} source={{ uri: "https://example.com" }} />;
};

✅ 기능 요약

• 루트 페이지일 경우 “앱 종료 확인” 다이얼로그 표시
• 루트가 아닐 경우 WebView 내 goBack() 호출
• 2초 내 두 번 클릭 시 앱 종료

🔐 Google Login

import { Auth } from "@ohbyeongmun/react-native-webview-sdk";

Auth.configureGoogleSignIn({
  webClientId: "YOUR_WEB_CLIENT_ID",
  iosClientId: "YOUR_IOS_CLIENT_ID",
});

// 로그인 실행
await Auth.googleLogin(webviewRef);

✅ 결과는 WebView로 전달됩니다:

{
  "event": "auth:googleSuccess",
  "payload": {
    "user": { "id": "123", "email": "[email protected]" }
  }
}

🥪 Naver Login

import { Auth } from "@ohbyeongmun/react-native-webview-sdk";

Auth.initializeNaverLogin({
  appName: "MyApp",
  consumerKey: "YOUR_CLIENT_ID",
  consumerSecret: "YOUR_CLIENT_SECRET",
  serviceUrlSchemeIOS: "myapp",
});

// 로그인 실행
await Auth.onNaverLogin(webviewRef);

✅ 성공 시 WebView로 전달되는 메시지 예시:

{
  "type": "naverLoginSuccess",
  "data": {
    "token": { "accessToken": "abcd1234" },
    "profile": { "email": "[email protected]" }
  }
}

🔔 Firebase Push Notifications

import { Firebase } from "@ohbyeongmun/react-native-webview-sdk";

Firebase.initializeFirebasePush(webviewRef, {
  channelId: "메몬앱",
  channelName: "메몬 알림 채널",
  channelDescription: "메몬 관련 알림",
  defaultNoticeUrl: "https://metamonster.co.kr/notice",
  defaultTitle: "📢 메몬앱 알림",
});

✅ 주요 기능

• 푸시 권한 요청 (requestUserPermission)
• FCM 토큰 획득 (getFcmToken)
• Foreground / Background 알림 처리
• WebView로 이벤트 전달 (firebasePushReceived, firebasePushNavigate)

📚 Web Message Events

| Event | Description | |--------|--------------| | firebasePushReceived | 앱 실행 중 푸시 수신 | | firebasePushNavigate | 알림 클릭 시 WebView 이동 | | auth:googleSuccess | Google 로그인 성공 | | naverLoginSuccess | Naver 로그인 성공 |

🏷 Keywords

react-native, webview, sdk, social-login, google-login, kakao-login, naver-login,
firebase, push-notification, bridge, typescript, backhandler

🧑‍💻 Maintainer

Author: @ohbyeongmun
License: ISC
Version: 1.0.8