Add svg testing screen to Benchmark

benchmarks/babel.config.js

@@ -1,3 +1,10 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ['@datadog/mobile-react-native-babel-plugin', {
+      sessionReplay: {
+        svgTracking: true
+      }
+    }]
+  ]
 };

benchmarks/ios/Podfile

@@ -37,5 +37,27 @@ target 'BenchmarkRunner' do
       :mac_catalyst_enabled => false,
       # :ccache_enabled => true
     )
+
+    # Workaround for fmt consteval errors with Xcode 26+ Clang:
+    # The fmt library's consteval usage is incompatible with newer Apple Clang.
+    # Patch base.h to disable consteval by adding a guard for the current Xcode.
+    fmt_base_header = File.join(installer.sandbox.pod_dir('fmt'), 'include', 'fmt', 'base.h')
+    if File.exist?(fmt_base_header)
+      content = File.read(fmt_base_header)
+      unless content.include?('Patched for Xcode 26')
+        if content.gsub!(
+          /^(#elif defined\(__cpp_consteval\)\n#\s*define FMT_USE_CONSTEVAL 1)$/,
+          "#elif defined(__apple_build_version__) && __apple_build_version__ >= 17000000L\n#  define FMT_USE_CONSTEVAL 0  // Patched for Xcode 26+ consteval compat\n\\1"
+        )
+          original_mode = File.stat(fmt_base_header).mode
+          File.chmod(original_mode | 0200, fmt_base_header)
+          File.write(fmt_base_header, content)
+          File.chmod(original_mode, fmt_base_header)
+        else
+          Pod::UI.warn "fmt consteval patch: expected pattern not found in #{fmt_base_header}. " \
+            "The fmt library may have changed — Xcode 26+ builds may fail."
+        end
+      end
+    end
   end
 end

benchmarks/ios/Podfile.lock

@@ -1834,6 +1834,49 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNSVG (15.12.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNSVG/common (= 15.12.1)
+    - Yoga
+  - RNSVG/common (15.12.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
 
@@ -1915,6 +1958,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -2083,6 +2127,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-picker/picker"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -2109,7 +2155,7 @@ SPEC CHECKSUMS:
   KSCrash: 80e1e24eaefbe5134934ae11ca8d7746586bc2ed
   OpenTelemetry-Swift-Api: 3d77582ab6837a63b65bf7d2eacc57d8f2595edd
   OpenTelemetry-Swift-Sdk: 69d60f0242e830366e359481edd575d6776eb983
-  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
+  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: be794de7dc6ed8f9f7fbf525f86e7651b8b68746
   RCTRequired: a83787b092ec554c2eb6019ff3f5b8d125472b3b
   RCTTypeSafety: 48ad3c858926b1c46f46a81a58822b476e178e2c
@@ -2173,9 +2219,10 @@ SPEC CHECKSUMS:
   ReactCommon: 547db015202a80a5b3e7e041586ea54c4a087180
   RNCPicker: ffbd7b9fc7c1341929e61dbef6219f7860f57418
   RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
+  RNSVG: 082ae2874b288a96c95326c4f6029793f7009d4b
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: e14bad835e12b6c7e2260fc320bd00e0f4b45add
+  Yoga: 66a9a23a82dd4081b393babe509967097759b3d6
 
-PODFILE CHECKSUM: 977a21a62f5373f05419c7d794a1a33a54f85bf4
+PODFILE CHECKSUM: 577d6cf3071879187b7e93b4f4af22b74b1895f3
 
 COCOAPODS: 1.16.2

benchmarks/metro.config.js

@@ -15,18 +15,30 @@ const modules = Object.keys({
  *
  * @type {import('metro-config').MetroConfig}
  */
+const defaultConfig = getDefaultConfig(__dirname);
+
 const config = {
     projectRoot: __dirname,
     watchFolders: [
         root
     ],
     resetCache: true,
+    // Route .svg files through react-native-svg-transformer so they are importable
+    // as React components (used by Session Replay SVG file-import test cases).
+    transformer: {
+        babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
     // We need to make sure that only one version is loaded for peerDependencies
     // So we denylist them at the root, and alias them to the versions in example's node_modules
     // This block is very important, because otherwise things like React can be packed multiple times
     // while it should be only one React instance in the runtime. exclusionList relies on the modules which are
     // declared as peer dependencies in the core package.
     resolver: {
+        // Remove svg from asset extensions and add it to source extensions so Metro
+        // sends it through the transformer rather than copying it as a static asset.
+        assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
+        sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
+
         blacklistRE: exclusionList(
             modules.map(
                 m =>
@@ -42,4 +54,4 @@ const config = {
     },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = mergeConfig(defaultConfig, config);

benchmarks/package.json

@@ -34,13 +34,15 @@
     "react-native-config": "1.5.5",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "4.10.0",
+    "react-native-svg": "15.12.1",
     "react-native-webview": "13.15.0"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
     "@babel/preset-env": "7.25.3",
     "@babel/runtime": "^7.26.10",
     "@datadog/datadog-ci": "5.11.0",
+    "@datadog/mobile-react-native-babel-plugin": "workspace:packages/react-native-babel-plugin",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
     "@react-native-community/cli-platform-ios": "15.0.1",
@@ -53,6 +55,7 @@
     "eslint": "8.19.0",
     "jest": "29.6.3",
     "prettier": "2.8.8",
+    "react-native-svg-transformer": "^1.5.0",
     "react-test-renderer": "19.0.0",
     "typescript": "5.0.4"
   },

benchmarks/src/scenario/SessionReplay/UIDetailView.tsx

@@ -21,6 +21,7 @@ import Webview from './component/WebView';
 import Sliders from './component/Sliders';
 import SectionList from './component/SectionList';
 import Modal from './component/Modal';
+import SvgTestCases from './component/Svg';
 
 type UIDetailViewRouteProp = RouteProp<SessionReplayStackParamList, 'UIDetailView'>;
 
@@ -59,6 +60,8 @@ function UIDetailView(): React.JSX.Element {
                 return <SectionList/>;
             case UIElement.Modal:
                 return <Modal/>;
+            case UIElement.Svg:
+                return <SvgTestCases/>;
             default:
                 return (
                     <View style={styles.fullScreenHolder}>