ci: introduce examples for windows and web

Author: greweb

.github/workflows/ci.yml

@@ -52,6 +52,9 @@ lib/
 *.tgz
 *.tar.gz
 
+# Web example build
+example-web/dist/
+
 # Runtime data
 pids
 *.pid

.gitignore

@@ -1,4 +1,6 @@
 example
+example-web
+example-windows
 
 # OSX
 #

.npmignore

@@ -175,32 +175,39 @@ Returns a Promise of the image URI.
 
 - **`options`**: the same options as in `captureRef` method.
 
-### Advanced Examples
+## Examples
 
-[Checkout react-native-view-shot-example](example)
+### Native Example (iOS & Android)
+
+[Checkout react-native-view-shot-example](example) - Comprehensive example app demonstrating all features on iOS and Android.
+
+### Web Example
+
+[Checkout react-native-view-shot-web-example](example-web) - Web example demonstrating how the library works in browsers using html2canvas.
 
 ## Interoperability Table
 
 > Snapshots are not guaranteed to be pixel perfect. It also depends on the platform. Here is some difference we have noticed and how to workaround.
 
 Model tested: iPhone 6 (iOS), Nexus 5 (Android).
 
-| System                | iOS              | Android           | Windows                |
-| --------------------- | ---------------- | ----------------- | ---------------------- |
-| View,Text,Image,..    | YES              | YES               | YES                    |
-| WebView               | YES              | YES<sup>1</sup>   | YES                    |
-| gl-react v2           | YES              | NO<sup>2</sup>    | NO<sup>3</sup>         |
-| react-native-video    | NO               | NO                | NO                     |
-| react-native-maps     | YES              | NO<sup>4</sup>    | NO<sup>3</sup>         |
-| react-native-svg      | YES              | YES               | maybe?                 |
-| react-native-camera   | NO               | YES               | NO <sup>3</sup>        |
+| System              | iOS | Android         | Windows         | Web                 |
+| ------------------- | --- | --------------- | --------------- | ------------------- |
+| View,Text,Image,..  | YES | YES             | YES             | YES                 |
+| WebView             | YES | YES<sup>1</sup> | YES             | N/A                 |
+| gl-react v2         | YES | NO<sup>2</sup>  | NO<sup>3</sup>  | NO<sup>3</sup>      |
+| react-native-video  | NO  | NO              | NO              | NO                  |
+| react-native-maps   | YES | NO<sup>4</sup>  | NO<sup>3</sup>  | NO<sup>3</sup>      |
+| react-native-svg    | YES | YES             | maybe?          | LIMITED<sup>5</sup> |
+| react-native-camera | NO  | YES             | NO <sup>3</sup> | NO<sup>3</sup>      |
 
 >
 
 1. Only supported by wrapping a `<View collapsable={false}>` parent and snapshotting it.
 2. It returns an empty image (not a failure Promise).
 3. Component itself lacks platform support.
 4. But you can just use the react-native-maps snapshot function: https://github.com/airbnb/react-native-maps#take-snapshot-of-map
+5. Web support via html2canvas has limitations with SVG rendering. Basic SVG works, complex SVG may have issues.
 
 ## Performance Optimization
 

README.md

