react-native-view-shot

Visual regression snapshots for the web example are managed via Playwright. To ensure consistency across platforms (avoiding font or anti-aliasing differences), golden snapshots are generated on Linux and committed to the repository.

Important: Do not commit snapshots generated on macOS or Windows. The command npm run test:e2e:update-snapshots is designed to fail on macOS/Windows to prevent accidental overwrites of the Linux baselines.

Recommended Workflow (via CI)

1. Push your branch to trigger CI. If visual changes cause failures, CI will upload the actual screenshots as the web-snapshots-actual artifact.
2. Download the web-snapshots-actual artifact from the failed GitHub Actions run.
3. For each *-actual.png file, copy it to the matching baseline directory under example-web/e2e/snapshots/reference/<spec-file>.ts-snapshots/, removing the -actual suffix from the filename.
4. Review the changes using git diff.
5. Commit the updated baseline files if the visual changes are intended.

When CI generates new snapshots for Linux (chromium-linux), you can use the update-snapshots-from-ci.sh script to integrate them into the project. This script automates downloading the web-snapshots-actual artifact, extracting it, and placing the files into the correct reference directory with the proper naming convention.

Prerequisites

• GitHub CLI must be installed and authenticated.
• The CI run must have completed and successfully uploaded the web-snapshots-actual artifact.

Usage

1. Identify the GitHub Actions run ID from the URL of the failed CI run.
2. Navigate to the example-web directory.
3. Execute the script with the run ID as an argument.

Post-update Workflow

After the script completes, follow these steps to finalize the update:

1. Review the changes: git diff e2e/snapshots/reference/
2. Commit the new snapshots: git add e2e/snapshots/reference/ && git commit -m "Update Linux snapshots from CI"
3. Push the changes to your repository.

cd example-web
./scripts/update-snapshots-from-ci.sh <RUN_ID>

For high-performance requirements (e.g., capturing views in < 16ms), use the raw format and zip-base64 result type on Android. This avoids expensive compression during the capture process.

Workflow for Android:

1. Set format: 'raw' and result: 'zip-base64'.
2. The returned data follows the pattern width:height|base64_string.
3. Extract dimensions and the base64 string.
4. Use zlib.inflateSync to decompress the data.
5. Use pngjs to convert the inflated buffer into a PNG.

Note: Packaging PNG data is CPU intensive; consider using process.fork() for the conversion logic.

// Required packages: npm install pngjs zlib
const fs = require("fs");
const zlib = require("zlib");
const PNG = require("pngjs").PNG;
const Buffer = require("buffer").Buffer;

const format = Platform.OS === "android" ? "raw" : "png";
const result = Platform.OS === "android" ? "zip-base64" : "base64";

captureRef(this.ref, {result, format}).then(data => {
  // expected pattern 'width:height|', example: '1080:1731|'
  const resolution = /^(\d+):(\d+)\|/g.exec(data);
  const width = (resolution || ["", 0, 0])[1];
  const height = (resolution || ["", 0, 0])[2];
  const base64 = data.substr((resolution || [""])[0].length || 0);

  // convert from base64 to Buffer
  const buffer = Buffer.from(base64, "base64");
  // un-compress data
  const inflated = zlib.inflateSync(buffer);
  // compose PNG
  const png = new PNG({width, height});
  png.data = inflated;
  const pngData = PNG.sync.write(png);
  // save composed PNG
  fs.writeFileSync(output, pngData);
});