rns-webview

Kotlin-powered WebView for React Native + Expo Dev Client
A unified, enhanced WebView for Android + iOS that suppresses intrusive dialogs, enables advanced configuration, and provides a consistent messaging bridge — all without touching native code manually.

✨ Features

• 🧠 Suppresses intrusive alert, confirm, and prompt dialogs
• ⚙️ Fully configurable via props
• 🚀 Built for Expo Dev Client + EAS Build
• 🔌 Automatic native setup via Expo Config Plugin (no manual Android/iOS edits)
• 🛠 Smooth keyboard + navigation handling
• 🍪 Cookie manager toggle
• ⌨️ Keyboard lock support
• 🕶 Incognito mode
• 🌐 Custom user agent
• 👁 Visibility control
• 📬 Bi-directional messaging (Web → React Native)
• 🛡 Safe Browsing support (Android 8+)

🚀 Getting Started

1️⃣ Install the package

npm install rns-webview

2️⃣ Register the Expo plugin

app.config.js

module.exports = {
  expo: {
    plugins: ["rns-webview"],
  },
};

app.json

{
  "expo": {
    "plugins": ["rns-webview"]
  }
}

💡 suppressDialog defaults to true. No extra config required.

3️⃣ Build with EAS

eas build --profile development --platform android

✅ Works with EAS without running expo prebuild manually.

📱 Usage in React Native

import RaiidrWebView from "rns-webview";

export default function App() {
  return (
    <RaiidrWebView
      source={{ uri: "https://raiidr.com" }}
      onNavigationStateChange={({ url }) => console.log("Navigated:", url)}
      onLoadEnd={({ url }) => console.log("Loaded:", url)}
      onError={(err) => console.error("WebView error:", err)}
      onMessage={({ data }) => alert("Message from web: " + data)}
      suppressNavigationEvents={true}
      onAlertBlock={true}
      onConfirmBlock={true}
      onPromptBlock={false}
      userAgent="MyCustomAgent/1.0"
      incognito={true}
      visible={true}
      onSafeBrowsing={true}
      style={{ flex: 1 }}
    />
  );
}

🔧 Supported Props

| Prop | Type | Description | |---------------------------|-------------------------------------------------------------------|-------------| | source | { uri: string } | Loads content into the WebView | | onNavigationStateChange | (event) => void | Triggered when navigation occurs | | onLoadEnd | (event) => void | Fired when a page finishes loading | | onError | (event) => void | Fired on load or HTTP errors | | onMessage | (event) => void | Receives messages from web content | | suppressNavigationEvents| boolean | Prevents dispatching navigation events | | onAlertBlock | boolean | Suppress native alert() dialogs | | onConfirmBlock | boolean | Suppress native confirm() dialogs | | onPromptBlock | boolean | Suppress native prompt() dialogs | | userAgent | string | Custom user-agent string | | incognito | boolean | Clears cache/history, disables save | | visible | boolean | Show/hide the WebView | | onSafeBrowsing | boolean | Enable/disable Safe Browsing | | style | StyleProp<ViewStyle> | Container style | | descendantFocusability | "blockDescendants" | "beforeDescendants" | "afterDescendants" | Controls keyboard focus |

🔍 How the Plugin Works

Android

• Injects Kotlin source files during prebuild
• Custom WebChromeClient suppresses dialogs
• Provides cookie, incognito, keyboard lock, visibility & messaging controls
• No manual modifications to /android required

iOS

• Injects Swift files via config plugin
• Custom RCTViewManager + WKWebView subclass
• Mirrors all Android props for consistent behavior
• Dialog suppression using WKWebView interception
• No manual updates in /ios required

📥 Messaging From Web Pages to React Native (onMessage)

rns-webview provides a unified message bridge, allowing any webpage (remote or local) to send messages directly to React Native.

Messages arrive through:

onMessage(({ data }) => {
  console.log("Message from web:", data);
});

🔌 Sending Messages FROM the Web Page TO React Native

IMPORTANT:
iOS and Android use different underlying JS bridges.
rns-webview exposes both automatically.

🍏 iOS (WKWebView)

Uses WKScriptMessageHandler with the name:

ReactNativeWebView

Send message:

window.webkit.messageHandlers.ReactNativeWebView.postMessage("YOUR_MESSAGE");

Example:

window.webkit.messageHandlers.ReactNativeWebView.postMessage("ACCEPT_POLICY");

🤖 Android (JavaScriptInterface)

Android exposes a global JS object:

window.ReactNativeWebView

Send message:

window.ReactNativeWebView.postMessage("YOUR_MESSAGE");

Example:

window.ReactNativeWebView.postMessage("ACCEPT_POLICY");

🌐 Universal Cross-Platform Wrapper (Recommended)

Place this in your webpage:

<script>
function sendToApp(message) {
  // Android
  if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
    window.ReactNativeWebView.postMessage(message);
    return;
  }

  // iOS
  if (
    window.webkit &&
    window.webkit.messageHandlers &&
    window.webkit.messageHandlers.ReactNativeWebView
  ) {
    window.webkit.messageHandlers.ReactNativeWebView.postMessage(message);
    return;
  }

  console.warn("Not inside rns-webview:", message);
}
</script>

Usage:

<button onclick="sendToApp('ACCEPT_POLICY')">Accept</button>

Works on:

• ✔ Android WebView
• ✔ iOS WKWebView
• ✔ Expo Dev Client

📌 Summary of Messaging

• iOS:
  window.webkit.messageHandlers.ReactNativeWebView.postMessage(...)

• Android:
  window.ReactNativeWebView.postMessage(...)

• Recommended: Use sendToApp() wrapper

• React Native receives:
  onMessage(({ data }) => { ... })

This enables reliable two-way communication between your React Native app and embedded web content.

🛡 Compatibility

• ✔ Android
• ✔ iOS
• ✔ Expo SDK 50+
• ✔ React Native 0.73+
• ❌ Not compatible with Expo Go (requires Dev Client)

💬 Feedback & Contributions

Maintained by @raiidr
Submit PRs, issues, or feature requests:
https://github.com/raiidr/rns-webview/issues

📄 License

MIT © Raiidr