TypeScript migration

Author: greweb

example/e2e/README.md

@@ -130,9 +130,52 @@ This removes duplicate `libfbjni.so` files from `react-native-gesture-handler` b
 ### Validation
 
 - `SnapshotMatcher` - Image comparison with tolerance
+- **Platform-specific snapshots** - Separate reference images for iOS/Android
 - Platform-specific timeouts (`getPlatformTimeout`)
 - Auto-capture detection and handling
 
+## Snapshot Testing
+
+### Platform-Specific References
+
+Screenshot references are **separated by platform** to account for rendering differences:
+
+```
+snapshots/
+  ├── reference/
+  │   ├── ios/           # iOS reference images
+  │   │   ├── basic_viewshot.png
+  │   │   ├── fullscreen_viewshot.png
+  │   │   └── ...
+  │   └── android/       # Android reference images
+  │       ├── basic_viewshot.png
+  │       └── ...
+  └── output/            # Test outputs (gitignored)
+      ├── ios/
+      └── android/
+```
+
+**Why separate?** iOS and Android render differently:
+
+- Different fonts and antialiasing
+- Different native components
+- Different screen densities
+
+### Updating Reference Images
+
+To regenerate reference images for a platform:
+
+```bash
+# iOS
+cd example
+UPDATE_SNAPSHOTS=true npm run test:e2e:ios
+
+# Android (when working)
+UPDATE_SNAPSHOTS=true npm run test:e2e:android
+```
+
+This will save new screenshots to `snapshots/reference/{platform}/`.
+
 ## CI Integration
 
 iOS tests run automatically in GitHub Actions:

example/e2e/helpers/snapshot-matcher.js

@@ -3,11 +3,20 @@ const path = require('path');
 
 /**
  * Helper to validate captured screenshots against reference snapshots
+ * Snapshots are platform-specific (iOS vs Android) to account for rendering differences
  */
 class SnapshotMatcher {
   constructor() {
-    this.referenceDir = path.join(__dirname, '../snapshots/reference');
-    this.outputDir = path.join(__dirname, '../snapshots/output');
+    // Get platform from Detox device
+    const platform = device.getPlatform(); // 'ios' or 'android'
+
+    // Platform-specific directories to handle rendering differences
+    this.referenceDir = path.join(
+      __dirname,
+      '../snapshots/reference',
+      platform,
+    );
+    this.outputDir = path.join(__dirname, '../snapshots/output', platform);
 
     // Ensure directories exist
     if (!fs.existsSync(this.referenceDir)) {
@@ -16,6 +25,10 @@ class SnapshotMatcher {
     if (!fs.existsSync(this.outputDir)) {
       fs.mkdirSync(this.outputDir, { recursive: true });
     }
+
+    console.log(`📸 SnapshotMatcher initialized for ${platform}`);
+    console.log(`   Reference: ${this.referenceDir}`);
+    console.log(`   Output: ${this.outputDir}`);
   }
 
   /**

example/e2e/snapshots/.gitignore

@@ -2,7 +2,12 @@
 output/*
 
 # Keep reference snapshots (golden images for comparison)
+# Platform-specific: reference/ios/ and reference/android/
 !reference/
+!reference/ios/
+!reference/ios/*.png
+!reference/android/
+!reference/android/*.png
 !reference/.gitkeep
 
 # Keep directory structure

example/e2e/snapshots/reference/android/.gitkeep

@@ -0,0 +1 @@
+Android reference snapshots will be generated here when running UPDATE_SNAPSHOTS=true on Android