Raiidr WebView component with native Android enhancements — including dialog suppression, keyboard lock, cookie control, incognito mode, Safe Browsing, visibility toggling, custom User-Agent, and full lifecycle event dispatching.
npm install rns-webviewalert, confirm, and prompt dialogs
bash
npm install rns-webview
`
---
$3
#### app.config.js
`js
module.exports = {
expo: {
plugins: ["rns-webview"],
},
};
`
#### app.json
`json
{
"expo": {
"plugins": ["rns-webview"]
}
}
`
> 💡 suppressDialog defaults to true. No extra config required.
---
$3
`bash
eas build --profile development --platform android
`
> ✅ Works with EAS without running expo prebuild manually.
---
📱 Usage in React Native
`tsx
import RaiidrWebView from "rns-webview";
export default function App() {
return (
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 | Container style |
| descendantFocusability | "blockDescendants" | "beforeDescendants" | "afterDescendants" | Controls keyboard focus |
---
🔍 How the Plugin Works
$3
- Injects Kotlin source files during prebuild
- Custom WebChromeClient suppresses dialogs
- Provides cookie, incognito, keyboard lock, visibility & messaging controls
- No manual modifications to /android required
$3
- 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:
`ts
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:
`js
window.webkit.messageHandlers.ReactNativeWebView.postMessage("YOUR_MESSAGE");
`
Example:
`js
window.webkit.messageHandlers.ReactNativeWebView.postMessage("ACCEPT_POLICY");
`
---
🤖 Android (JavaScriptInterface)
Android exposes a global JS object:
`
window.ReactNativeWebView
`
Send message:
`js
window.ReactNativeWebView.postMessage("YOUR_MESSAGE");
`
Example:
`js
window.ReactNativeWebView.postMessage("ACCEPT_POLICY");
`
---
🌐 Universal Cross-Platform Wrapper (Recommended)
Place this in your webpage:
`html
`
Usage:
`html
`
$3
- ✔ 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 }) => { ... })`