@@ -3,6 +3,22 @@ import js from "@eslint/js";
 import prettier from "eslint-config-prettier";
 
 export default [
+  // Global ignores
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/build/**",
+      "**/lib/**",
+      "**/.expo/**",
+      "**/android/build/**",
+      "**/android/app/build/**",
+      "**/ios/build/**",
+      "**/ios/Pods/**",
+      "**/example-web/dist/**",
+      "**/*.min.js",
+    ],
+  },
   js.configs.recommended,
   prettier,
   {
@@ -52,7 +68,12 @@ export default [
   },
   // Node.js files (metro.config.js, etc.)
   {
-    files: ["**/metro.config.js", "**/babel.config.js", "**/.detoxrc.js"],
+    files: [
+      "**/metro.config.js",
+      "**/babel.config.js",
+      "**/webpack.config.js",
+      "**/.detoxrc.js",
+    ],
     languageOptions: {
       globals: {
         __dirname: "readonly",

eslint.config.js

@@ -0,0 +1,33 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Playwright
+playwright-report/
+test-results/
+e2e/snapshots/output/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Misc
+.env
+.env.local
+

example-web/.gitignore

@@ -0,0 +1,3 @@
+# Use legacy peer deps to avoid conflicts with react-native-web
+legacy-peer-deps=true
+

example-web/.npmrc

@@ -0,0 +1,117 @@
+# React Native View Shot - Web Example
+
+Web example demonstrating `react-native-view-shot` in browsers using `html2canvas`.
+
+## Quick Start
+
+```bash
+npm install
+npm start
+```
+
+Opens at `http://localhost:3000`
+
+## What's Included
+
+- **Basic ViewShot**: Simple captures with PNG/JPG formats and Base64/Data URI output
+- **Transparency Test**: PNG transparency support (with html2canvas limitations)
+- **Image Capture**: Views with styled elements and colors
+- **Complex Layouts**: Nested views with flexbox, shadows, borders, and gradients
+
+## Usage Example
+
+```typescript
+import {captureRef} from "react-native-view-shot";
+
+const viewRef = useRef(null);
+
+const capture = async () => {
+  const uri = await captureRef(viewRef.current, {
+    format: "png",
+    quality: 0.9,
+    result: "data-uri",
+  });
+  console.log("Captured:", uri);
+};
+```
+
+## Tech Stack
+
+- React Native Web for cross-platform components
+- html2canvas for web screenshot capture
+- Webpack for bundling
+- TypeScript for type safety
+
+## Web Limitations
+
+- `result: 'tmpfile'` falls back to 'data-uri' (with warning)
+- `snapshotContentContainer` not implemented
+- Transparency edge cases due to html2canvas
+- CORS restrictions on external images
+
+## Build
+
+```bash
+npm run build    # Production build in dist/
+npm run clean    # Remove dist/
+```
+
+## Testing
+
+### Automated E2E Tests (Playwright)
+
+The web example has comprehensive Playwright tests that run in CI:
+
+```bash
+npm run test:e2e         # Run tests headless
+npm run test:e2e:headed  # Run tests with visible browser
+```
+
+**Tests verify:**
+
+- ✅ App loads and navigation works
+- ✅ PNG capture functionality
+- ✅ JPG capture functionality
+- ✅ Base64 output format
+- ✅ All screens render correctly
+- ✅ Images are actually generated
+
+Tests run automatically in GitHub Actions CI with Chromium.
+
+### Manual Testing
+
+For local development and debugging:
+
+1. **Start dev server:** `npm start`
+2. **Open browser:** `http://localhost:3000`
+3. **Test capture:**
+   - Click "Basic ViewShot"
+   - Click "📸 PNG (Data URI)"
+   - Verify image appears
+   - Try download functionality
+
+### CI Pipeline
+
+See `.github/workflows/ci.yml` - the `test-web-example` job runs all Playwright tests in headless Chromium.
+
+**CI Artifacts:**
+
+- `web-snapshots-reference`: Current reference snapshots (download to update local snapshots)
+- `web-snapshots-diff`: Visual diffs when tests fail (actual vs expected)
+- `playwright-report`: Full HTML test report
+- `playwright-test-results`: Detailed test results
+
+**When snapshots differ:**
+
+- The CI will show a clear message in the GitHub Actions summary
+- Download the `web-snapshots-reference` artifact
+- Replace `example-web/e2e/snapshots/reference/` with the downloaded files
+- Commit the updated snapshots
+
+**Note:** Snapshots are platform-specific (Linux vs macOS). The CI runs on Linux, so you may need to update snapshots when running locally on macOS.
+
+## Related
+
+- [Main Library](../)
+- [Native Example](../example/)
+- [html2canvas](https://html2canvas.hertzen.com/)

example-web/README.md

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", {targets: {node: "current"}}],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+};

example-web/babel.config.js

@@ -0,0 +1,4 @@
+# Playwright snapshots directory
+# reference/ contains golden snapshots
+# output/ contains test results (git ignored)
+