From 05369e90b89c48e248bc293c296e76f21efa860f Mon Sep 17 00:00:00 2001 From: Hamza Agar Date: Mon, 27 Jul 2026 20:19:36 +0300 Subject: [PATCH 1/4] feat(rn-webview): add @chativa/rn-webview package Embeds the existing Chativa web chat widget inside a react-native-webview, bridged to native props/callbacks, instead of re-implementing the UI as native RN views. The widget's JS (core + connector + UI) genuinely runs inside the WebView's own browser engine, loaded from each package's published CDN/global build, so every existing @chativa/connector-* package works completely unmodified. exposes the same event props @chativa/react's does (onMessage, onConnect, onSurveySubmit, ...), plus sendToChativaWebView() for live updates (e.g. theme) after mount without reloading the page. A from-scratch native RN UI is tracked separately per platform, as a conditional follow-up only if this doesn't meet the UX bar in practice: iOS (#29), Android (#30). Adds examples/rn-webview-expo as a living usage doc. Closes #6 Co-Authored-By: Claude Sonnet 5 --- .github/workflows/release.yml | 6 + .gitignore | 1 + examples/rn-webview-expo/.gitignore | 41 + examples/rn-webview-expo/App.tsx | 81 + examples/rn-webview-expo/README.md | 43 + examples/rn-webview-expo/app.json | 25 + .../assets/android-icon-background.png | Bin 0 -> 17549 bytes .../assets/android-icon-foreground.png | Bin 0 -> 78796 bytes .../assets/android-icon-monochrome.png | Bin 0 -> 4140 bytes examples/rn-webview-expo/assets/favicon.png | Bin 0 -> 1129 bytes examples/rn-webview-expo/assets/icon.png | Bin 0 -> 393493 bytes .../rn-webview-expo/assets/splash-icon.png | Bin 0 -> 17547 bytes examples/rn-webview-expo/index.ts | 8 + examples/rn-webview-expo/package.json | 27 + examples/rn-webview-expo/tsconfig.json | 14 + packages/rn-webview/README.md | 119 + packages/rn-webview/babel.config.js | 3 + packages/rn-webview/package.json | 89 + packages/rn-webview/src/ChativaWebView.tsx | 152 + .../rn-webview/src/bridge/bootstrapHtml.ts | 167 + packages/rn-webview/src/bridge/postMessage.ts | 15 + packages/rn-webview/src/bridge/types.ts | 72 + packages/rn-webview/src/index.ts | 34 + packages/rn-webview/tsconfig.json | 25 + pnpm-lock.yaml | 3233 ++++++++++++++++- pnpm-workspace.yaml | 1 + tsconfig.json | 3 + 27 files changed, 4033 insertions(+), 126 deletions(-) create mode 100644 examples/rn-webview-expo/.gitignore create mode 100644 examples/rn-webview-expo/App.tsx create mode 100644 examples/rn-webview-expo/README.md create mode 100644 examples/rn-webview-expo/app.json create mode 100644 examples/rn-webview-expo/assets/android-icon-background.png create mode 100644 examples/rn-webview-expo/assets/android-icon-foreground.png create mode 100644 examples/rn-webview-expo/assets/android-icon-monochrome.png create mode 100644 examples/rn-webview-expo/assets/favicon.png create mode 100644 examples/rn-webview-expo/assets/icon.png create mode 100644 examples/rn-webview-expo/assets/splash-icon.png create mode 100644 examples/rn-webview-expo/index.ts create mode 100644 examples/rn-webview-expo/package.json create mode 100644 examples/rn-webview-expo/tsconfig.json create mode 100644 packages/rn-webview/README.md create mode 100644 packages/rn-webview/babel.config.js create mode 100644 packages/rn-webview/package.json create mode 100644 packages/rn-webview/src/ChativaWebView.tsx create mode 100644 packages/rn-webview/src/bridge/bootstrapHtml.ts create mode 100644 packages/rn-webview/src/bridge/postMessage.ts create mode 100644 packages/rn-webview/src/bridge/types.ts create mode 100644 packages/rn-webview/src/index.ts create mode 100644 packages/rn-webview/tsconfig.json diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 5a4eedf..5b81aa8 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -100,6 +100,12 @@ jobs: env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: Publish @chativa/rn-webview + run: pnpm publish --access public --no-git-checks + working-directory: packages/rn-webview + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: Create GitHub Release uses: softprops/action-gh-release@v2 with: diff --git a/.gitignore b/.gitignore index 9d5dfd9..2c13955 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ lerna-debug.log* node_modules dist dist-ssr +lib *.local # Docusaurus diff --git a/examples/rn-webview-expo/.gitignore b/examples/rn-webview-expo/.gitignore new file mode 100644 index 0000000..d914c32 --- /dev/null +++ b/examples/rn-webview-expo/.gitignore @@ -0,0 +1,41 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ +expo-env.d.ts + +# Native +.kotlin/ +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo + +# generated native folders +/ios +/android diff --git a/examples/rn-webview-expo/App.tsx b/examples/rn-webview-expo/App.tsx new file mode 100644 index 0000000..940038d --- /dev/null +++ b/examples/rn-webview-expo/App.tsx @@ -0,0 +1,81 @@ +import { useRef } from "react"; +import { Button, SafeAreaView, StyleSheet, Text, View } from "react-native"; +import { StatusBar } from "expo-status-bar"; +import { ChativaWebView, sendToChativaWebView } from "@chativa/rn-webview"; +import type WebView from "react-native-webview"; + +export default function App() { + const webViewRef = useRef(null); + + return ( + + + @chativa/rn-webview example + + ChativaWebView embeds the same web widget used by @chativa/react — + the connector runs entirely inside the WebView's own browser + engine, so DummyConnector (and any @chativa/connector-* package) + works completely unmodified. + + +