fix(example): fix detox screenshot tests and suppress LogBox warning

- Move LogBox.ignoreLogs to setup.js (loaded before mapbox imports)
- Add whileElement scroll for off-screen example groups
- Add per-example disableSync metadata for tests with JS timers
- Blacklist mapbox tile URLs to prevent Detox sync timeouts
- Fix Ornaments example missing default camera position
- Add Detox e2e docs to CLAUDE.md

Author: mfazekas

AGENTS.md

@@ -127,6 +127,19 @@ RCT_NEW_ARCH_ENABLED=1 pod update MapboxMaps
 - Example app serves as integration testing ground
 - Use `yarn test` before committing
 
+### E2E / Doc Screenshots (Detox)
+```bash
+cd example
+yarn detox build --configuration ios.debug
+yarn detox test --configuration ios.debug ./e2e/docScreenshots.e2e.js
+# Run a single test:
+yarn detox test --configuration ios.debug ./e2e/docScreenshots.e2e.js --testNamePattern="ImageOverlay"
+```
+- Screenshots are captured from every example and saved to `../maps-docs/examples-screenshots/`
+- Config: `scripts/autogenHelpers/docconfig.js`
+- Examples with JS timers or animations that block Detox sync should set `disableSync: true` in their metadata
+- `device.setURLBlacklist` in beforeEach prevents Detox from waiting on tile network requests
+
 ### Documentation
 - Component docs are auto-generated from JSDoc comments
 - Don't edit `.md` files in `docs/` directly - edit source files and run `yarn generate`

docs/examples.json

@@ -716,7 +716,8 @@
             "RasterLayer",
             "ImageSource"
           ],
-          "docs": ""
+          "docs": "",
+          "disableSync": true
         },
         "fullPath": "example/src/examples/FillRasterLayer/ImageOverlay.js",
         "relPath": "FillRasterLayer/ImageOverlay.js",

example/e2e/docScreenshots.e2e.js

@@ -170,6 +170,10 @@ if (['true', 1, '1'].includes(process.env.SKIP_TESTS_NO_METAL)) {
       if (shouldRestartAppBetweenTests) {
         await device.launchApp({ permissions: { location: 'always' } });
       }
+      await device.setURLBlacklist([
+        '.*tile.openstreetmap.org.*',
+        '.*mapbox.com.*',
+      ]);
       await device.reloadReactNative();
     });
     afterEach(async () => {
@@ -198,24 +202,27 @@ if (['true', 1, '1'].includes(process.env.SKIP_TESTS_NO_METAL)) {
                 });
                 await setSampleLocation();
 
-                await expect(
-                  element(by.text(groupMetadata.title)),
-                ).toBeVisible();
+                await waitFor(element(by.text(groupMetadata.title)))
+                  .toBeVisible()
+                  .whileElement(by.id('example-list'))
+                  .scroll(200, 'down');
                 await element(by.text(groupMetadata.title)).tap();
 
                 await waitFor(element(by.text(metadata.title)))
                   .toBeVisible()
                   .whileElement(by.id('example-list'))
                   .scroll(50, 'down');
+                if (metadata.disableSync) {
+                  await device.disableSynchronization();
+                }
                 await element(by.text(metadata.title)).tap();
 
                 let shots = new ExampleScreenshots(
                   { testName: name, groupName },
                   screenshots,
                 );
 
-                await wait(1000);
-
+                await wait(metadata.disableSync ? 3000 : 1000);
                 await shots.screenshot();
               });
             }

example/index.js

@@ -1,4 +1,5 @@
 console.log('index.js');
+import './src/setup';
 import { AppRegistry } from 'react-native';
 
 import App from './src/App';

example/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Mapbox from '@rnmapbox/maps';
-import { StyleSheet, Text, View, LogBox } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
@@ -13,11 +13,6 @@ import { Group, Item } from './scenes/GroupAndItem';
 import { ScreenWithoutMap } from './scenes/ScreenWithoutMap';
 import MapInModal from './examples/Map/MapInModal';
 
-LogBox.ignoreLogs([
-  'Warning: isMounted(...) is deprecated',
-  'Module RCTImageLoader',
-]);
-
 const styles = StyleSheet.create({
   noPermissionsText: {
     fontSize: 18,

example/src/examples/FillRasterLayer/ImageOverlay.js

@@ -120,5 +120,6 @@ const metadata = {
   title: 'Image Overlay',
   tags: ['RasterLayer', 'ImageSource'],
   docs: '',
+  disableSync: true,
 };
 ImageOverlay.metadata = metadata;

example/src/examples/Map/Ornaments.tsx

@@ -130,7 +130,7 @@ const Ornaments = () => {
         scaleBarPosition={POSITIONS[position[OrnamentType.ScaleBar]]}
       >
         <Images images={images} />
-        <Camera />
+        <Camera zoomLevel={4} centerCoordinate={[-98, 38.88]} />
       </MapView>
 
       <Bubble style={styles.bubble}>

example/src/examples/common/ExampleMetadata.ts

@@ -2,6 +2,7 @@ export type ExampleMetadata = {
   title: string;
   tags: string[];
   docs: string;
+  disableSync?: boolean;
 };
 
 export type ExampleWithMetadata = React.ComponentType & {

example/src/setup.js

@@ -0,0 +1,5 @@
+import { LogBox } from 'react-native';
+
+LogBox.ignoreLogs([
+  "Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Utilities/codegenNativeComponent')",
+]);