From a84adb53743f7117a971349845a55445f1b57692 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 12 Sep 2025 14:16:21 +0100
Subject: [PATCH 01/35] Add constants' values definining SVG's elements and
 properties to target

---
 .../libraries/react-native-svg/constants.ts   | 293 ++++++++++++++++++
 yarn.lock                                     | 130 +++++++-
 2 files changed, 421 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
new file mode 100644
index 000000000..f9524c9d6
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
@@ -0,0 +1,293 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+export const rnAttributeNames = [
+    '__self',
+    'accessibilityLabel',
+    'accessibilityRole',
+    'style'
+];
+
+export const rnSvgArrayAttributeValues = [
+    'stroke-dasharray', // this attribute is already in the web compliant format, sice the RN to web conversion already occured when this is used
+    'points',
+    'gradientTransform',
+    'stdDeviation',
+    'values'
+];
+
+// All these values are deprecated, but still allowed in react-native-svg
+// translate, scale, rotate ?
+export const rnSvgTransformAttributeValues = [
+    'translateX',
+    'translateY',
+    'scaleX',
+    'scaleY',
+    'rotate',
+    'skewX',
+    'skewY',
+    'matrix'
+];
+
+export const svgSupportedNames = ['Svg', 'SvgUri'];
+
+export const xmlNamespace = ['xmlns', 'http://www.w3.org/2000/svg'];
+
+export const svgElements = [
+    '<a>',
+    '<animate>',
+    '<animateMotion>',
+    '<animateTransform>',
+    '<circle>',
+    '<clipPath>',
+    '<defs>',
+    '<desc>',
+    '<ellipse>',
+    '<feBlend>',
+    '<feColorMatrix>',
+    '<feComponentTransfer>',
+    '<feComposite>',
+    '<feConvolveMatrix>',
+    '<feDiffuseLighting>',
+    '<feDisplacementMap>',
+    '<feDistantLight>',
+    '<feDropShadow>',
+    '<feFlood>',
+    '<feFuncA>',
+    '<feFuncB>',
+    '<feFuncG>',
+    '<feFuncR>',
+    '<feGaussianBlur>',
+    '<feImage>',
+    '<feMerge>',
+    '<feMergeNode>',
+    '<feMorphology>',
+    '<feOffset>',
+    '<fePointLight>',
+    '<feSpecularLighting>',
+    '<feSpotLight>',
+    '<feTile>',
+    '<feTurbulence>',
+    '<filter>',
+    '<foreignObject>',
+    '<g>',
+    '<image>',
+    '<line>',
+    '<linearGradient>',
+    '<marker>',
+    '<mask>',
+    '<metadata>',
+    '<mpath>',
+    '<path>',
+    '<pattern>',
+    '<polygon>',
+    '<polyline>',
+    '<radialGradient>',
+    '<rect>',
+    '<script>',
+    '<set>',
+    '<stop>',
+    '<style>',
+    '<svg>',
+    '<switch>',
+    '<symbol>',
+    '<text>',
+    '<textPath>',
+    '<title>',
+    '<tspan>',
+    '<use>',
+    '<view>'
+];
+
+export const svgAttributesCC = [
+    'attributeName',
+    'attributeType',
+    'baseFrequency',
+    'calcMode',
+    'clipPathUnits',
+    'diffuseConstant',
+    'edgeMode',
+    'gradientTransform',
+    'gradientUnits',
+    'kernelMatrix',
+    'kernelUnitLength',
+    'keyPoints',
+    'keySplines',
+    'keyTimes',
+    'lengthAdjust',
+    'limitingConeAngle',
+    'markerHeight',
+    'markerUnits',
+    'markerWidth',
+    'maskContentUnits',
+    'maskUnits',
+    'numOctaves',
+    'pathLength',
+    'patternContentUnits',
+    'patternTransform',
+    'patternUnits',
+    'pointsAtX',
+    'pointsAtY',
+    'pointsAtZ',
+    'preserveAlpha',
+    'preserveAspectRatio',
+    'primitiveUnits',
+    'refX',
+    'refY',
+    'repeatCount',
+    'repeatDur',
+    'specularConstant',
+    'specularExponent',
+    'spreadMethod',
+    'startOffset',
+    'stdDeviation',
+    'stitchTiles',
+    // 'strokeDasharray', //
+    'surfaceScale',
+    'systemLanguage',
+    'tableValues',
+    'textLength',
+    'viewBox',
+    'xChannelSelector',
+    'yChannelSelector'
+];
+
+export const svgAttributesKC = [
+    'accumulate',
+    'additive',
+    'alignment-baseline',
+    'amplitude',
+    'azimuth',
+    'baseline-shift',
+    'begin',
+    'bias',
+    'by',
+    'class',
+    'clip',
+    'clip-path',
+    'clip-rule',
+    'color',
+    'color-interpolation',
+    'color-interpolation-filters',
+    'cursor',
+    'cx',
+    'cy',
+    'd',
+    'decoding',
+    'direction',
+    'display',
+    'divisor',
+    'dominant-baseline',
+    'dur',
+    'dx',
+    'dy',
+    'elevation',
+    'end',
+    'exponent',
+    'fetchpriority',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'filter',
+    'filterUnits',
+    'flood-color',
+    'flood-opacity',
+    'font-family',
+    'font-size',
+    'font-size-adjust',
+    'font-style',
+    'font-variant',
+    'font-weight',
+    'fr',
+    'from',
+    'fx',
+    'fy',
+    'height',
+    'href',
+    'id',
+    'image-rendering',
+    'in',
+    'in2',
+    'intercept',
+    'k1',
+    'k2',
+    'k3',
+    'k4',
+    'lang',
+    'letter-spacing',
+    'lighting-color',
+    'marker-end',
+    'marker-mid',
+    'marker-start',
+    'mask',
+    'mask-type',
+    'matrix',
+    'max',
+    'media',
+    'method',
+    'min',
+    'mode',
+    'offset',
+    'opacity',
+    'operator',
+    'order',
+    'orient',
+    'origin',
+    'overflow',
+    'paint-order',
+    'path',
+    'pointer-events',
+    'points',
+    'r',
+    'radius',
+    'restart',
+    'result',
+    'rotate',
+    'rx',
+    'ry',
+    'scale',
+    'seed',
+    'shape-rendering',
+    'side',
+    'slope',
+    'spacing',
+    'stop-color',
+    'stop-opacity',
+    'stroke',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+    'style',
+    'tabindex',
+    'target',
+    'targetX',
+    'targetY',
+    'text-anchor',
+    'text-decoration',
+    'text-rendering',
+    'to',
+    'transform',
+    'transform-origin',
+    'type',
+    'unicode-bidi',
+    'values',
+    'vector-effect',
+    'visibility',
+    'width',
+    'word-spacing',
+    'writing-mode',
+    'x',
+    'x1',
+    'x2',
+    'y',
+    'y1',
+    'y2',
+    'z'
+];
diff --git a/yarn.lock b/yarn.lock
index cceb9dfdc..353ccdbd4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3725,6 +3725,7 @@ __metadata:
   dependencies:
     "@babel/cli": ^7.27.2
     "@babel/core": ^7.27.1
+    "@babel/generator": ^7.28.0
     "@babel/helper-plugin-utils": ^7.27.1
     "@babel/preset-env": ^7.27.2
     "@babel/preset-react": ^7.27.1
@@ -3737,6 +3738,7 @@ __metadata:
     react-native-builder-bob: 0.26.0
     tsc-alias: ^1.8.16
     typescript: 5.0.4
+    uuid: ^11.1.0
   peerDependencies:
     react: ">=16.13.1"
     react-native: ">=0.63.4 <1.0"
@@ -8226,8 +8228,10 @@ __metadata:
   dependencies:
     "@babel/core": ^7.25.2
     "@babel/preset-env": ^7.25.3
-    "@babel/runtime": ^7.26.10
+    "@babel/runtime": ^7.25.0
     "@datadog/mobile-react-native": "workspace:packages/core"
+    "@datadog/mobile-react-native-babel-plugin": "workspace:packages/react-native-babel-plugin"
+    "@datadog/mobile-react-native-session-replay": "workspace:packages/react-native-session-replay"
     "@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
@@ -8243,6 +8247,7 @@ __metadata:
     prettier: ^2.8.8
     react: 18.3.1
     react-native: 0.76.9
+    react-native-svg: 15.8.0
     react-test-renderer: 18.3.1
     typescript: 5.0.4
   languageName: unknown
@@ -9126,6 +9131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolbase@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "boolbase@npm:1.0.0"
+  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
+  languageName: node
+  linkType: hard
+
 "boolean@npm:^3.0.1":
   version: 3.2.0
   resolution: "boolean@npm:3.2.0"
@@ -10159,6 +10171,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.2.2
+  resolution: "css-select@npm:5.2.2"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 0ab672620c6bdfe4129dfecf202f6b90f92018b24a1a93cfbb295c24026d0163130ba4b98d7443f87246a2c1d67413798a7a5920cd102b0cfecfbc89896515aa
+  languageName: node
+  linkType: hard
+
+"css-tree@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: 2.0.14
+    source-map: ^0.6.1
+  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
+  languageName: node
+  linkType: hard
+
+"css-what@npm:^6.1.0":
+  version: 6.2.2
+  resolution: "css-what@npm:6.2.2"
+  checksum: 4d1f07b348a638e1f8b4c72804a1e93881f35e0f541256aec5ac0497c5855df7db7ab02da030de950d4813044f6d029a14ca657e0f92c3987e4b604246235b2b
+  languageName: node
+  linkType: hard
+
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -10733,6 +10775,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "domelementtype@npm:2.3.0"
+  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
+  languageName: node
+  linkType: hard
+
+"domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
+"domutils@npm:^3.0.1":
+  version: 3.2.2
+  resolution: "domutils@npm:3.2.2"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+  checksum: ae941d56f03d857077d55dde9297e960a625229fc2b933187cc4123084d7c2d2517f58283a7336567127029f1e008449bac8ac8506d44341e29e3bb18e02f906
+  languageName: node
+  linkType: hard
+
 "dot-prop@npm:^5.1.0":
   version: 5.3.0
   resolution: "dot-prop@npm:5.3.0"
@@ -10927,6 +11007,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -15494,6 +15581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
+  languageName: node
+  linkType: hard
+
 "memoize-one@npm:^5.0.0":
   version: 5.2.1
   resolution: "memoize-one@npm:5.2.1"
@@ -16765,6 +16859,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nth-check@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "nth-check@npm:2.1.1"
+  dependencies:
+    boolbase: ^1.0.0
+  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
+  languageName: node
+  linkType: hard
+
 "nullthrows@npm:^1.1.1":
   version: 1.1.1
   resolution: "nullthrows@npm:1.1.1"
@@ -18323,6 +18426,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-svg@npm:15.8.0":
+  version: 15.8.0
+  resolution: "react-native-svg@npm:15.8.0"
+  dependencies:
+    css-select: ^5.1.0
+    css-tree: ^1.1.3
+    warn-once: 0.1.1
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: ad9d6093f3aef0d53c5e2a562afb7805009f2bf50fd4ec6e77f8c18a6cb7e06a7793d55cc66d523c7d30c77cae170ee26767c72ad5b1a1f07032420ccf4162fe
+  languageName: node
+  linkType: hard
+
 "react-native-webview@npm:13.12.2":
   version: 13.12.2
   resolution: "react-native-webview@npm:13.12.2"
@@ -20924,6 +21041,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "uuid@npm:11.1.0"
+  bin:
+    uuid: dist/esm/bin/uuid
+  checksum: 840f19758543c4631e58a29439e51b5b669d5f34b4dd2700b6a1d15c5708c7a6e0c3e2c8c4a2eae761a3a7caa7e9884d00c86c02622ba91137bd3deade6b4b4a
+  languageName: node
+  linkType: hard
+
 "uuid@npm:^7.0.3":
   version: 7.0.3
   resolution: "uuid@npm:7.0.3"
@@ -21016,7 +21142,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
+"warn-once@npm:0.1.1, warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d

From cfa54eb95fca44e3a5861f8c02b6cd7c64698cb7 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 12 Sep 2025 14:19:30 +0100
Subject: [PATCH 02/35] Add required SVG utility functions to convert RN
 properties to web compliant properties

---
 .../src/libraries/react-native-svg/utils.ts   | 365 ++++++++++++++++++
 1 file changed, 365 insertions(+)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts
new file mode 100644
index 000000000..9b4bef739
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts
@@ -0,0 +1,365 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+type RNShadow = { width?: number; height?: number };
+
+/**
+ * Converts a React Native-style `style` object into a flat CSS-compatible object,
+ * mapping values like `marginTop`, `paddingHorizontal`, `shadowColor`, `transform`, etc.,
+ * to kebab-case CSS keys and serializing values appropriately (e.g., with `px`, `rgba`).
+ *
+ * @param style - The input React Native style object.
+ * @param options - Optional settings like RTL layout direction.
+ * @returns A plain object mapping CSS keys to string/number values for inline style injection.
+ */
+export function convertStyleObjToCssObj(
+    style: any,
+    { isRTL = false }: { isRTL?: boolean } = {}
+) {
+    const css: Record<string, any> = {};
+
+    // Sizing
+    for (const k of [
+        'width',
+        'height',
+        'minWidth',
+        'minHeight',
+        'maxWidth',
+        'maxHeight'
+    ]) {
+        if (style[k] != null) {
+            css[kebabCase(k)] = addPx(style[k]);
+        }
+    }
+
+    // Positioning / display / overflow / opacity
+    if (style.position) {
+        css.position = style.position;
+    }
+    if (style.top != null) {
+        css.top = addPx(style.top);
+    }
+    if (style.bottom != null) {
+        css.bottom = addPx(style.bottom);
+    }
+    if (style.left != null) {
+        css.left = addPx(style.left);
+    }
+    if (style.right != null) {
+        css.right = addPx(style.right);
+    }
+    if (style.start != null) {
+        css[isRTL ? 'right' : 'left'] = addPx(style.start);
+    }
+    if (style.end != null) {
+        css[isRTL ? 'left' : 'right'] = addPx(style.end);
+    }
+    if (style.zIndex != null) {
+        css['z-index'] = style.zIndex;
+    }
+    if (style.display) {
+        css.display = style.display;
+    }
+    if (style.overflow) {
+        css.overflow = style.overflow;
+    }
+    if (style.opacity != null) {
+        css.opacity = style.opacity;
+    }
+
+    // Margin
+    if (style.margin != null) {
+        css.margin = addPx(style.margin);
+    }
+    if (style.marginTop != null) {
+        css['margin-top'] = addPx(style.marginTop);
+    }
+    if (style.marginRight != null) {
+        css['margin-right'] = addPx(style.marginRight);
+    }
+    if (style.marginBottom != null) {
+        css['margin-bottom'] = addPx(style.marginBottom);
+    }
+    if (style.marginLeft != null) {
+        css['margin-left'] = addPx(style.marginLeft);
+    }
+    if (style.marginHorizontal != null) {
+        css['margin-left'] = addPx(style.marginHorizontal);
+        css['margin-right'] = addPx(style.marginHorizontal);
+    }
+    if (style.marginVertical != null) {
+        css['margin-top'] = addPx(style.marginVertical);
+        css['margin-bottom'] = addPx(style.marginVertical);
+    }
+
+    // Padding
+    if (style.padding != null) {
+        css.padding = addPx(style.padding);
+    }
+    if (style.paddingTop != null) {
+        css['padding-top'] = addPx(style.paddingTop);
+    }
+    if (style.paddingRight != null) {
+        css['padding-right'] = addPx(style.paddingRight);
+    }
+    if (style.paddingBottom != null) {
+        css['padding-bottom'] = addPx(style.paddingBottom);
+    }
+    if (style.paddingLeft != null) {
+        css['padding-left'] = addPx(style.paddingLeft);
+    }
+    if (style.paddingHorizontal != null) {
+        css['padding-left'] = addPx(style.paddingHorizontal);
+        css['padding-right'] = addPx(style.paddingHorizontal);
+    }
+    if (style.paddingVertical != null) {
+        css['padding-top'] = addPx(style.paddingVertical);
+        css['padding-bottom'] = addPx(style.paddingVertical);
+    }
+
+    // Background / borders
+    if (style.backgroundColor) {
+        css['background-color'] = style.backgroundColor;
+    }
+    if (style.borderWidth != null) {
+        css['border-width'] = addPx(style.borderWidth);
+    }
+    if (style.borderColor) {
+        css['border-color'] = style.borderColor;
+    }
+    if (style.borderStyle) {
+        css['border-style'] = style.borderStyle;
+    }
+    if (style.borderRadius != null) {
+        css['border-radius'] = addPx(style.borderRadius);
+    }
+    if (style.borderTopLeftRadius != null) {
+        css['border-top-left-radius'] = addPx(style.borderTopLeftRadius);
+    }
+    if (style.borderTopRightRadius != null) {
+        css['border-top-right-radius'] = addPx(style.borderTopRightRadius);
+    }
+    if (style.borderBottomRightRadius != null) {
+        css['border-bottom-right-radius'] = addPx(
+            style.borderBottomRightRadius
+        );
+    }
+    if (style.borderBottomLeftRadius != null) {
+        css['border-bottom-left-radius'] = addPx(style.borderBottomLeftRadius);
+    }
+
+    // Per-side border widths/colors
+    if (style.borderTopWidth != null) {
+        css['border-top-width'] = addPx(style.borderTopWidth);
+    }
+    if (style.borderRightWidth != null) {
+        css['border-right-width'] = addPx(style.borderRightWidth);
+    }
+    if (style.borderBottomWidth != null) {
+        css['border-bottom-width'] = addPx(style.borderBottomWidth);
+    }
+    if (style.borderLeftWidth != null) {
+        css['border-left-width'] = addPx(style.borderLeftWidth);
+    }
+    if (style.borderTopColor) {
+        css['border-top-color'] = style.borderTopColor;
+    }
+    if (style.borderRightColor) {
+        css['border-right-color'] = style.borderRightColor;
+    }
+    if (style.borderBottomColor) {
+        css['border-bottom-color'] = style.borderBottomColor;
+    }
+    if (style.borderLeftColor) {
+        css['border-left-color'] = style.borderLeftColor;
+    }
+
+    // Flex
+    if (style.flex != null) {
+        css.flex = style.flex;
+    }
+    if (style.flexDirection) {
+        css['flex-direction'] = style.flexDirection;
+    }
+    if (style.flexWrap) {
+        css['flex-wrap'] = style.flexWrap;
+    }
+    if (style.flexGrow != null) {
+        css['flex-grow'] = style.flexGrow;
+    }
+    if (style.flexShrink != null) {
+        css['flex-shrink'] = style.flexShrink;
+    }
+    if (style.flexBasis != null) {
+        css['flex-basis'] = addPx(style.flexBasis);
+    }
+    if (style.justifyContent) {
+        css['justify-content'] = style.justifyContent;
+    }
+    if (style.alignItems) {
+        css['align-items'] = style.alignItems;
+    }
+    if (style.alignContent) {
+        css['align-content'] = style.alignContent;
+    }
+    if (style.alignSelf) {
+        css['align-self'] = style.alignSelf;
+    }
+    if (style.gap != null) {
+        css['gap'] = addPx(style.gap);
+    }
+    if (style.rowGap != null) {
+        css['row-gap'] = addPx(style.rowGap);
+    }
+    if (style.columnGap != null) {
+        css['column-gap'] = addPx(style.columnGap);
+    }
+
+    // Transforms
+    if (Array.isArray(style.transform)) {
+        const parts: string[] = [];
+        for (const t of style.transform) {
+            const k = Object.keys(t)[0] as keyof typeof t;
+            const v: any = (t as any)[k];
+            if (k === 'translateX') {
+                parts.push(`translateX(${addPx(v)})`);
+            } else if (k === 'translateY') {
+                parts.push(`translateY(${addPx(v)})`);
+            } else if (k === 'translate') {
+                const [x = 0, y = 0] = v || [];
+                parts.push(`translate(${addPx(x)} ${addPx(y)})`);
+            } else if (k === 'scale') {
+                parts.push(`scale(${v})`);
+            } else if (k === 'scaleX') {
+                parts.push(`scaleX(${v})`);
+            } else if (k === 'scaleY') {
+                parts.push(`scaleY(${v})`);
+            } else if (k === 'rotate') {
+                parts.push(`rotate(${v})`);
+            } else if (k === 'skewX') {
+                parts.push(`skewX(${v})`);
+            } else if (k === 'skewY') {
+                parts.push(`skewY(${v})`);
+            } else if (k === 'matrix') {
+                parts.push(`matrix(${v.join(',')})`);
+            }
+        }
+        if (parts.length) {
+            css.transform = parts.join(' ');
+        }
+    }
+    if (style.transformMatrix) {
+        css.transform = `matrix(${style.transformMatrix.join(',')})`;
+    }
+
+    // Shadows / elevation → box-shadow
+    if (
+        style.shadowColor ||
+        style.shadowOffset ||
+        style.shadowOpacity != null ||
+        style.shadowRadius != null
+    ) {
+        const color = rgba(
+            style.shadowColor || '#000',
+            style.shadowOpacity ?? 1
+        );
+        const off: RNShadow = style.shadowOffset || {};
+        const blur = style.shadowRadius != null ? style.shadowRadius : 0;
+
+        css['box-shadow'] = `${addPx(off.width || 0)} ${addPx(
+            off.height || 0
+        )} ${addPx(blur)} 0 ${color}`;
+    } else if (style.elevation != null) {
+        const e = style.elevation;
+        css['box-shadow'] = `0 ${addPx(e)} ${addPx(1.5 * e)} 0 rgba(0,0,0,0.3)`;
+    }
+
+    // Pointer events
+    if (style.pointerEvents === 'none') {
+        css['pointer-events'] = 'none';
+    } else if (style.pointerEvents === 'auto') {
+        css['pointer-events'] = 'auto';
+    }
+
+    // Other
+    if (style.direction) {
+        css.direction = style.direction;
+    }
+    if (style.aspectRatio != null) {
+        css['aspect-ratio'] = String(style.aspectRatio);
+    }
+
+    return css;
+}
+
+/**
+ * Adds a `px` suffix to a numeric value. Leaves string values unchanged.
+ *
+ * @param v - Value to format (number or string).
+ * @returns - The value as a pixel string (e.g., "10px") or unchanged string.
+ */
+function addPx(v: any) {
+    return typeof v === 'number' ? `${v}px` : v;
+}
+
+/**
+ * Converts a hex color (e.g., `#000`, `#336699`) and an alpha value into an `rgba(...)` string.
+ * Supports 3-digit and 6-digit hex codes. Returns input string if not a valid hex code.
+ *
+ * @param hexOrName - A hex color string or named color (fallback).
+ * @param alpha - A numeric alpha value between 0 and 1.
+ * @returns A valid CSS `rgba(...)` string or the original input color.
+ */
+function rgba(hexOrName: string, alpha: number) {
+    if (!hexOrName) {
+        return `rgba(0,0,0,${alpha})`;
+    }
+
+    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hexOrName)) {
+        const hex =
+            hexOrName.length === 4
+                ? `#${[...hexOrName.slice(1)].map(c => c + c).join('')}`
+                : hexOrName;
+
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+
+    return hexOrName;
+}
+
+/**
+ * Converts a camelCase string into kebab-case (e.g., `marginTop` → `margin-top`).
+ * Uses Unicode-aware regex to catch capital letters in all scripts.
+ *
+ * @param str - The camelCase input string.
+ * @returns - The kebab-case equivalent string.
+ */
+export function kebabCase(str: string) {
+    const KEBAB_REGEX = /\p{Lu}/gu;
+    const result = str.replace(KEBAB_REGEX, match => `-${match.toLowerCase()}`);
+
+    return result.startsWith('-') ? result.slice(1) : result;
+}
+
+/**
+ * Converts a React Native SVG tag or attribute name to start with a lowercase letter,
+ * preserving the rest of the casing (used for JSX tag/attribute normalization).
+ *
+ * Example: `LinearGradient` → `linearGradient`
+ *
+ * @param attribute - The original attribute or tag name.
+ * @returns The transformed string with lowercase first letter.
+ */
+export function convertAttributeCasing(attribute: string) {
+    const firstLetter = attribute.slice(0, 1).toLowerCase();
+    const text = attribute.slice(1);
+
+    return `${firstLetter}${text}`;
+}

From b9700b586f6f517a0c41de2ef95e7e47f53fcafa Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 12 Sep 2025 14:23:44 +0100
Subject: [PATCH 03/35] Add various babel node processing function specific to
 SVG processing

---
 .../react-native-babel-plugin/package.json    |   4 +-
 .../react-native-svg/processing/attributes.ts | 276 ++++++++++++++++++
 .../react-native-svg/processing/svg.ts        | 211 +++++++++++++
 .../src/utils/nodeProcessing.ts               | 250 ++++++++++++++++
 4 files changed, 740 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts

diff --git a/packages/react-native-babel-plugin/package.json b/packages/react-native-babel-plugin/package.json
index 08751aa1e..35a62bdd5 100644
--- a/packages/react-native-babel-plugin/package.json
+++ b/packages/react-native-babel-plugin/package.json
@@ -39,8 +39,10 @@
     },
     "dependencies": {
         "@babel/core": "^7.27.1",
+        "@babel/generator": "^7.28.0",
         "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/types": "^7.27.1"
+        "@babel/types": "^7.27.1",
+        "uuid": "^11.1.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.27.2",
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
new file mode 100644
index 000000000..8a9fa51ca
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -0,0 +1,276 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+
+import {
+    evaluateStaticNode,
+    getJSXAttributeData,
+    parseStyleNode
+} from '../../../utils/nodeProcessing';
+import {
+    rnAttributeNames,
+    rnSvgArrayAttributeValues,
+    rnSvgTransformAttributeValues,
+    svgAttributesCC,
+    svgAttributesKC
+} from '../constants';
+import { convertStyleObjToCssObj, kebabCase } from '../utils';
+
+import {
+    convertAttributeArrayValue,
+    convertAttributeTransformArray,
+    convertTransformArrayToString
+} from './svg';
+
+/**
+ * Handles React Native–specific attributes that are not directly supported in web SVG.
+ * Currently processes the `style` attribute by converting it to a flat inline CSS string.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node to process.
+ * @param attrName - Name of the attribute (e.g., 'style').
+ * @returns True if the attribute was handled (and should be removed), false otherwise.
+ */
+export function handleRNSpecificAttributes(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute,
+    attrName: string
+) {
+    if (rnAttributeNames.includes(attrName)) {
+        if (attrName === 'style') {
+            const styleObj = parseStyleNode(t, attr);
+            if (styleObj) {
+                const cssObj = convertStyleObjToCssObj(styleObj);
+                const styleString = Object.entries(cssObj)
+                    .map(([k, v]) => `${k}:${v}`)
+                    .join(';');
+
+                if (styleString) {
+                    attr.value = t.stringLiteral(styleString);
+                    return true;
+                }
+            }
+
+            return true;
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Validates and normalizes an attribute name for use in web SVG:
+ * - Converts camelCase to kebab-case if needed.
+ * - Flags attributes not included in the allowed SVG attribute list.
+ *
+ * @param attrName - Name of the attribute to process.
+ * @returns An object with the normalized name and a flag indicating invalidity.
+ */
+export function validateAttribute(attrName: string) {
+    const result = { attrName, isInvalidAttribute: false };
+
+    if (rnSvgTransformAttributeValues.includes(attrName)) {
+        return result;
+    }
+
+    // This means that the attribute name is already in the right format
+    if (!svgAttributesCC.includes(attrName)) {
+        result.attrName = kebabCase(attrName);
+
+        // This means that the attribute name is not a valid SVG attribute and should be ignored
+        if (!svgAttributesKC.includes(attrName)) {
+            result.isInvalidAttribute = true;
+        }
+    }
+
+    return result;
+}
+
+/**
+ * Extracts and serializes width/height values from `<svg>` elements,
+ * adding them to the provided `dimensions` object.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node (e.g., width or height).
+ * @param attrName - Name of the attribute.
+ * @param dimensions - Object to collect dimension key/value pairs.
+ * @param nodeName - Tag name (should be 'svg').
+ * @returns True if the attribute was handled and should be removed, false otherwise.
+ */
+export function handleSvgDimensions(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute,
+    attrName: string,
+    dimensions: Record<string, string> = {},
+    nodeName: string | null
+) {
+    if (nodeName !== 'svg') {
+        return false;
+    }
+
+    const dimensionAttributes = ['width', 'height'];
+
+    if (dimensionAttributes.includes(attrName)) {
+        const result = getJSXAttributeData(t, attr);
+        // IMPROVEMENT: if it's a variable try to find it in the closure
+        if (result.value) {
+            attr.value = t.stringLiteral(result.value.toString());
+            dimensions[attrName] = attr.value.value;
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/**
+ * Converts JSX array-based attributes (e.g., `points`, `values`) into string literals
+ * for valid SVG usage.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node to process.
+ * @param attrName - Name of the attribute (e.g., 'points').
+ * @returns True if the attribute was converted, false otherwise.
+ */
+export function handleArrayAttributes(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute,
+    attrName: string
+) {
+    if (
+        rnSvgArrayAttributeValues.includes(attrName) &&
+        t.isJSXExpressionContainer(attr.value) &&
+        t.isArrayExpression(attr.value.expression)
+    ) {
+        const result = convertAttributeArrayValue(
+            t,
+            attr.value.expression,
+            attrName
+        );
+
+        if (result) {
+            attr.value = t.stringLiteral(result);
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Handles transform-related attributes (e.g., `translateX`, `scaleY`) that are passed
+ * separately as individual props. Extracts them and stores in the transforms array.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node.
+ * @param attrName - Name of the transform attribute.
+ * @param transformsArray - Accumulator array for transform operations.
+ * @returns True if the attribute was handled and added to transforms array.
+ */
+export function handleSeparateTransformAttributes(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute,
+    attrName: string,
+    transformsArray: { name: string; value: string | number }[] = []
+) {
+    if (rnSvgTransformAttributeValues.includes(attrName)) {
+        convertAttributeTransformArray(t, transformsArray, attr);
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * Handles a single `transform` JSX attribute that holds an array of transform objects
+ * (e.g., [{ translateX: 10 }, { rotate: '90deg' }]).
+ * Converts it into discrete transform operations and stores in the transforms array.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node with `transform` key.
+ * @param attrName - Name of the attribute (should be 'transform').
+ * @param transformsArray - Accumulator array for transform operations.
+ * @returns True if the transform list was extracted successfully.
+ */
+export function handleJoinedTranformAttributes(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute,
+    attrName: string,
+    transformsArray: { name: string; value: string | number }[] = []
+) {
+    if (
+        attrName === 'transform' &&
+        t.isJSXExpressionContainer(attr.value) &&
+        t.isArrayExpression(attr.value.expression)
+    ) {
+        const transformList = evaluateStaticNode(t, attr.value.expression);
+
+        if (Array.isArray(transformList)) {
+            for (const entry of transformList) {
+                if (
+                    entry &&
+                    typeof entry === 'object' &&
+                    !Array.isArray(entry)
+                ) {
+                    for (const key of Object.keys(entry)) {
+                        transformsArray.push({
+                            name: key,
+                            value: entry[key]
+                        });
+                    }
+                }
+            }
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Converts a standard JSX attribute (e.g., `stroke`, `fill`, `opacity`) to a string literal
+ * if it holds a valid value.
+ *
+ * @param t - Babel types helper.
+ * @param attr - JSX attribute node.
+ */
+export function handleRegularAttributes(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute
+) {
+    const result = getJSXAttributeData(t, attr);
+
+    if (result.value) {
+        attr.value = t.stringLiteral(result.value.toString());
+    }
+}
+
+/**
+ * Builds a final `transform` string from all accumulated transform operations,
+ * and pushes it as a new attribute into the JSXOpeningElement.
+ *
+ * @param el - JSXOpeningElement where the `transform` attribute will be added.
+ * @param transformsArray - Array of parsed transform operations.
+ */
+export function buildTransformStringAttribute(
+    el: Babel.types.JSXOpeningElement,
+    transformsArray: { name: string; value: string | number }[] = []
+) {
+    if (transformsArray.length) {
+        const transformAttrString = convertTransformArrayToString(
+            transformsArray
+        );
+
+        if (transformAttrString) {
+            el.attributes.push(
+                jsxAttribute(
+                    jSXIdentifier('transform'),
+                    stringLiteral(transformAttrString)
+                )
+            );
+        }
+    }
+}
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
new file mode 100644
index 000000000..0b5061385
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
@@ -0,0 +1,211 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+
+import { getJSXAttributeData } from '../../../utils/nodeProcessing';
+
+/**
+ * Converts a Babel ArrayExpression from a JSX attribute into a string suitable for SVG.
+ * The conversion is based on the SVG attribute name, e.g. `points`, `values`, or `matrix`.
+ *
+ * @param t - Babel types helper.
+ * @param expression - Babel AST ArrayExpression node.
+ * @param attrName - Name of the attribute (e.g., 'points', 'matrix').
+ * @returns A formatted string for the attribute value, or null if unsupported.
+ */
+export function convertAttributeArrayValue(
+    t: typeof Babel.types,
+    expression: Babel.types.ArrayExpression,
+    attrName: string
+) {
+    const value = convertArrayExpressionToArray(t, expression, []);
+
+    if (Array.isArray(value)) {
+        switch (attrName) {
+            case 'gradientTransform':
+            case 'matrix':
+                return `matrix(${value.join(' ')})`;
+
+            case 'values':
+                return value.join(';');
+
+            case 'points': {
+                const data = value
+                    .map(v => (Array.isArray(v) ? v.join(',') : v))
+                    .join(' ');
+
+                return data;
+            }
+
+            default:
+                return value.join(' ');
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Recursively converts a Babel ArrayExpression into a flat or nested string array
+ * depending on the content, supporting numbers, strings, unary expressions, and simple templates.
+ *
+ * @param t - Babel types helper.
+ * @param expression - Babel AST ArrayExpression node to convert.
+ * @param data - Initial accumulator array (flat or nested).
+ * @returns A string array (or nested string array) representing the array literal.
+ */
+export function convertArrayExpressionToArray(
+    t: typeof Babel.types,
+    expression: Babel.types.ArrayExpression,
+    data: string[] | string[][]
+): typeof data {
+    for (const element of expression.elements) {
+        if (!element) {
+            continue;
+        }
+
+        // Used when targeting nested arrays
+        if (t.isArrayExpression(element)) {
+            const nested = convertArrayExpressionToArray(t, element, []);
+            (data as string[][]).push(nested as string[]);
+            continue;
+        }
+
+        // Used when targeting numeric values
+        if (t.isNumericLiteral(element)) {
+            (data as string[]).push(element.value.toString());
+            continue;
+        }
+
+        // Used when targeting string values
+        if (t.isStringLiteral(element)) {
+            (data as string[]).push(element.value);
+            continue;
+        }
+
+        // Used when targeting negative/positive signed values
+        if (
+            t.isUnaryExpression(element) &&
+            t.isNumericLiteral(element.argument)
+        ) {
+            if (element.operator === '-') {
+                (data as string[]).push(`-${element.argument.value}`);
+            } else {
+                (data as string[]).push(`${element.argument.value}`);
+            }
+            continue;
+        }
+
+        // Used when targeting string templates (``)
+        if (
+            t.isTemplateLiteral(element) &&
+            element.quasis.length === 1 &&
+            element.expressions.length === 0
+        ) {
+            const { cooked } = element.quasis[0].value;
+            if (cooked) {
+                (data as string[]).push(cooked);
+            }
+            continue;
+        }
+
+        // Ignore unsupported elements (identifiers, spreads)
+        console.warn('Unsupported array element in SVG prop:', element);
+    }
+
+    return data;
+}
+
+/**
+ * Extracts name/value data from a JSX transform-related attribute and appends it
+ * to the provided transforms array for later stringification.
+ *
+ * @param t - Babel types helper.
+ * @param transformsArray - Accumulator array collecting transform operations.
+ * @param attr Babel JSXAttribute node.
+ */
+export function convertAttributeTransformArray(
+    t: typeof Babel.types,
+    transformsArray: { name: string; value: string | number }[],
+    attr: Babel.types.JSXAttribute
+) {
+    const data = getJSXAttributeData(t, attr);
+    if (data.name && data.value) {
+        transformsArray.push(data as typeof transformsArray[0]);
+    }
+}
+
+/**
+ * Converts an array of parsed transform operations into a single SVG-compliant
+ * `transform` string (e.g., "translate(10, 20) scale(2, 2)").
+ *
+ * Supports standard transform keys such as:
+ * - translateX / translateY
+ * - scaleX / scaleY
+ * - rotate
+ * - skewX / skewY
+ * - matrix
+ *
+ * @param transformsArray - Array of transform operations with name/value pairs.
+ * @returns - Formatted `transform` string, or undefined if no transforms are present.
+ */
+export function convertTransformArrayToString(
+    transformsArray: { name: string; value: string | number }[]
+): string | undefined {
+    const transforms: string[] = [];
+
+    const get = (key: string) =>
+        transformsArray.find(t => t.name === key)?.value;
+
+    const tx = get('translateX');
+    const ty = get('translateY');
+    if (tx !== undefined && ty !== undefined) {
+        transforms.push(`translate(${tx}, ${ty})`);
+    } else if (tx !== undefined) {
+        transforms.push(`translate(${tx})`);
+    } else if (ty !== undefined) {
+        transforms.push(`translate(0, ${ty})`);
+    }
+
+    const sx = get('scaleX');
+    const sy = get('scaleY');
+    if (sx !== undefined && sy !== undefined) {
+        transforms.push(`scale(${sx}, ${sy})`);
+    } else if (sx !== undefined) {
+        transforms.push(`scale(${sx})`);
+    } else if (sy !== undefined) {
+        transforms.push(`scale(1, ${sy})`);
+    }
+
+    const rot = get('rotate');
+    if (rot !== undefined) {
+        const value = typeof rot === 'string' ? rot.replace(/deg$/, '') : rot;
+        transforms.push(`rotate(${value})`);
+    }
+
+    const skewX = get('skewX');
+    if (skewX !== undefined) {
+        const value =
+            typeof skewX === 'string' ? skewX.replace(/deg$/, '') : skewX;
+        transforms.push(`skewX(${value})`);
+    }
+
+    const skewY = get('skewY');
+    if (skewY !== undefined) {
+        const value =
+            typeof skewY === 'string' ? skewY.replace(/deg$/, '') : skewY;
+        transforms.push(`skewY(${value})`);
+    }
+
+    const matrix = get('matrix');
+    if (Array.isArray(matrix) && matrix.length === 6) {
+        const matrixValues = matrix.map(v => v.toString()).join(' ');
+        transforms.push(`matrix(${matrixValues})`);
+    }
+
+    return transforms.length ? transforms.join(' ') : undefined;
+}
diff --git a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
index cf4135c42..801f0ae3b 100644
--- a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
+++ b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
@@ -288,3 +288,253 @@ export function toExpression(
 
     return t.nullLiteral();
 }
+
+/**
+ * Extracts the name and statically-evaluable value from a given JSX attribute.
+ *
+ * This function supports JSX attributes where the value is either:
+ * - A string literal (e.g., `fill="red"`)
+ * - An expression container that can be statically evaluated (e.g., `fill={"red"}`, or arrays like `transform={[{ rotate: "45deg" }]}`)
+ *
+ * If the value is dynamic, non-literal, or not supported (e.g., function calls, identifiers, complex objects),
+ * the function returns `{ name: null, value: null }`.
+ *
+ * @param t - Babel types helper for AST manipulation.
+ * @param attr - The JSXAttribute node to extract data from.
+ * @returns An object with the statically-evaluable attribute name and value:
+ *          - `name`: The attribute's name (e.g., "fill", "translateX") or `null` if not extractable.
+ *          - `value`: A string, number, or array of strings/numbers if statically evaluable, otherwise `null`.
+ */
+export function getJSXAttributeData(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute
+): {
+    name: string | null;
+    value: string | number | (string | number)[] | null;
+} {
+    const name = getNodeName(t, attr.name);
+    const result: {
+        name: string | null;
+        value: string | number | (string | number)[] | null;
+    } = {
+        name: null,
+        value: null
+    };
+
+    if (!name || !attr.value) {
+        return result;
+    }
+
+    let expression: Babel.types.Node | null = null;
+
+    if (t.isJSXExpressionContainer(attr.value)) {
+        expression = attr.value.expression;
+    } else if (t.isStringLiteral(attr.value)) {
+        expression = attr.value;
+    } else {
+        return result; // Not supported
+    }
+
+    const staticValue = evaluateStaticNode(t, expression);
+
+    if (
+        typeof staticValue === 'string' ||
+        typeof staticValue === 'number' ||
+        (Array.isArray(staticValue) &&
+            staticValue.every(
+                v => typeof v === 'string' || typeof v === 'number'
+            ))
+    ) {
+        result.name = name;
+        result.value = staticValue;
+    }
+
+    return result;
+}
+
+/**
+ * Recursively evaluates a Babel AST node into a static JS value.
+ * Returns `null` if any non-static construct is encountered.
+ *
+ * Supported:
+ * - ObjectExpression (with simple keys and nested values)
+ * - ArrayExpression (e.g., style arrays, transform arrays)
+ * - NumericLiteral, StringLiteral, BooleanLiteral, NullLiteral
+ * - UnaryExpression (+/-) over NumericLiteral
+ * - TemplateLiteral without expressions
+ * - ConditionalExpression if both sides static
+ * - LogicalExpression (||, &&, ??) if both sides static
+ *
+ * NOT supported (returns null):
+ * - Identifier, MemberExpression, CallExpression, NewExpression, SpreadElement, Function nodes, etc.
+ */
+export function evaluateStaticNode(
+    t: typeof Babel.types,
+    node: Babel.types.Node | null | undefined
+): any {
+    if (!node) {
+        return null;
+    }
+
+    // --- Literals
+    if (t.isNullLiteral(node)) {
+        return null;
+    }
+    if (t.isNumericLiteral(node)) {
+        return node.value;
+    }
+    if (t.isBooleanLiteral(node)) {
+        return node.value;
+    }
+    if (t.isStringLiteral(node)) {
+        return node.value;
+    }
+    if (t.isTemplateLiteral(node)) {
+        if (node.expressions.length === 0 && node.quasis.length === 1) {
+            return node.quasis[0].value.cooked ?? '';
+        }
+        return null; // dynamic template
+    }
+
+    // --- Unary +/- on numeric literal
+    if (t.isUnaryExpression(node) && t.isNumericLiteral(node.argument)) {
+        if (node.operator === '-') {
+            return -node.argument.value;
+        }
+        if (node.operator === '+') {
+            return +node.argument.value;
+        }
+        return null;
+    }
+
+    // --- Arrays
+    if (t.isArrayExpression(node)) {
+        const out: any[] = [];
+        for (const el of node.elements) {
+            if (!el) {
+                out.push(null);
+                continue;
+            }
+            if (t.isSpreadElement(el)) {
+                return null; // dynamic spread in array
+            }
+            const v = evaluateStaticNode(t, el as any);
+            if (v === undefined) {
+                // keep undefined? RN style ignores undefined; we can drop it
+                continue;
+            }
+            out.push(v);
+        }
+        return out;
+    }
+
+    // --- Objects
+    if (t.isObjectExpression(node)) {
+        const obj: Record<string, any> = {};
+        for (const p of node.properties) {
+            if (t.isSpreadElement(p)) {
+                return null; // dynamic spread
+            }
+            if (!t.isObjectProperty(p)) {
+                return null; // methods/getters/setters not expected in style
+            }
+
+            // Key can be Identifier or StringLiteral (computed keys are not supported here)
+            let key: string | null = null;
+            if (t.isIdentifier(p.key) && !p.computed) {
+                key = p.key.name;
+            } else if (t.isStringLiteral(p.key) && !p.computed) {
+                key = p.key.value;
+            } else {
+                return null; // computed or unsupported key
+            }
+
+            const value = evaluateStaticNode(t, p.value as any);
+            // RN style ignores undefined; omit null/undefined keys
+            if (key && value !== undefined) {
+                obj[key] = value;
+            }
+        }
+        return obj;
+    }
+
+    // --- Conditional (ternary): only if both sides static
+    if (t.isConditionalExpression(node)) {
+        const c = evaluateStaticNode(t, node.consequent);
+        const a = evaluateStaticNode(t, node.alternate);
+        if (c === null && a === null) {
+            return null;
+        }
+        if (c !== null && a !== null) {
+            // We can't evaluate the test safely; choose neither → bail or pick one?
+            // Safer: bail to avoid wrong choice.
+            return null;
+        }
+        return null; // keep conservative; you can relax if you want to pick a branch
+    }
+
+    // --- Logical expressions (||, &&, ??) if both sides static (conservative)
+    if (t.isLogicalExpression(node)) {
+        const left = evaluateStaticNode(t, node.left);
+        const right = evaluateStaticNode(t, node.right);
+        if (left === null && right === null) {
+            return null;
+        }
+        // Still conservative: without evaluating truthiness rules exactly, bail
+        return null;
+    }
+
+    // Everything else considered dynamic for our purposes
+    // (Identifiers, MemberExpressions, CallExpressions, NewExpressions, etc.)
+    return null;
+}
+
+export function parseStyleNode(
+    t: typeof Babel.types,
+    attr: Babel.types.JSXAttribute
+): Record<string, any> | null {
+    if (!attr.value) {
+        return null;
+    }
+
+    // style="..." → not a valid RN style object
+    if (t.isStringLiteral(attr.value)) {
+        return null;
+    }
+
+    if (t.isJSXExpressionContainer(attr.value)) {
+        const v = attr.value.expression;
+
+        // style={{ ... }}  or  style={[ ... ]}
+        const evaluated = evaluateStaticNode(t, v);
+        if (evaluated == null) {
+            return null;
+        }
+
+        // If the top-level is an array, merge object entries (RN allows style arrays)
+        if (Array.isArray(evaluated)) {
+            const merged: Record<string, any> = {};
+            for (const item of evaluated) {
+                if (item && typeof item === 'object' && !Array.isArray(item)) {
+                    Object.assign(merged, item);
+                } else if (item == null) {
+                    // ignore null/undefined
+                } else {
+                    // Non-object entries in a style array are not expected; bail
+                    return null;
+                }
+            }
+            return merged;
+        }
+
+        // If it's already an object, return it
+        if (evaluated && typeof evaluated === 'object') {
+            return evaluated as Record<string, any>;
+        }
+
+        // Any other type at top-level is not a valid style object
+        return null;
+    }
+
+    return null;
+}

From d2e6502685dbbe806c40051bcadda878522040ac Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 12 Sep 2025 14:27:20 +0100
Subject: [PATCH 04/35] Add fs functions to ensure the assets directory is
 correctly set up

---
 .../react-native-svg/processing/fs.ts         | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
new file mode 100644
index 000000000..0c50b11b8
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
@@ -0,0 +1,62 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Determines the output path for storing transformed SVG assets.
+ * In production mode (no `pluginDev` env flag), it targets the Session Replay node module.
+ * In development mode (`pluginDev=true`), it writes to a local `./assets` directory.
+ *
+ * @returns  Absolute path to the directory where assets should be written.
+ */
+export function getAssetsPath() {
+    const hasDevFlag = process.env.pluginDev;
+    const modulePath =
+        'node_modules/@datadog/mobile-react-native-session-replay';
+
+    if (!hasDevFlag) {
+        return path.resolve(modulePath);
+    }
+
+    return path.resolve('./assets');
+}
+
+/**
+ * Ensures that the given assets directory exists.
+ * If it does not exist, creates it using `fs.mkdirSync`.
+ *
+ * @param assetsPath - Absolute path to the assets directory.
+ */
+export function ensureAssetsDir(assetsPath: string) {
+    try {
+        fs.accessSync(assetsPath, fs.constants.F_OK);
+    } catch (error) {
+        fs.mkdirSync(assetsPath);
+    }
+}
+
+/**
+ * Deletes all files (non-recursively) in the provided assets directory.
+ * Only removes files, leaving subdirectories untouched.
+ *
+ * @param assetsPath - Absolute path to the assets directory to clear.
+ */
+export function clearAssetsDir(assetsPath: string) {
+    try {
+        const files = fs.readdirSync(assetsPath);
+        for (const file of files) {
+            const filePath = path.join(assetsPath, file);
+
+            if (fs.lstatSync(filePath).isFile()) {
+                fs.unlinkSync(filePath);
+            }
+        }
+    } catch (error) {
+        console.error('[clearAssetsDir]: ', error);
+    }
+}

From 32afea8636daaf84a42f4b131195f70dca88d29b Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 12 Sep 2025 16:28:48 +0100
Subject: [PATCH 05/35] Add babel plugin support for inline SVG conversion to
 web compliant format

---
 .../react-native-babel-plugin/src/index.ts    |   9 +
 .../src/libraries/react-native-svg/index.ts   | 300 ++++++++++++++++++
 .../src/types/general.ts                      |   2 +
 3 files changed, 311 insertions(+)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts

diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index d5968dd87..b430f609d 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -13,6 +13,7 @@ import {
     insertRumActionImport
 } from './actions/rum';
 import { defaultPluginOptions } from './constants';
+import { ReactNativeSVG } from './libraries/react-native-svg';
 import type {
     PluginAPI,
     PluginOptions,
@@ -33,7 +34,12 @@ export default declare(
             }
         };
 
+        let reactNativeSVG: ReactNativeSVG;
+
         return {
+            pre() {
+                reactNativeSVG = new ReactNativeSVG();
+            },
             visitor: {
                 Program: {
                     enter(path, state) {
@@ -46,6 +52,7 @@ export default declare(
                         }
 
                         pluginState.fileInfo = { path: p, name };
+                        pluginState.reactNativeSVG = reactNativeSVG;
 
                         insertSetupFlag(path, state, api.types);
                         loadImportMap(path, api.types, pluginState, options);
@@ -102,6 +109,8 @@ export default declare(
                         pluginState,
                         options
                     );
+
+                    pluginState.reactNativeSVG?.processItem(name, path, t);
                 }
             }
         };
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
new file mode 100644
index 000000000..8150d158d
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -0,0 +1,300 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+import generate from '@babel/generator';
+import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+import { v4 as uuidv4 } from 'uuid';
+
+import { getNodeName } from '../../utils';
+
+import { svgSupportedNames, xmlNamespace } from './constants';
+import {
+    buildTransformStringAttribute,
+    handleArrayAttributes,
+    handleJoinedTranformAttributes,
+    handleRegularAttributes,
+    handleRNSpecificAttributes,
+    handleSeparateTransformAttributes,
+    handleSvgDimensions,
+    validateAttribute
+} from './processing/attributes';
+import {
+    clearAssetsDir,
+    ensureAssetsDir,
+    getAssetsPath
+} from './processing/fs';
+import { convertAttributeCasing } from './utils';
+
+type SvgOffset = {
+    start: number;
+    length: number;
+};
+
+export class ReactNativeSVG {
+    svgMap: Record<string, { file: string; [key: string]: string }> = {};
+
+    assetsPath: string;
+
+    svgOffset: Record<string, SvgOffset> = {};
+
+    constructor() {
+        this.assetsPath = getAssetsPath();
+
+        ensureAssetsDir(this.assetsPath);
+        clearAssetsDir(this.assetsPath);
+    }
+
+    /**
+     * Processes a JSXElement representing an SVG node and transforms it into
+     * a web compliant SVG string with updated attributes and dimensions.
+     * Stores the transformed SVG string and dimensions in `svgMap`, keyed by a UUID.
+     *
+     * @param name - Tag name of the JSXElement (e.g., 'svg', 'path').
+     * @param path - Babel NodePath pointing to the JSXElement to process.
+     * @param t - Babel types helper.
+     * @returns Transformed SVG JSX string, or undefined if the tag is not supported.
+     */
+    processItem(
+        name: string,
+        path: Babel.NodePath<Babel.types.JSXElement>,
+        t: typeof Babel.types
+    ) {
+        if (!svgSupportedNames.includes(name)) {
+            return;
+        }
+
+        const clone = t.cloneNode(path.node, true);
+        const dimensions: Record<string, string> = {};
+        const id = uuidv4();
+
+        this.transformElement(clone, dimensions, t);
+        this.setNamespace(t, clone);
+
+        const output = generate(clone).code;
+
+        this.svgMap[id] = {
+            file: output,
+            ...dimensions
+        };
+
+        this.setNativeID(path.node, id);
+
+        return output;
+    }
+
+    /**
+     * Sets the `xmlns` attribute on the root `<svg>` tag to ensure proper namespacing in web output.
+     *
+     * @param t - Babel types helper.
+     * @param el - JSXElement node, expected to be an `<svg>` element.
+     */
+    private setNamespace(t: typeof Babel.types, el: Babel.types.JSXElement) {
+        const name = getNodeName(t, el.openingElement.name);
+
+        if (name === 'svg') {
+            el.openingElement.attributes.push(
+                jsxAttribute(
+                    jSXIdentifier(xmlNamespace[0]),
+                    stringLiteral(xmlNamespace[1])
+                )
+            );
+        }
+    }
+
+    /**
+     * Adds a `nativeID` attribute to the JSXElement using the provided UUID.
+     * This helps in referencing or tracking the SVG element in native environments.
+     *
+     * @param el - JSXElement to which the `nativeID` should be added.
+     * @param id - UUID string to assign as the `nativeID`.
+     */
+    private setNativeID(el: Babel.types.JSXElement, id: string) {
+        el.openingElement.attributes.push(
+            jsxAttribute(jSXIdentifier('nativeID'), stringLiteral(id))
+        );
+    }
+
+    /**
+     * Transforms an individual JSXElement by:
+     * - Converting tag casing to be web-compatible.
+     * - Processing and sanitizing attributes.
+     * - Recursively handling children.
+     *
+     * @param el - JSXElement node to transform.
+     * @param dimensions - Optional object to collect extracted width/height info.
+     * @param t - Babel types helper.
+     */
+    private transformElement(
+        el: Babel.types.JSXElement,
+        dimensions: Record<string, string> = {},
+        t: typeof Babel.types
+    ) {
+        const openingNode = el.openingElement.name;
+        const isJSXIdentifierOpen = t.isJSXIdentifier(openingNode);
+
+        // Fix casing for openingElement
+        if (isJSXIdentifierOpen) {
+            openingNode.name = convertAttributeCasing(openingNode.name);
+        }
+
+        const closingNode = el.closingElement?.name;
+        const isJSXIdentifierClose = t.isJSXIdentifier(closingNode);
+
+        // Fix casing for closingElement
+        if (isJSXIdentifierClose) {
+            closingNode.name = convertAttributeCasing(closingNode.name);
+        }
+
+        this.processAttributes(el, dimensions, t);
+    }
+
+    /**
+     * Recursively traverses the children of a JSXElement and applies `transformElement`
+     * to each child that is itself a JSXElement.
+     *
+     * @param t - Babel types helper.
+     * @param jsxElement - Parent JSXElement whose children will be transformed.
+     * @param dimensions - Optional object to propagate width/height info through child elements.
+     */
+    private traverseAndTransformChildren(
+        t: typeof Babel.types,
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string> = {}
+    ) {
+        for (const child of jsxElement.children) {
+            if (t.isJSXElement(child)) {
+                this.transformElement(child, dimensions, t);
+            }
+        }
+    }
+
+    /**
+     * Processes and transforms all attributes of a given JSXElement:
+     * - Removes invalid or unsupported attributes.
+     * - Normalizes attribute casing and naming.
+     * - Consolidates transform-related attributes into a single `transform` string.
+     * - Extracts dimensions and stores them in the provided `dimensions` object.
+     * - Recursively applies transformations to child elements.
+     *
+     * @param jsxElement - JSXElement whose attributes are to be processed.
+     * @param dimensions - Optional object to collect extracted width/height info.
+     * @param t - Babel types helper.
+     */
+    private processAttributes(
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string> = {},
+        t: typeof Babel.types
+    ) {
+        const el = jsxElement.openingElement;
+        const name = getNodeName(t, el);
+        const transformsArray: { name: string; value: string | number }[] = [];
+        const attributes = Array.from(el.attributes.entries()).reverse();
+
+        for (const [index, attr] of attributes) {
+            try {
+                if (!t.isJSXAttribute(attr)) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                if (!t.isJSXIdentifier(attr.name)) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle RN style attribute & non-supported attributes
+                const rnAttributesHandled = handleRNSpecificAttributes(
+                    t,
+                    attr,
+                    attr.name.name
+                );
+
+                if (rnAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Validate whether the attribute is valid
+                const { attrName, isInvalidAttribute } = validateAttribute(
+                    attr.name.name
+                );
+
+                if (isInvalidAttribute) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                /* If we reach this point we know we have a valid attribute name */
+
+                // Handle SVG dimensions
+                const dimensionsHandled = handleSvgDimensions(
+                    t,
+                    attr,
+                    attrName,
+                    dimensions,
+                    name
+                );
+
+                if (dimensionsHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Set the formatted attibute name to our cloned element
+                attr.name.name = attrName;
+
+                // Handle array attributes
+                const arrayAttributesHandled = handleArrayAttributes(
+                    t,
+                    attr,
+                    attrName
+                );
+
+                if (arrayAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle separate transform attributes
+                const separateTransformAttributesHandled = handleSeparateTransformAttributes(
+                    t,
+                    attr,
+                    attrName,
+                    transformsArray
+                );
+
+                if (separateTransformAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle joined transform attributes
+                const joinedTransformAttributesHandled = handleJoinedTranformAttributes(
+                    t,
+                    attr,
+                    attrName,
+                    transformsArray
+                );
+
+                if (joinedTransformAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                handleRegularAttributes(t, attr);
+            } catch (error) {
+                console.error('ReactNativeSVG[processAttributes]: ', error);
+            }
+        }
+
+        // Create & Set a new transform attribute based on the element's transform attributes
+        buildTransformStringAttribute(el, transformsArray);
+
+        // Goes through an elemnts children and transforms its properties
+        this.traverseAndTransformChildren(t, jsxElement, dimensions);
+    }
+}
diff --git a/packages/react-native-babel-plugin/src/types/general.ts b/packages/react-native-babel-plugin/src/types/general.ts
index b94c9021b..ecc0e74db 100644
--- a/packages/react-native-babel-plugin/src/types/general.ts
+++ b/packages/react-native-babel-plugin/src/types/general.ts
@@ -8,6 +8,7 @@ import type * as Babel from '@babel/core';
 
 import type { RumAction } from '../constants';
 
+import type { ReactNativeSVG } from '../libraries/react-native-svg';
 export const MemoTypes = {
     USE_CALLBACK: 'useCallback',
     USE_MEMO: 'useMemo'
@@ -43,6 +44,7 @@ export type PluginPassState = Babel.PluginPass & {
     memoization?: Record<string, string>;
     hasValidTapAction?: boolean;
     trackedComponents?: Record<string, Omit<TrackedComponent, 'name'>>;
+    reactNativeSVG?: ReactNativeSVG;
 };
 
 export type PluginResult = Babel.PluginObj<Babel.PluginPass>;

From e44b2d1551645211c0e40aa6c13c207bed1ce667 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Mon, 15 Sep 2025 10:47:21 +0100
Subject: [PATCH 06/35] Add SVGO optimization step

---
 .../react-native-babel-plugin/package.json    |   1 +
 .../src/libraries/react-native-svg/index.ts   |   9 +-
 yarn.lock                                     | 101 ++++++++++++------
 3 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/packages/react-native-babel-plugin/package.json b/packages/react-native-babel-plugin/package.json
index 35a62bdd5..f86153852 100644
--- a/packages/react-native-babel-plugin/package.json
+++ b/packages/react-native-babel-plugin/package.json
@@ -42,6 +42,7 @@
         "@babel/generator": "^7.28.0",
         "@babel/helper-plugin-utils": "^7.27.1",
         "@babel/types": "^7.27.1",
+        "svgo": "^4.0.0",
         "uuid": "^11.1.0"
     },
     "devDependencies": {
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 8150d158d..cfd2abf0c 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -7,6 +7,7 @@
 import type * as Babel from '@babel/core';
 import generate from '@babel/generator';
 import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+import { optimize } from 'svgo';
 import { v4 as uuidv4 } from 'uuid';
 
 import { getNodeName } from '../../utils';
@@ -83,7 +84,12 @@ export class ReactNativeSVG {
 
         this.setNativeID(path.node, id);
 
-        return output;
+        const optimized = optimize(output, {
+            multipass: true,
+            plugins: ['preset-default']
+        });
+
+        return { original: output, optimized };
     }
 
     /**
@@ -295,6 +301,7 @@ export class ReactNativeSVG {
         buildTransformStringAttribute(el, transformsArray);
 
         // Goes through an elemnts children and transforms its properties
+        // Goes through an elements children and transforms its properties
         this.traverseAndTransformChildren(t, jsxElement, dimensions);
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 353ccdbd4..0166da516 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3736,6 +3736,7 @@ __metadata:
     "@types/jest": ^29.5.14
     jest: ^29.7.0
     react-native-builder-bob: 0.26.0
+    svgo: ^4.0.0
     tsc-alias: ^1.8.16
     typescript: 5.0.4
     uuid: ^11.1.0
@@ -8228,10 +8229,8 @@ __metadata:
   dependencies:
     "@babel/core": ^7.25.2
     "@babel/preset-env": ^7.25.3
-    "@babel/runtime": ^7.25.0
+    "@babel/runtime": ^7.26.10
     "@datadog/mobile-react-native": "workspace:packages/core"
-    "@datadog/mobile-react-native-babel-plugin": "workspace:packages/react-native-babel-plugin"
-    "@datadog/mobile-react-native-session-replay": "workspace:packages/react-native-session-replay"
     "@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
@@ -8247,7 +8246,6 @@ __metadata:
     prettier: ^2.8.8
     react: 18.3.1
     react-native: 0.76.9
-    react-native-svg: 15.8.0
     react-test-renderer: 18.3.1
     typescript: 5.0.4
   languageName: unknown
@@ -9810,6 +9808,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "commander@npm:11.1.0"
+  checksum: fd1a8557c6b5b622c89ecdfde703242ab7db3b628ea5d1755784c79b8e7cb0d74d65b4a262289b533359cd58e1bfc0bf50245dfbcd2954682a6f367c828b79ef
+  languageName: node
+  linkType: hard
+
 "commander@npm:^12.0.0":
   version: 12.1.0
   resolution: "commander@npm:12.1.0"
@@ -10184,13 +10189,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "css-tree@npm:1.1.3"
+"css-tree@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "css-tree@npm:3.1.0"
   dependencies:
-    mdn-data: 2.0.14
-    source-map: ^0.6.1
-  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
+    mdn-data: 2.12.2
+    source-map-js: ^1.0.1
+  checksum: 6b8c713c22b7223c0e71179575c3bbf421a13a61641204645d6c3b560bdc4ffed8d676220bbcb83777e07b46a934ec3b1c629aa61d57422c196c8e2e7417ee1a
+  languageName: node
+  linkType: hard
+
+"css-tree@npm:~2.2.0":
+  version: 2.2.1
+  resolution: "css-tree@npm:2.2.1"
+  dependencies:
+    mdn-data: 2.0.28
+    source-map-js: ^1.0.1
+  checksum: b94aa8cc2f09e6f66c91548411fcf74badcbad3e150345074715012d16333ce573596ff5dfca03c2a87edf1924716db765120f94247e919d72753628ba3aba27
   languageName: node
   linkType: hard
 
@@ -10210,6 +10225,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csso@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "csso@npm:5.0.5"
+  dependencies:
+    css-tree: ~2.2.0
+  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -15581,10 +15605,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.14":
-  version: 2.0.14
-  resolution: "mdn-data@npm:2.0.14"
-  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
+"mdn-data@npm:2.0.28":
+  version: 2.0.28
+  resolution: "mdn-data@npm:2.0.28"
+  checksum: f51d587a6ebe8e426c3376c74ea6df3e19ec8241ed8e2466c9c8a3904d5d04397199ea4f15b8d34d14524b5de926d8724ae85207984be47e165817c26e49e0aa
+  languageName: node
+  linkType: hard
+
+"mdn-data@npm:2.12.2":
+  version: 2.12.2
+  resolution: "mdn-data@npm:2.12.2"
+  checksum: 77f38c180292cfbbd41c06641a27940cc293c08f47faa98f80bf64f98bb1b2a804df371e864e31a1ea97bdf181c0b0f85a2d96d1a6261f43c427b32222f33f1f
   languageName: node
   linkType: hard
 
@@ -18426,20 +18457,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-svg@npm:15.8.0":
-  version: 15.8.0
-  resolution: "react-native-svg@npm:15.8.0"
-  dependencies:
-    css-select: ^5.1.0
-    css-tree: ^1.1.3
-    warn-once: 0.1.1
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: ad9d6093f3aef0d53c5e2a562afb7805009f2bf50fd4ec6e77f8c18a6cb7e06a7793d55cc66d523c7d30c77cae170ee26767c72ad5b1a1f07032420ccf4162fe
-  languageName: node
-  linkType: hard
-
 "react-native-webview@npm:13.12.2":
   version: 13.12.2
   resolution: "react-native-webview@npm:13.12.2"
@@ -19277,7 +19294,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:>=0.6.0":
+"sax@npm:>=0.6.0, sax@npm:^1.4.1":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"
   checksum: 3ad64df16b743f0f2eb7c38ced9692a6d924f1cd07bbe45c39576c2cf50de8290d9d04e7b2228f924c7d05fecc4ec5cf651423278e0c7b63d260c387ef3af84a
@@ -19697,6 +19714,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.0.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 4eb0cd997cdf228bc253bcaff9340afeb706176e64868ecd20efbe6efea931465f43955612346d6b7318789e5265bdc419bc7669c1cebe3db0eb255f57efa76b
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -20274,6 +20298,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svgo@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "svgo@npm:4.0.0"
+  dependencies:
+    commander: ^11.1.0
+    css-select: ^5.1.0
+    css-tree: ^3.0.1
+    css-what: ^6.1.0
+    csso: ^5.0.5
+    picocolors: ^1.1.1
+    sax: ^1.4.1
+  bin:
+    svgo: ./bin/svgo.js
+  checksum: bddf57bda7b4e8252e5f8c5aa8555ec9810f963369bad17476cf21881e0b5fd3dfffcffddebd7b8b4c80b7e64b508589fad5be055d143d70b28ef0dee2583fcc
+  languageName: node
+  linkType: hard
+
 "symbol-observable@npm:^4.0.0":
   version: 4.0.0
   resolution: "symbol-observable@npm:4.0.0"
@@ -21142,7 +21183,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:0.1.1, warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
+"warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d

From 51fe40e38f3485729a7d01b9c8c0c056c36531ad Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Mon, 15 Sep 2025 18:05:08 +0100
Subject: [PATCH 07/35] Add Support for Local SVGs

- Refactor code to allow multiple types of SVG elements
---
 .../react-native-babel-plugin/package.json    |   3 +
 .../react-native-babel-plugin/src/index.ts    |   5 +-
 .../libraries/react-native-svg/constants.ts   |   1 -
 .../handlers/HandlerResolver.ts               |  70 ++++
 .../handlers/LocalSvgHandler.ts               |  86 ++++
 .../react-native-svg/handlers/RNSvgHandler.ts | 259 ++++++++++++
 .../react-native-svg/handlers/SvgHandler.ts   |   9 +
 .../src/libraries/react-native-svg/index.ts   | 372 +++++++-----------
 .../react-native-svg/processing/attributes.ts |   8 +-
 9 files changed, 573 insertions(+), 240 deletions(-)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/SvgHandler.ts

diff --git a/packages/react-native-babel-plugin/package.json b/packages/react-native-babel-plugin/package.json
index f86153852..3cbc1d7b3 100644
--- a/packages/react-native-babel-plugin/package.json
+++ b/packages/react-native-babel-plugin/package.json
@@ -41,7 +41,10 @@
         "@babel/core": "^7.27.1",
         "@babel/generator": "^7.28.0",
         "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.4",
+        "@babel/traverse": "^7.28.4",
         "@babel/types": "^7.27.1",
+        "fast-glob": "^3.3.3",
         "svgo": "^4.0.0",
         "uuid": "^11.1.0"
     },
diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index b430f609d..f46d2f647 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -38,7 +38,8 @@ export default declare(
 
         return {
             pre() {
-                reactNativeSVG = new ReactNativeSVG();
+                // TODO: only initialize once
+                reactNativeSVG = new ReactNativeSVG(api.types, this.cwd);
             },
             visitor: {
                 Program: {
@@ -110,7 +111,7 @@ export default declare(
                         options
                     );
 
-                    pluginState.reactNativeSVG?.processItem(name, path, t);
+                    pluginState.reactNativeSVG?.processItem(path, name);
                 }
             }
         };
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
index f9524c9d6..152e5738d 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
@@ -20,7 +20,6 @@ export const rnSvgArrayAttributeValues = [
 ];
 
 // All these values are deprecated, but still allowed in react-native-svg
-// translate, scale, rotate ?
 export const rnSvgTransformAttributeValues = [
     'translateX',
     'translateY',
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
new file mode 100644
index 000000000..165d78c4d
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
@@ -0,0 +1,70 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+
+import { LocalSvgHandler } from './LocalSvgHandler';
+import { RNSvgHandler } from './RNSvgHandler';
+import type { SvgHandler } from './SvgHandler';
+
+type Resolver = () => SvgHandler;
+
+type Dependencies = {
+    t: typeof Babel.types;
+    path: Babel.NodePath<Babel.types.JSXElement>;
+    name: string;
+    localSvgMap: Record<string, { path: string; content?: string }>;
+};
+
+export class HandlerResolver {
+    private static registry: Record<string, Resolver>;
+    private static dependencies: Dependencies | null = null;
+
+    /**
+     * Registers handler factories for supported JSX element types and stores shared dependencies.
+     * This method must be called before invoking `create()`, as it initializes the internal registry
+     * with handler constructors that are parameterized with the provided Babel context and configuration.
+     *
+     * @param dependencies - Shared Babel-related dependencies and contextual information,
+     *                       including `types`, the current JSX `path`, tag `name`, and the `localSvgMap`.
+     */
+    static configure(dependencies: Dependencies) {
+        this.dependencies = dependencies;
+        const { t, path, name, localSvgMap } = dependencies;
+
+        HandlerResolver.registry = {
+            RNSvgHandler: () => new RNSvgHandler(t, path, name),
+            LocalSvgHandler: () =>
+                new LocalSvgHandler(t, path, name, localSvgMap)
+        };
+    }
+
+    /**
+     * Resolves and returns the appropriate handler instance based on the JSX tag name.
+     * @throws Error if `configure()` has not been called prior to invocation.
+     *
+     * @returns The resolved handler instance or `null` if no match exists.
+     */
+    static create() {
+        if (!this.dependencies) {
+            throw new Error('HandlerResolver must be configured before use.');
+        }
+
+        const { name, localSvgMap } = this.dependencies;
+
+        if (name === 'Svg') {
+            return HandlerResolver.registry.RNSvgHandler();
+        }
+
+        // TODO: SvgUri
+
+        if (localSvgMap[name]) {
+            return HandlerResolver.registry.LocalSvgHandler();
+        }
+
+        return null;
+    }
+}
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
new file mode 100644
index 000000000..f46cd67b6
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
@@ -0,0 +1,86 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+import fs from 'fs';
+
+import { getNodeName } from '../../../utils';
+import { handleSvgDimensions } from '../processing/attributes';
+
+import type { SvgHandler } from './SvgHandler';
+
+export class LocalSvgHandler implements SvgHandler {
+    constructor(
+        private types: typeof Babel.types,
+        private path: Babel.NodePath<Babel.types.JSXElement>,
+        private name: string,
+        private localSvgMap: Record<string, { path: string; content?: string }>
+    ) {
+        // no-op
+    }
+
+    /**
+     * Retrieves and returns the contents of a local SVG file corresponding to the JSXElement tag name.
+     * If the file hasn't been read yet, it reads the SVG content from disk and caches it in `localSvgMap`.
+     * Also extracts and stores width/height dimensions from the JSX attributes into the `dimensions` object.
+     *
+     * @param dimensions - Object to collect extracted width/height info.
+     * @returns Raw SVG string content from the local file, or undefined if the tag is not found in `localSvgMap`.
+     */
+    transformSvgNode(dimensions: Record<string, string>) {
+        if (!this.localSvgMap[this.name]) {
+            return undefined;
+        }
+
+        const { path, content } = this.localSvgMap[this.name];
+
+        if (!content) {
+            this.localSvgMap[this.name].content = fs.readFileSync(path, 'utf8');
+        }
+
+        this.processAttributes(this.types, this.path.node, dimensions);
+
+        return this.localSvgMap[this.name].content;
+    }
+
+    /**
+     * Processes the attributes of a JSXElement to extract relevant SVG metadata.
+     * Specifically identifies and handles dimension-related attributes (e.g., width, height),
+     * storing them into the provided `dimensions` object. Ignores spread attributes.
+     *
+     * @param t - Babel types helper.
+     * @param jsxElement - The JSXElement whose attributes will be processed.
+     * @param dimensions - Object to collect extracted width/height info.
+     */
+    private processAttributes(
+        t: typeof Babel.types,
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string>
+    ) {
+        const el = jsxElement.openingElement;
+
+        for (const attr of el.attributes) {
+            if (t.isJSXSpreadAttribute(attr)) {
+                continue;
+            }
+
+            const attrName = getNodeName(t, attr);
+            if (!attrName) {
+                continue;
+            }
+
+            // Handle SVG dimensions
+            handleSvgDimensions(
+                t,
+                attr,
+                attrName,
+                dimensions,
+                this.name,
+                this.name
+            );
+        }
+    }
+}
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
new file mode 100644
index 000000000..4988ca707
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
@@ -0,0 +1,259 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+import generate from '@babel/generator';
+import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+
+import { getNodeName } from '../../../utils';
+import { svgSupportedNames, xmlNamespace } from '../constants';
+import {
+    buildTransformStringAttribute,
+    handleArrayAttributes,
+    handleJoinedTranformAttributes,
+    handleRegularAttributes,
+    handleRNSpecificAttributes,
+    handleSeparateTransformAttributes,
+    handleSvgDimensions,
+    validateAttribute
+} from '../processing/attributes';
+import { convertAttributeCasing } from '../utils';
+
+import type { SvgHandler } from './SvgHandler';
+
+export class RNSvgHandler implements SvgHandler {
+    constructor(
+        private types: typeof Babel.types,
+        private path: Babel.NodePath<Babel.types.JSXElement>,
+        private name: string
+    ) {
+        // no-op
+    }
+
+    /**
+     * Processes a JSXElement representing an SVG node and transforms it into
+     * a web compliant SVG string with updated attributes and dimensions.
+     * Stores the transformed SVG string and dimensions in `svgMap`, keyed by a UUID.
+     *
+     * @param dimensions - Object to collect extracted width/height info.
+     * @returns Transformed SVG JSX string, or undefined if the tag is not supported.
+     */
+    transformSvgNode(dimensions: Record<string, string>) {
+        if (!svgSupportedNames.includes(this.name)) {
+            return undefined;
+        }
+
+        const clone = this.types.cloneNode(this.path.node, true);
+
+        this.transformElement(this.types, clone, dimensions);
+        this.setNamespace(this.types, clone);
+
+        const output = generate(clone).code;
+
+        return output;
+    }
+
+    /**
+     * Sets the `xmlns` attribute on the root `<svg>` tag to ensure proper namespacing in web output.
+     *
+     * @param t - Babel types helper.
+     * @param el - JSXElement node, expected to be an `<svg>` element.
+     */
+    private setNamespace(t: typeof Babel.types, el: Babel.types.JSXElement) {
+        const name = getNodeName(t, el.openingElement.name);
+
+        if (name === 'svg') {
+            el.openingElement.attributes.push(
+                jsxAttribute(
+                    jSXIdentifier(xmlNamespace[0]),
+                    stringLiteral(xmlNamespace[1])
+                )
+            );
+        }
+    }
+
+    /**
+     * Transforms an individual JSXElement by:
+     * - Converting tag casing to be web-compatible.
+     * - Processing and sanitizing attributes.
+     * - Recursively handling children.
+     *
+     * @param t - Babel types helper.
+     * @param el - JSXElement node to transform.
+     * @param dimensions - Optional object to collect extracted width/height info.
+     */
+    private transformElement(
+        t: typeof Babel.types,
+        el: Babel.types.JSXElement,
+        dimensions: Record<string, string>
+    ) {
+        const openingNode = el.openingElement.name;
+        const isJSXIdentifierOpen = t.isJSXIdentifier(openingNode);
+
+        // Fix casing for openingElement
+        if (isJSXIdentifierOpen) {
+            openingNode.name = convertAttributeCasing(openingNode.name);
+        }
+
+        const closingNode = el.closingElement?.name;
+        const isJSXIdentifierClose = t.isJSXIdentifier(closingNode);
+
+        // Fix casing for closingElement
+        if (isJSXIdentifierClose) {
+            closingNode.name = convertAttributeCasing(closingNode.name);
+        }
+
+        this.processAttributes(t, el, dimensions);
+    }
+
+    /**
+     * Recursively traverses the children of a JSXElement and applies `transformElement`
+     * to each child that is itself a JSXElement.
+     *
+     * @param t - Babel types helper.
+     * @param jsxElement - Parent JSXElement whose children will be transformed.
+     * @param dimensions - Optional object to propagate width/height info through child elements.
+     */
+    private traverseAndTransformChildren(
+        t: typeof Babel.types,
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string> = {}
+    ) {
+        for (const child of jsxElement.children) {
+            if (t.isJSXElement(child)) {
+                this.transformElement(t, child, dimensions);
+            }
+        }
+    }
+
+    /**
+     * Processes and transforms all attributes of a given JSXElement:
+     * - Removes invalid or unsupported attributes.
+     * - Normalizes attribute casing and naming.
+     * - Consolidates transform-related attributes into a single `transform` string.
+     * - Extracts dimensions and stores them in the provided `dimensions` object.
+     * - Recursively applies transformations to child elements.
+     *
+     * @param t - Babel types helper.
+     * @param jsxElement - JSXElement whose attributes are to be processed.
+     * @param dimensions - Optional object to collect extracted width/height info.
+     */
+    private processAttributes(
+        t: typeof Babel.types,
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string> = {}
+    ) {
+        const el = jsxElement.openingElement;
+        const name = getNodeName(t, el);
+        const transformsArray: { name: string; value: string | number }[] = [];
+        const attributes = Array.from(el.attributes.entries()).reverse();
+
+        for (const [index, attr] of attributes) {
+            try {
+                if (!t.isJSXAttribute(attr)) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                if (!t.isJSXIdentifier(attr.name)) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle RN style attribute & non-supported attributes
+                const rnAttributesHandled = handleRNSpecificAttributes(
+                    t,
+                    attr,
+                    attr.name.name
+                );
+
+                if (rnAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Validate whether the attribute is valid
+                const { attrName, isInvalidAttribute } = validateAttribute(
+                    attr.name.name
+                );
+
+                if (isInvalidAttribute) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                /* If we reach this point we know we have a valid attribute name */
+
+                // Handle SVG dimensions
+                const dimensionsHandled = handleSvgDimensions(
+                    t,
+                    attr,
+                    attrName,
+                    dimensions,
+                    name,
+                    'svg'
+                );
+
+                if (dimensionsHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Set the formatted attibute name to our cloned element
+                attr.name.name = attrName;
+
+                // Handle array attributes
+                const arrayAttributesHandled = handleArrayAttributes(
+                    t,
+                    attr,
+                    attrName
+                );
+
+                if (arrayAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle separate transform attributes
+                const separateTransformAttributesHandled = handleSeparateTransformAttributes(
+                    t,
+                    attr,
+                    attrName,
+                    transformsArray
+                );
+
+                if (separateTransformAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                // Handle joined transform attributes
+                const joinedTransformAttributesHandled = handleJoinedTranformAttributes(
+                    t,
+                    attr,
+                    attrName,
+                    transformsArray
+                );
+
+                if (joinedTransformAttributesHandled) {
+                    el.attributes.splice(index, 1);
+                    continue;
+                }
+
+                handleRegularAttributes(t, attr);
+            } catch (error) {
+                console.error('ReactNativeSVG[processAttributes]: ', error);
+            }
+        }
+
+        // Create & Set a new transform attribute based on the element's transform attributes
+        buildTransformStringAttribute(el, transformsArray);
+
+        // Goes through an elemnts children and transforms its properties
+        // Goes through an elements children and transforms its properties
+        this.traverseAndTransformChildren(t, jsxElement, dimensions);
+    }
+}
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/SvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/SvgHandler.ts
new file mode 100644
index 000000000..c0d5369fd
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/SvgHandler.ts
@@ -0,0 +1,9 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+export interface SvgHandler {
+    transformSvgNode(dimensions: Record<string, string>): string | undefined;
+}
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index cfd2abf0c..8eb5846d6 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -5,30 +5,23 @@
  */
 
 import type * as Babel from '@babel/core';
-import generate from '@babel/generator';
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
 import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+import glob from 'fast-glob';
+import fs from 'fs';
+import { default as pathN } from 'path';
 import { optimize } from 'svgo';
 import { v4 as uuidv4 } from 'uuid';
 
 import { getNodeName } from '../../utils';
 
-import { svgSupportedNames, xmlNamespace } from './constants';
-import {
-    buildTransformStringAttribute,
-    handleArrayAttributes,
-    handleJoinedTranformAttributes,
-    handleRegularAttributes,
-    handleRNSpecificAttributes,
-    handleSeparateTransformAttributes,
-    handleSvgDimensions,
-    validateAttribute
-} from './processing/attributes';
+import { HandlerResolver } from './handlers/HandlerResolver';
 import {
     clearAssetsDir,
     ensureAssetsDir,
     getAssetsPath
 } from './processing/fs';
-import { convertAttributeCasing } from './utils';
 
 type SvgOffset = {
     start: number;
@@ -42,47 +35,158 @@ export class ReactNativeSVG {
 
     svgOffset: Record<string, SvgOffset> = {};
 
-    constructor() {
+    localSvgMap: Record<string, { path: string; content?: string }> = {};
+
+    constructor(private t: typeof Babel.types, private rootDir: string) {
         this.assetsPath = getAssetsPath();
+        this.buildSvgMap();
 
         ensureAssetsDir(this.assetsPath);
         clearAssetsDir(this.assetsPath);
     }
 
     /**
-     * Processes a JSXElement representing an SVG node and transforms it into
-     * a web compliant SVG string with updated attributes and dimensions.
-     * Stores the transformed SVG string and dimensions in `svgMap`, keyed by a UUID.
+     * Scans all source files in the project to detect `.svg` imports and builds a mapping
+     * of JSX identifiers to their corresponding SVG file paths. This is done by parsing each
+     * file's AST and collecting `import` or `export` declarations that reference `.svg` files.
      *
-     * @param name - Tag name of the JSXElement (e.g., 'svg', 'path').
-     * @param path - Babel NodePath pointing to the JSXElement to process.
-     * @param t - Babel types helper.
-     * @returns Transformed SVG JSX string, or undefined if the tag is not supported.
+     * The collected mappings are stored in `localSvgMap`, keyed by the local/imported variable
+     * names (e.g., `Logo`, `IconSearch`), with their values pointing to the resolved file path.
+     *
+     * This method ignores files in `node_modules`, `lib`, and `dist`, as well as `.d.ts`, test,
+     * and config files.
      */
-    processItem(
-        name: string,
-        path: Babel.NodePath<Babel.types.JSXElement>,
-        t: typeof Babel.types
-    ) {
-        if (!svgSupportedNames.includes(name)) {
-            return;
+    buildSvgMap() {
+        // IMPROVEMENT: Support aliased paths
+        const files = glob.sync(
+            ['**/*.{js,jsx,ts,tsx}', '**/*.{js,jsx,ts,tsx}'],
+            {
+                cwd: this.rootDir,
+                absolute: true,
+                ignore: [
+                    '**/node_modules/**',
+                    '**/lib/**',
+                    '**/dist/**',
+                    '**/*.d.ts',
+                    '**/*.test.*',
+                    '**/*.config.js'
+                ]
+            }
+        );
+
+        for (const file of files) {
+            try {
+                const code = fs.readFileSync(file, 'utf8');
+                if (!code) {
+                    continue;
+                }
+
+                const ast = parser.parse(code, {
+                    sourceType: 'module',
+                    plugins: [
+                        'jsx',
+                        'typescript',
+                        'exportDefaultFrom',
+                        'classProperties',
+                        'dynamicImport'
+                    ]
+                });
+
+                traverse(ast, {
+                    ImportDeclaration: path => {
+                        const source = path.node.source.value;
+                        if (!source.endsWith('.svg')) {
+                            return;
+                        }
+
+                        const resolved = pathN.resolve(
+                            pathN.dirname(file),
+                            source
+                        );
+                        for (const spec of path.node.specifiers) {
+                            const name = getNodeName(this.t, spec.local.name);
+                            if (name) {
+                                this.localSvgMap[name] = {
+                                    path: resolved
+                                };
+                            }
+                        }
+                    },
+                    ExportNamedDeclaration: path => {
+                        const source = path.node.source?.value;
+                        if (!source?.endsWith('.svg')) {
+                            return;
+                        }
+
+                        const resolved = pathN.resolve(
+                            pathN.dirname(file),
+                            source
+                        );
+                        for (const spec of path.node.specifiers) {
+                            if (spec.type === 'ExportSpecifier') {
+                                const name = getNodeName(
+                                    this.t,
+                                    spec.local.name
+                                );
+                                if (name) {
+                                    this.localSvgMap[name] = {
+                                        path: resolved
+                                    };
+                                }
+                            } else {
+                                console.warn(
+                                    `[buildSvgMap]: Unhandled export specifier type: ${spec.type}`
+                                );
+                            }
+                        }
+                    }
+                });
+            } catch (err) {
+                console.error(`[buildSvgMap]: \n File: ${file}\n`, err);
+            }
         }
+    }
 
-        const clone = t.cloneNode(path.node, true);
+    /**
+     * Processes a JSXElement representing an SVG-based component and transforms it into
+     * a web-compliant SVG string with normalized attributes and extracted dimensions.
+     * The resulting SVG content and its metadata (e.g., width/height) are stored in `svgMap`,
+     * keyed by a generated UUID for later reference.
+     *
+     * Internally, the appropriate handler is selected based on the tag name and used to
+     * perform the transformation.
+     *
+     * @param path - Babel NodePath pointing to the JSXElement to process.
+     * @param name - JSX tag name (e.g., 'Svg', 'Logo') used to resolve the appropriate handler.
+     * @returns An object containing the original SVG string and its optimized version,
+     *          or `undefined` if no transformation could be performed.
+     */
+    processItem(path: Babel.NodePath<Babel.types.JSXElement>, name: string) {
         const dimensions: Record<string, string> = {};
-        const id = uuidv4();
 
-        this.transformElement(clone, dimensions, t);
-        this.setNamespace(t, clone);
+        HandlerResolver.configure({
+            t: this.t,
+            path,
+            name,
+            localSvgMap: this.localSvgMap
+        });
+
+        const handler = HandlerResolver.create();
+        const output = handler?.transformSvgNode(dimensions);
 
-        const output = generate(clone).code;
+        if (!output) {
+            return;
+        }
+
+        const id = uuidv4();
+        const originalNode = path.node;
 
         this.svgMap[id] = {
             file: output,
             ...dimensions
         };
 
-        this.setNativeID(path.node, id);
+        this.setNativeID(originalNode, id);
 
         const optimized = optimize(output, {
             multipass: true,
@@ -92,25 +196,6 @@ export class ReactNativeSVG {
         return { original: output, optimized };
     }
 
-    /**
-     * Sets the `xmlns` attribute on the root `<svg>` tag to ensure proper namespacing in web output.
-     *
-     * @param t - Babel types helper.
-     * @param el - JSXElement node, expected to be an `<svg>` element.
-     */
-    private setNamespace(t: typeof Babel.types, el: Babel.types.JSXElement) {
-        const name = getNodeName(t, el.openingElement.name);
-
-        if (name === 'svg') {
-            el.openingElement.attributes.push(
-                jsxAttribute(
-                    jSXIdentifier(xmlNamespace[0]),
-                    stringLiteral(xmlNamespace[1])
-                )
-            );
-        }
-    }
-
     /**
      * Adds a `nativeID` attribute to the JSXElement using the provided UUID.
      * This helps in referencing or tracking the SVG element in native environments.
@@ -123,185 +208,4 @@ export class ReactNativeSVG {
             jsxAttribute(jSXIdentifier('nativeID'), stringLiteral(id))
         );
     }
-
-    /**
-     * Transforms an individual JSXElement by:
-     * - Converting tag casing to be web-compatible.
-     * - Processing and sanitizing attributes.
-     * - Recursively handling children.
-     *
-     * @param el - JSXElement node to transform.
-     * @param dimensions - Optional object to collect extracted width/height info.
-     * @param t - Babel types helper.
-     */
-    private transformElement(
-        el: Babel.types.JSXElement,
-        dimensions: Record<string, string> = {},
-        t: typeof Babel.types
-    ) {
-        const openingNode = el.openingElement.name;
-        const isJSXIdentifierOpen = t.isJSXIdentifier(openingNode);
-
-        // Fix casing for openingElement
-        if (isJSXIdentifierOpen) {
-            openingNode.name = convertAttributeCasing(openingNode.name);
-        }
-
-        const closingNode = el.closingElement?.name;
-        const isJSXIdentifierClose = t.isJSXIdentifier(closingNode);
-
-        // Fix casing for closingElement
-        if (isJSXIdentifierClose) {
-            closingNode.name = convertAttributeCasing(closingNode.name);
-        }
-
-        this.processAttributes(el, dimensions, t);
-    }
-
-    /**
-     * Recursively traverses the children of a JSXElement and applies `transformElement`
-     * to each child that is itself a JSXElement.
-     *
-     * @param t - Babel types helper.
-     * @param jsxElement - Parent JSXElement whose children will be transformed.
-     * @param dimensions - Optional object to propagate width/height info through child elements.
-     */
-    private traverseAndTransformChildren(
-        t: typeof Babel.types,
-        jsxElement: Babel.types.JSXElement,
-        dimensions: Record<string, string> = {}
-    ) {
-        for (const child of jsxElement.children) {
-            if (t.isJSXElement(child)) {
-                this.transformElement(child, dimensions, t);
-            }
-        }
-    }
-
-    /**
-     * Processes and transforms all attributes of a given JSXElement:
-     * - Removes invalid or unsupported attributes.
-     * - Normalizes attribute casing and naming.
-     * - Consolidates transform-related attributes into a single `transform` string.
-     * - Extracts dimensions and stores them in the provided `dimensions` object.
-     * - Recursively applies transformations to child elements.
-     *
-     * @param jsxElement - JSXElement whose attributes are to be processed.
-     * @param dimensions - Optional object to collect extracted width/height info.
-     * @param t - Babel types helper.
-     */
-    private processAttributes(
-        jsxElement: Babel.types.JSXElement,
-        dimensions: Record<string, string> = {},
-        t: typeof Babel.types
-    ) {
-        const el = jsxElement.openingElement;
-        const name = getNodeName(t, el);
-        const transformsArray: { name: string; value: string | number }[] = [];
-        const attributes = Array.from(el.attributes.entries()).reverse();
-
-        for (const [index, attr] of attributes) {
-            try {
-                if (!t.isJSXAttribute(attr)) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                if (!t.isJSXIdentifier(attr.name)) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                // Handle RN style attribute & non-supported attributes
-                const rnAttributesHandled = handleRNSpecificAttributes(
-                    t,
-                    attr,
-                    attr.name.name
-                );
-
-                if (rnAttributesHandled) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                // Validate whether the attribute is valid
-                const { attrName, isInvalidAttribute } = validateAttribute(
-                    attr.name.name
-                );
-
-                if (isInvalidAttribute) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                /* If we reach this point we know we have a valid attribute name */
-
-                // Handle SVG dimensions
-                const dimensionsHandled = handleSvgDimensions(
-                    t,
-                    attr,
-                    attrName,
-                    dimensions,
-                    name
-                );
-
-                if (dimensionsHandled) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                // Set the formatted attibute name to our cloned element
-                attr.name.name = attrName;
-
-                // Handle array attributes
-                const arrayAttributesHandled = handleArrayAttributes(
-                    t,
-                    attr,
-                    attrName
-                );
-
-                if (arrayAttributesHandled) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                // Handle separate transform attributes
-                const separateTransformAttributesHandled = handleSeparateTransformAttributes(
-                    t,
-                    attr,
-                    attrName,
-                    transformsArray
-                );
-
-                if (separateTransformAttributesHandled) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                // Handle joined transform attributes
-                const joinedTransformAttributesHandled = handleJoinedTranformAttributes(
-                    t,
-                    attr,
-                    attrName,
-                    transformsArray
-                );
-
-                if (joinedTransformAttributesHandled) {
-                    el.attributes.splice(index, 1);
-                    continue;
-                }
-
-                handleRegularAttributes(t, attr);
-            } catch (error) {
-                console.error('ReactNativeSVG[processAttributes]: ', error);
-            }
-        }
-
-        // Create & Set a new transform attribute based on the element's transform attributes
-        buildTransformStringAttribute(el, transformsArray);
-
-        // Goes through an elemnts children and transforms its properties
-        // Goes through an elements children and transforms its properties
-        this.traverseAndTransformChildren(t, jsxElement, dimensions);
-    }
 }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index 8a9fa51ca..37af153dc 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -107,9 +107,10 @@ export function handleSvgDimensions(
     attr: Babel.types.JSXAttribute,
     attrName: string,
     dimensions: Record<string, string> = {},
-    nodeName: string | null
+    nodeName: string | null,
+    expectedName: string
 ) {
-    if (nodeName !== 'svg') {
+    if (nodeName !== expectedName) {
         return false;
     }
 
@@ -117,7 +118,8 @@ export function handleSvgDimensions(
 
     if (dimensionAttributes.includes(attrName)) {
         const result = getJSXAttributeData(t, attr);
-        // IMPROVEMENT: if it's a variable try to find it in the closure
+
+        // IMPROVEMENT: If it's a variable try to find it in the closure
         if (result.value) {
             attr.value = t.stringLiteral(result.value.toString());
             dimensions[attrName] = attr.value.value;

From cf5bf16500df34eb9bc312e1a51c8ecb220a5f9c Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 3 Oct 2025 16:09:03 +0100
Subject: [PATCH 08/35] Add babel plugin Support for SVGUri

---
 .../handlers/HandlerResolver.ts               | 22 +++--
 .../handlers/UriSvgHandler.ts                 | 97 +++++++++++++++++++
 2 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
index 165d78c4d..baf55807f 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/HandlerResolver.ts
@@ -9,6 +9,7 @@ import type * as Babel from '@babel/core';
 import { LocalSvgHandler } from './LocalSvgHandler';
 import { RNSvgHandler } from './RNSvgHandler';
 import type { SvgHandler } from './SvgHandler';
+import { UriSvgHandler } from './UriSvgHandler';
 
 type Resolver = () => SvgHandler;
 
@@ -37,6 +38,7 @@ export class HandlerResolver {
 
         HandlerResolver.registry = {
             RNSvgHandler: () => new RNSvgHandler(t, path, name),
+            UriSvgHandler: () => new UriSvgHandler(t, path, name),
             LocalSvgHandler: () =>
                 new LocalSvgHandler(t, path, name, localSvgMap)
         };
@@ -55,16 +57,20 @@ export class HandlerResolver {
 
         const { name, localSvgMap } = this.dependencies;
 
-        if (name === 'Svg') {
-            return HandlerResolver.registry.RNSvgHandler();
-        }
+        switch (name) {
+            case 'Svg': {
+                return HandlerResolver.registry.RNSvgHandler();
+            }
 
-        // TODO: SvgUri
+            case 'SvgUri': {
+                return HandlerResolver.registry.UriSvgHandler();
+            }
 
-        if (localSvgMap[name]) {
-            return HandlerResolver.registry.LocalSvgHandler();
+            default: {
+                return localSvgMap[name]
+                    ? HandlerResolver.registry.LocalSvgHandler()
+                    : null;
+            }
         }
-
-        return null;
     }
 }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
new file mode 100644
index 000000000..f8745acec
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
@@ -0,0 +1,97 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type * as Babel from '@babel/core';
+
+import { getNodeName } from '../../../utils';
+import { handleSvgDimensions } from '../processing/attributes';
+
+import type { SvgHandler } from './SvgHandler';
+
+export class UriSvgHandler implements SvgHandler {
+    constructor(
+        private types: typeof Babel.types,
+        private path: Babel.NodePath<Babel.types.JSXElement>,
+        private name: string
+    ) {
+        // no-op
+    }
+
+    /**
+     * Retrieves and returns the contents of a local SVG file corresponding to the JSXElement tag name.
+     * If the file hasn't been read yet, it reads the SVG content from disk and caches it in `localSvgMap`.
+     * Also extracts and stores width/height dimensions from the JSX attributes into the `dimensions` object.
+     *
+     * @param dimensions - Object to collect extracted width/height info.
+     * @returns Raw SVG string content from the local file, or undefined if the tag is not found in `localSvgMap`.
+     */
+    transformSvgNode(dimensions: Record<string, string>) {
+        const uri = this.processAttributes(
+            this.types,
+            this.path.node,
+            dimensions
+        );
+
+        // const clone = this.types.cloneNode(this.path.node, true);
+        //
+        // this.transformElement(this.types, clone, dimensions);
+        // this.setNamespace(this.types, clone);
+        // const output = generate(clone).code;
+
+        return uri;
+
+        // return this.localSvgMap[this.name].content;
+    }
+
+    /**
+     * Processes the attributes of a JSXElement to extract relevant SVG metadata.
+     * Specifically identifies and handles dimension-related attributes (e.g., width, height),
+     * storing them into the provided `dimensions` object. Ignores spread attributes.
+     *
+     * @param t - Babel types helper.
+     * @param jsxElement - The JSXElement whose attributes will be processed.
+     * @param dimensions - Object to collect extracted width/height info.
+     */
+    private processAttributes(
+        t: typeof Babel.types,
+        jsxElement: Babel.types.JSXElement,
+        dimensions: Record<string, string>
+    ) {
+        const el = jsxElement.openingElement;
+
+        let uri: string | undefined;
+
+        for (const attr of el.attributes) {
+            if (t.isJSXSpreadAttribute(attr)) {
+                continue;
+            }
+
+            const attrName = getNodeName(t, attr);
+            if (!attrName) {
+                continue;
+            }
+
+            // Handle SVG dimensions
+            handleSvgDimensions(
+                t,
+                attr,
+                attrName,
+                dimensions,
+                this.name,
+                this.name
+            );
+
+            if (attrName === 'uri') {
+                if (t.isStringLiteral(attr.value)) {
+                    uri = attr.value.value;
+                }
+                console.log('attr: ', JSON.stringify(attr, null, 2));
+            }
+        }
+
+        return uri;
+    }
+}

From 087f8e8ba0d9fea7d8554de80eb391164ad045ce Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 3 Oct 2025 16:59:54 +0100
Subject: [PATCH 09/35] Add script to generate assets folder in session replay
 package

---
 .gitignore                                    |  3 ++
 ...DatadogSDKReactNativeSessionReplay.podspec |  2 ++
 .../react-native-session-replay/package.json  |  7 +++-
 .../scripts/build-assets.js                   | 32 +++++++++++++++++++
 yarn.lock                                     | 17 ++++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-session-replay/scripts/build-assets.js

diff --git a/.gitignore b/.gitignore
index a18501839..464a95953 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,3 +100,6 @@ example/android/app/src/main/assets/index.android*
 
 # Credentials for example app
 datadog-ci.json
+
+# Session Replay assets
+packages/react-native-session-replay/assets/*
diff --git a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
index 781e62881..941880f9d 100644
--- a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
+++ b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
@@ -16,6 +16,8 @@ Pod::Spec.new do |s|
 
   s.source_files = "ios/Sources/*.{h,m,mm,swift}"
 
+  s.resources = ['assets/assets.json', 'assets/assets.bin']
+
   s.dependency "React-Core"
 
   # /!\ Remember to keep the version in sync with DatadogSDKReactNative.podspec
diff --git a/packages/react-native-session-replay/package.json b/packages/react-native-session-replay/package.json
index 652bb486b..5d4b7e55a 100644
--- a/packages/react-native-session-replay/package.json
+++ b/packages/react-native-session-replay/package.json
@@ -19,6 +19,7 @@
     "files": [
         "src/**",
         "lib/**",
+        "assets/**",
         "scripts/**",
         "android/build.gradle",
         "android/detekt.yml",
@@ -41,7 +42,8 @@
     "scripts": {
         "test": "jest",
         "lint": "eslint .",
-        "prepare": "rm -rf lib && yarn bob build",
+        "build:assets": "node scripts/build-assets.js",
+        "prepare": "rm -rf lib && yarn build:assets && yarn bob build",
         "postinstall": "node scripts/set-ios-rn-version.js"
     },
     "peerDependencies": {
@@ -89,5 +91,8 @@
         "android": {
             "javaPackageName": "com.datadog.reactnative.sessionreplay"
         }
+    },
+    "dependencies": {
+        "chokidar": "^4.0.3"
     }
 }
diff --git a/packages/react-native-session-replay/scripts/build-assets.js b/packages/react-native-session-replay/scripts/build-assets.js
new file mode 100644
index 000000000..67c170543
--- /dev/null
+++ b/packages/react-native-session-replay/scripts/build-assets.js
@@ -0,0 +1,32 @@
+/* Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+const assetsDir = path.resolve(__dirname, '..', 'assets');
+const binPath = path.join(assetsDir, 'assets.bin');
+const jsonPath = path.join(assetsDir, 'assets.json');
+
+function ensureAssets() {
+    if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+    }
+
+    // Create empty .bin if missing
+    if (!fs.existsSync(binPath)) {
+        fs.writeFileSync(binPath, Buffer.alloc(0));
+        console.log('[build-assets] Created', binPath);
+    }
+
+    // Create empty .json if missing
+    if (!fs.existsSync(jsonPath)) {
+        fs.writeFileSync(jsonPath, JSON.stringify({}, null, 2));
+        console.log('[build-assets] Created', jsonPath);
+    }
+}
+
+ensureAssets();
diff --git a/yarn.lock b/yarn.lock
index 0166da516..a69a7e1f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3785,6 +3785,7 @@ __metadata:
   resolution: "@datadog/mobile-react-native-session-replay@workspace:packages/react-native-session-replay"
   dependencies:
     "@testing-library/react-native": 7.0.2
+    chokidar: ^4.0.3
     react-native-builder-bob: 0.26.0
   peerDependencies:
     react: ">=16.13.1"
@@ -9500,6 +9501,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: ^4.0.1
+  checksum: a8765e452bbafd04f3f2fad79f04222dd65f43161488bb6014a41099e6ca18d166af613d59a90771908c1c823efa3f46ba36b86ac50b701c20c1b9908c5fe36e
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -18758,6 +18768,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 3242ee125422cb7c0e12d51452e993f507e6ed3d8c490bc8bf3366c5cdd09167562224e429b13e9cb2b98d4b8b2b11dc100d3c73883aa92d657ade5a21ded004
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"

From 027a31b8201f81a375650a11e857c69fcbda49ec Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 3 Oct 2025 17:05:03 +0100
Subject: [PATCH 10/35] Add metro plugin to session replay package

---
 .../react-native-session-replay/package.json  | 13 +++
 .../src/metro/index.ts                        | 75 ++++++++++++++
 .../src/metro/processing.ts                   | 99 +++++++++++++++++++
 .../src/metro/utils.ts                        | 17 ++++
 4 files changed, 204 insertions(+)
 create mode 100644 packages/react-native-session-replay/src/metro/index.ts
 create mode 100644 packages/react-native-session-replay/src/metro/processing.ts
 create mode 100644 packages/react-native-session-replay/src/metro/utils.ts

diff --git a/packages/react-native-session-replay/package.json b/packages/react-native-session-replay/package.json
index 5d4b7e55a..b471099ac 100644
--- a/packages/react-native-session-replay/package.json
+++ b/packages/react-native-session-replay/package.json
@@ -36,6 +36,19 @@
     "react-native": "src/index",
     "source": "src",
     "module": "lib/module/index",
+    "exports": {
+        ".": {
+            "import": "./lib/module/index.js",
+            "require": "./lib/commonjs/index.js",
+            "types": "./lib/typescript/index.d.ts"
+        },
+        "./metro": {
+            "import": "./lib/module/metro/index.js",
+            "require": "./lib/commonjs/metro/index.js",
+            "types": "./lib/typescript/metro/index.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
     "publishConfig": {
         "access": "public"
     },
diff --git a/packages/react-native-session-replay/src/metro/index.ts b/packages/react-native-session-replay/src/metro/index.ts
new file mode 100644
index 000000000..4c7b26325
--- /dev/null
+++ b/packages/react-native-session-replay/src/metro/index.ts
@@ -0,0 +1,75 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import chokidar from 'chokidar';
+import fs from 'fs';
+import path from 'path';
+
+import { mergeSvgAssets } from './processing';
+import { debounce } from './utils';
+
+let watching = false;
+
+export function withSessionReplayAggregator(metroConfig: any): any {
+    const originalReporter = metroConfig.reporter;
+
+    const assetsDir = path.resolve(__dirname, '../../../assets');
+
+    if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+    }
+
+    const debounceMerge = debounce(() => {
+        try {
+            mergeSvgAssets(assetsDir);
+        } catch (error) {
+            console.warn('[SessionReplayAggregator] merge failed:', error);
+        }
+    }, 300);
+
+    // Prevent potential multiple watchers if metro loads the config multiple times
+    if (!watching) {
+        watching = true;
+        chokidar
+            .watch(assetsDir, {
+                // Skip events for files that already exist
+                ignoreInitial: true,
+                depth: 0,
+                awaitWriteFinish: {
+                    // Wait 200ms after last change
+                    stabilityThreshold: 200,
+                    // Check every 50ms
+                    pollInterval: 50
+                }
+            })
+            .on('add', file => {
+                if (!file.endsWith('.svg')) {
+                    return;
+                }
+
+                debounceMerge();
+            });
+    }
+
+    return {
+        ...metroConfig,
+        reporter: {
+            update(event: any) {
+                if (originalReporter?.update) {
+                    originalReporter.update(event);
+                }
+
+                // https://github.com/facebook/metro/blob/main/packages/metro/src/lib/reporting.js
+                if (
+                    event.type === 'bundle_build_done' ||
+                    event.type === 'transformer_load_done'
+                ) {
+                    mergeSvgAssets(assetsDir);
+                }
+            }
+        }
+    };
+}
diff --git a/packages/react-native-session-replay/src/metro/processing.ts b/packages/react-native-session-replay/src/metro/processing.ts
new file mode 100644
index 000000000..3db12e865
--- /dev/null
+++ b/packages/react-native-session-replay/src/metro/processing.ts
@@ -0,0 +1,99 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+type SvgIndexEntry = {
+    offset: number;
+    length: number;
+};
+
+type SvgIndex = Record<string, SvgIndexEntry>;
+
+export function mergeSvgAssets(assetsDir: string) {
+    // const assetsDir = 'node_modules/@datadog/mobile-react-native-session-replay/assets'
+    const binName = 'assets.bin';
+    const jsonName = 'assets.json';
+
+    const binPath = path.resolve(assetsDir, binName);
+    const jsonPath = path.resolve(assetsDir, jsonName);
+
+    let index: SvgIndex = {};
+    let offset = 0;
+
+    if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+    }
+
+    if (fs.existsSync(binPath) && fs.existsSync(jsonPath)) {
+        try {
+            index = JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as SvgIndex;
+            offset = fs.statSync(binPath).size;
+        } catch (err) {
+            console.warn(
+                '[mergeSvgAssets] Failed to read index, starting fresh:',
+                err
+            );
+
+            index = {};
+            offset = 0;
+
+            if (fs.existsSync(binPath)) {
+                fs.unlinkSync(binPath);
+            }
+            if (fs.existsSync(jsonPath)) {
+                fs.unlinkSync(jsonPath);
+            }
+        }
+    } else {
+        if (fs.existsSync(binPath)) {
+            fs.unlinkSync(binPath);
+        }
+        if (fs.existsSync(jsonPath)) {
+            fs.unlinkSync(jsonPath);
+        }
+    }
+
+    const files = fs.readdirSync(assetsDir).sort();
+    let added = 0;
+
+    for (const f of files) {
+        if (f === binName || f === jsonName) {
+            continue;
+        }
+
+        const id = path.basename(f, path.extname(f));
+        if (index[id]) {
+            continue;
+        }
+
+        try {
+            const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
+            const buf = Buffer.from(svg, 'utf8');
+            const length = buf.length;
+
+            fs.appendFileSync(binPath, buf);
+            index[id] = { offset, length };
+            offset += length;
+            added++;
+        } catch (err) {
+            console.warn(
+                `[SessionReplayAggregator] Failed to process ${f}:`,
+                err
+            );
+        }
+    }
+
+    fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
+    if (added > 0) {
+        console.log(
+            `[SessionReplayAggregator] Packed ${added} new Session Replay SVG assets → total: ${
+                Object.keys(index).length
+            }`
+        );
+    }
+}
diff --git a/packages/react-native-session-replay/src/metro/utils.ts b/packages/react-native-session-replay/src/metro/utils.ts
new file mode 100644
index 000000000..637de752a
--- /dev/null
+++ b/packages/react-native-session-replay/src/metro/utils.ts
@@ -0,0 +1,17 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+export function debounce<T extends (...args: any[]) => void>(
+    fn: T,
+    ms: number
+): T {
+    let timer: NodeJS.Timeout;
+
+    return ((...args: Parameters<T>) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), ms);
+    }) as T;
+}

From 8f788194249051943a53b941825f6294b6817370 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 15:52:32 +0100
Subject: [PATCH 11/35] Ensure session replay package is found before running
 babel SVG processing

---
 .../react-native-babel-plugin/src/index.ts    | 18 +++++--
 .../src/libraries/react-native-svg/index.ts   | 17 ++-----
 .../react-native-svg/processing/fs.ts         | 49 +++++++++++++++++--
 .../src/types/general.ts                      |  2 +-
 4 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index f46d2f647..e4e6face0 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -13,6 +13,7 @@ import {
     insertRumActionImport
 } from './actions/rum';
 import { defaultPluginOptions } from './constants';
+import { getAssetsPath } from './libraries/react-native-svg/processing/fs';
 import { ReactNativeSVG } from './libraries/react-native-svg';
 import type {
     PluginAPI,
@@ -34,12 +35,23 @@ export default declare(
             }
         };
 
-        let reactNativeSVG: ReactNativeSVG;
+        let reactNativeSVG: ReactNativeSVG | null = null;
+
+        let assetsPath: string | null = null;
 
         return {
             pre() {
-                // TODO: only initialize once
-                reactNativeSVG = new ReactNativeSVG(api.types, this.cwd);
+                if (!assetsPath) {
+                    assetsPath = getAssetsPath();
+                }
+
+                if (!reactNativeSVG && assetsPath) {
+                    reactNativeSVG = new ReactNativeSVG(
+                        api.types,
+                        process.cwd(),
+                        assetsPath
+                    );
+                }
             },
             visitor: {
                 Program: {
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 8eb5846d6..6fce1705e 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -17,11 +17,6 @@ import { v4 as uuidv4 } from 'uuid';
 import { getNodeName } from '../../utils';
 
 import { HandlerResolver } from './handlers/HandlerResolver';
-import {
-    clearAssetsDir,
-    ensureAssetsDir,
-    getAssetsPath
-} from './processing/fs';
 
 type SvgOffset = {
     start: number;
@@ -31,18 +26,16 @@ type SvgOffset = {
 export class ReactNativeSVG {
     svgMap: Record<string, { file: string; [key: string]: string }> = {};
 
-    assetsPath: string;
-
     svgOffset: Record<string, SvgOffset> = {};
 
     localSvgMap: Record<string, { path: string; content?: string }> = {};
 
-    constructor(private t: typeof Babel.types, private rootDir: string) {
-        this.assetsPath = getAssetsPath();
+    constructor(
+        private t: typeof Babel.types,
+        private rootDir: string,
+        private assetsPath: string
+    ) {
         this.buildSvgMap();
-
-        ensureAssetsDir(this.assetsPath);
-        clearAssetsDir(this.assetsPath);
     }
 
     /**
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
index 0c50b11b8..8d0bfcd34 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
@@ -7,6 +7,43 @@
 import fs from 'fs';
 import path from 'path';
 
+/**
+ * Finds the module path by walking up the directory tree.
+ * It starts with the current directory and goes up the tree in case we're dealing with monorepos.
+ *
+ * @param moduleName - The name of the module to find.
+ * @param startPath - The directory to start searching from (defaults to cwd).
+ * @returns The absolute path to the module, or null if not found.
+ */
+function findModulePath(
+    moduleName: string,
+    startPath: string = process.cwd()
+): string | null {
+    const maxDepth = 5;
+    let depth = 0;
+    let currentPath = startPath;
+
+    while (depth < maxDepth) {
+        const modulePath = path.join(currentPath, 'node_modules', moduleName);
+
+        if (fs.existsSync(modulePath)) {
+            return modulePath;
+        }
+
+        const parentPath = path.dirname(currentPath);
+
+        // Reached the root without finding the module
+        if (parentPath === currentPath) {
+            break;
+        }
+
+        currentPath = parentPath;
+        depth++;
+    }
+
+    return null;
+}
+
 /**
  * Determines the output path for storing transformed SVG assets.
  * In production mode (no `pluginDev` env flag), it targets the Session Replay node module.
@@ -16,11 +53,16 @@ import path from 'path';
  */
 export function getAssetsPath() {
     const hasDevFlag = process.env.pluginDev;
-    const modulePath =
-        'node_modules/@datadog/mobile-react-native-session-replay';
+    const moduleName = '@datadog/mobile-react-native-session-replay';
 
     if (!hasDevFlag) {
-        return path.resolve(modulePath);
+        const modulePath = findModulePath(moduleName);
+
+        if (!modulePath) {
+            return null;
+        }
+
+        return path.join(modulePath, 'assets');
     }
 
     return path.resolve('./assets');
@@ -60,3 +102,4 @@ export function clearAssetsDir(assetsPath: string) {
         console.error('[clearAssetsDir]: ', error);
     }
 }
+
diff --git a/packages/react-native-babel-plugin/src/types/general.ts b/packages/react-native-babel-plugin/src/types/general.ts
index ecc0e74db..a8df98066 100644
--- a/packages/react-native-babel-plugin/src/types/general.ts
+++ b/packages/react-native-babel-plugin/src/types/general.ts
@@ -44,7 +44,7 @@ export type PluginPassState = Babel.PluginPass & {
     memoization?: Record<string, string>;
     hasValidTapAction?: boolean;
     trackedComponents?: Record<string, Omit<TrackedComponent, 'name'>>;
-    reactNativeSVG?: ReactNativeSVG;
+    reactNativeSVG?: ReactNativeSVG | null;
 };
 
 export type PluginResult = Babel.PluginObj<Babel.PluginPass>;

From b6a6bb9be28ffedc7b00c35aa44c7ccf5b65d545 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 15:56:41 +0100
Subject: [PATCH 12/35] Update 'DdPrivacyView' spec and attributes (JS/Native)

---
 .../sessionreplay/views/DdPrivacyView.kt      | 10 +++++++
 .../views/DdPrivacyViewManager.kt             | 13 +++++++++
 .../views/DdPrivacyViewManager.kt             | 12 ++++++++
 .../ios/Sources/DdPrivacyViewFabric.h         | 28 +++++++++++++++++++
 .../ios/Sources/DdPrivacyViewFabric.mm        | 26 ++++++++++++++---
 .../ios/Sources/DdPrivacyViewPaper.m          | 24 ++++++++++++++++
 .../SessionReplayView/PrivacyView.tsx         | 11 ++++++++
 .../src/specs/DdPrivacyViewNativeComponent.ts |  9 ++++++
 .../src/types/DdPrivacyView.ts                |  9 ++++++
 9 files changed, 138 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.h

diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
index 2a98ed9ef..16b7c50a2 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
@@ -50,6 +50,16 @@ class DdPrivacyView(context: Context) : ReactViewGroup(context) {
             this.setTag(R.id.datadog_hidden, value)
         }
 
+    /**
+     * Defines an ID value from JS side to uniquely identify a view on both sides.
+     */
+    var nativeID: String? = null
+
+    /**
+     * Defines a set of attributes used for transformations
+     */
+    var attributes: Map<String, String>? = null
+
     init {
         this.setTag(R.id.datadog_hidden, this.hide)
         this.setTag(R.id.datadog_image_privacy, this.imagePrivacy)
diff --git a/packages/react-native-session-replay/android/src/newarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt b/packages/react-native-session-replay/android/src/newarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
index 7e87dce2b..e933b328a 100644
--- a/packages/react-native-session-replay/android/src/newarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
+++ b/packages/react-native-session-replay/android/src/newarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
@@ -7,6 +7,7 @@
 package com.datadog.reactnative.sessionreplay.views
 
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
@@ -47,4 +48,16 @@ class DdPrivacyViewManager(context: ReactApplicationContext) : ViewGroupManager<
     override fun setTouchPrivacy(view: DdPrivacyView?, value: String?) {
         view?.let { view.touchPrivacy = value }
     }
+
+    @ReactProp(name = "nativeID")
+    override fun setNativeID(view: DdPrivacyView?, value: String?) {
+        view?.nativeID = value
+    }
+
+    @ReactProp(name = "attributes")
+    override fun setAttributes(view: DdPrivacyView?, map: ReadableMap?) {
+        view?.attributes = map?.toHashMap()?.mapValues {
+            it.value.toString() ?: ""
+        }
+    }
 }
diff --git a/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt b/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
index 8d682fba0..51585bb32 100644
--- a/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
+++ b/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
@@ -40,4 +40,16 @@ class DdPrivacyViewManager(context: ReactApplicationContext) : ViewGroupManager<
     fun setTouchPrivacy(view: DdPrivacyView?, value: String?) {
         view?.let { view.touchPrivacy = value }
     }
+
+    @ReactProp(name = "nativeID")
+    fun setNativeID(view: DdPrivacyView?, value: String?) {
+        view?.nativeID = value
+    }
+
+    @ReactProp(name = "attributes")
+    fun setAttributes(view: DdPrivacyView?, map: ReadableMap?) {
+        view?.attributes = map?.toHashMap()?.mapValues {
+            it.value.toString() ?: ""
+        }
+    }
 }
diff --git a/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.h b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.h
new file mode 100644
index 000000000..2806cad49
--- /dev/null
+++ b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.h
@@ -0,0 +1,28 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+// DdPrivacyViewFabric.h
+
+#if RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#import <react/renderer/components/DdSDKReactNativeSessionReplay/ComponentDescriptors.h>
+#import <react/renderer/components/DdSDKReactNativeSessionReplay/EventEmitters.h>
+#import <react/renderer/components/DdSDKReactNativeSessionReplay/Props.h>
+#import <react/renderer/components/DdSDKReactNativeSessionReplay/RCTComponentViewHelpers.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+
+#if __has_include("DatadogSDKReactNativeSessionReplay-Swift.h")
+#import <DatadogSDKReactNativeSessionReplay-Swift.h>
+#else
+#import <DatadogSDKReactNativeSessionReplay/DatadogSDKReactNativeSessionReplay-Swift.h>
+#endif
+
+@interface DdPrivacyViewFabric : RCTViewComponentView
+@property (nonatomic, copy) NSString *nativeID;
+@property (nonatomic, copy) NSDictionary<NSString *, NSString *> *attributes;
+@end
+#endif
diff --git a/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.mm b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.mm
index bb65785ca..fb5755b8a 100644
--- a/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.mm
+++ b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewFabric.mm
@@ -18,14 +18,14 @@
 #else
 #import <DatadogSDKReactNativeSessionReplay/DatadogSDKReactNativeSessionReplay-Swift.h>
 #endif
+#import <objc/runtime.h>
+#import "DdPrivacyViewFabric.h"
 
 using namespace facebook::react;
 
-@interface DdPrivacyViewFabric : RCTViewComponentView <RCTDdPrivacyViewViewProtocol>
-@end
-
 @implementation DdPrivacyViewFabric {
     UIView * _view;
+    
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {
@@ -40,15 +40,33 @@ - (instancetype)initWithFrame:(CGRect)frame {
     return self;
 }
 
+
+- (void)setNativeID:(NSString *)nativeID {
+    objc_setAssociatedObject(self, @selector(nativeID), nativeID, OBJC_ASSOCIATION_COPY_NONATOMIC);
+}
+
+- (NSString *)nativeID {
+    return objc_getAssociatedObject(self, @selector(nativeID));
+}
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
     const auto &newProps = *std::static_pointer_cast<DdPrivacyViewProps const>(props);
     
     NSString *text = [NSString stringWithUTF8String:newProps.textAndInputPrivacy.c_str()];
     NSString *image = [NSString stringWithUTF8String:newProps.imagePrivacy.c_str()];
     NSString *touch = [NSString stringWithUTF8String:newProps.touchPrivacy.c_str()];
-
+    NSString *nativeID = [NSString stringWithUTF8String:newProps.nativeID.c_str()];
+    NSMutableDictionary<NSString *, NSString *> *attributesDict = [NSMutableDictionary new];
+    
+    attributesDict[@"type"] = [NSString stringWithUTF8String:newProps.attributes.type.c_str()];
+    attributesDict[@"width"] = [NSString stringWithUTF8String:newProps.attributes.width.c_str()];
+    attributesDict[@"height"] = [NSString stringWithUTF8String:newProps.attributes.height.c_str()];
+    attributesDict[@"hash"] = [NSString stringWithUTF8String:newProps.attributes.hash.c_str()];
+    
     [DdPrivacyOverrider setOverridesFor:self textPrivacy:text imagePrivacy:image touchPrivacy:touch hide:newProps.hide];
+    self.nativeID = nativeID;
+    self.attributes = attributesDict;
     
+    self.accessibilityIdentifier = nativeID;
     [super updateProps:props oldProps:oldProps];
 }
 
diff --git a/packages/react-native-session-replay/ios/Sources/DdPrivacyViewPaper.m b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewPaper.m
index 4972c2e86..6c6af0591 100644
--- a/packages/react-native-session-replay/ios/Sources/DdPrivacyViewPaper.m
+++ b/packages/react-native-session-replay/ios/Sources/DdPrivacyViewPaper.m
@@ -17,6 +17,9 @@ @interface DdPrivacyView : UIView
 @property (nonatomic, strong) NSString *imagePrivacy;
 @property (nonatomic, strong) NSString *touchPrivacy;
 @property (nonatomic, assign) BOOL hide;
+@property (nonatomic, copy) NSString *nativeID;
+
+@property (nonatomic, copy) NSDictionary<NSString *, NSString *> *attributes;
 
 @end
 
@@ -55,6 +58,27 @@ - (UIView *) view {
     [self setPrivacyOverridesFor:view];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSString, DdPrivacyView) {
+    view.nativeID = [RCTConvert NSString:json];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(attributes, NSDictionary, DdPrivacyView) {
+    if (json && [json isKindOfClass:[NSDictionary class]]) {
+        NSMutableDictionary<NSString *, NSString *> *dict = [NSMutableDictionary new];
+        for (id key in json) {
+            id value = json[key];
+            if ([key isKindOfClass:[NSString class]] && [value isKindOfClass:[NSString class]]) {
+                dict[key] = value;
+            } else if ([key isKindOfClass:[NSString class]] && value != [NSNull null]) {
+                dict[key] = [value description];
+            }
+        }
+        view.attributes = dict;
+    } else {
+        view.attributes = nil;
+    }
+}
+
 - (void) setPrivacyOverridesFor:(DdPrivacyView *) view {
     [DdPrivacyOverrider setOverridesFor:view textPrivacy:view.textPrivacy imagePrivacy:view.imagePrivacy touchPrivacy:view.touchPrivacy hide:view.hide];
 }
diff --git a/packages/react-native-session-replay/src/components/SessionReplayView/PrivacyView.tsx b/packages/react-native-session-replay/src/components/SessionReplayView/PrivacyView.tsx
index eeccb5df9..a8a7d7945 100644
--- a/packages/react-native-session-replay/src/components/SessionReplayView/PrivacyView.tsx
+++ b/packages/react-native-session-replay/src/components/SessionReplayView/PrivacyView.tsx
@@ -13,6 +13,7 @@ import type {
     TouchPrivacyLevel
 } from '../../SessionReplay';
 import View from '../../specs/DdPrivacyView';
+import type { Attributes } from '../../types/DdPrivacyView';
 
 type Props = ViewProps & {
     /**
@@ -31,6 +32,14 @@ type Props = ViewProps & {
      * When true, completely hides this view and its children from session replays.
      */
     hide?: boolean;
+    /**
+     * When set, allows the view to be uniquely identifiable in the native layer.
+     */
+    nativeID?: string;
+    /**
+     * When set, allows view attributes to be passed to the native layer.
+     */
+    attributes?: Attributes;
 };
 
 /**
@@ -50,6 +59,7 @@ export function PrivacyView({
     textAndInputPrivacy,
     imagePrivacy,
     touchPrivacy,
+    nativeID,
     hide = false,
     ...props
 }: Props) {
@@ -60,6 +70,7 @@ export function PrivacyView({
             imagePrivacy={imagePrivacy as string}
             touchPrivacy={touchPrivacy as string}
             hide={hide || false}
+            nativeID={nativeID as string}
         >
             {children}
         </View>
diff --git a/packages/react-native-session-replay/src/specs/DdPrivacyViewNativeComponent.ts b/packages/react-native-session-replay/src/specs/DdPrivacyViewNativeComponent.ts
index 6ce5b03b7..dce238718 100644
--- a/packages/react-native-session-replay/src/specs/DdPrivacyViewNativeComponent.ts
+++ b/packages/react-native-session-replay/src/specs/DdPrivacyViewNativeComponent.ts
@@ -7,11 +7,20 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { HostComponent, ViewProps } from 'react-native';
 
+type Attributes = {
+    type?: string;
+    hash?: string;
+    width?: string;
+    height?: string;
+};
+
 interface DdPrivacyViewProps extends ViewProps {
     textAndInputPrivacy: string;
     imagePrivacy: string;
     touchPrivacy: string;
     hide: boolean;
+    nativeID: string;
+    attributes: Attributes;
 }
 
 export default codegenNativeComponent<DdPrivacyViewProps>('DdPrivacyView', {
diff --git a/packages/react-native-session-replay/src/types/DdPrivacyView.ts b/packages/react-native-session-replay/src/types/DdPrivacyView.ts
index 4621af0ca..f89525e51 100644
--- a/packages/react-native-session-replay/src/types/DdPrivacyView.ts
+++ b/packages/react-native-session-replay/src/types/DdPrivacyView.ts
@@ -6,9 +6,18 @@
 
 import type { ViewProps } from 'react-native';
 
+export type Attributes = {
+    type?: string;
+    hash?: string;
+    width?: string;
+    height?: string;
+};
+
 export interface DdPrivacyViewProps extends ViewProps {
     textAndInputPrivacy: string;
     imagePrivacy: string;
     touchPrivacy: string;
     hide: boolean;
+    nativeID: string;
+    attributes: Attributes;
 }

From a7b929483df1b52b59174367bfb89c2a4ed7f901 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 16:12:35 +0100
Subject: [PATCH 13/35] Set android's session replay assets directory

---
 packages/react-native-session-replay/android/build.gradle | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-native-session-replay/android/build.gradle b/packages/react-native-session-replay/android/build.gradle
index 9cb376929..e670a384e 100644
--- a/packages/react-native-session-replay/android/build.gradle
+++ b/packages/react-native-session-replay/android/build.gradle
@@ -158,6 +158,7 @@ android {
         java.srcDirs += ['src/rnpre74/kotlin']
       }
 
+      assets.srcDirs += ['../assets']
     }
     test {
       java.srcDir("src/test/kotlin")

From 95cf44c9e3dd025285c1b704db5d6afb738166c1 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 18:59:30 +0100
Subject: [PATCH 14/35] Refactor logic for identifying SVG views natively

- Wrap identified SVG nodes with a `SessionReplayView.Privacy` view, so
we can pass extra information to the native side (e.g., `width`,
`height`, `hash`, ....)
---
 .../react-native-babel-plugin/src/index.ts    |   1 -
 .../react-native-svg/handlers/RNSvgHandler.ts |   5 +-
 .../handlers/UriSvgHandler.ts                 |  11 +-
 .../src/libraries/react-native-svg/index.ts   | 211 ++++++++++++++++--
 .../react-native-svg/processing/attributes.ts |   2 +-
 5 files changed, 198 insertions(+), 32 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index e4e6face0..2085d67e8 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -57,7 +57,6 @@ export default declare(
                 Program: {
                     enter(path, state) {
                         const pluginState: PluginPassState = state;
-
                         const { path: p, name } = getFileInfo(this);
 
                         if (p?.includes('node_modules')) {
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
index 4988ca707..a2a416e18 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
@@ -171,7 +171,9 @@ export class RNSvgHandler implements SvgHandler {
                 );
 
                 if (rnAttributesHandled) {
-                    el.attributes.splice(index, 1);
+                    if (attr.name.name !== 'style') {
+                        el.attributes.splice(index, 1);
+                    }
                     continue;
                 }
 
@@ -252,7 +254,6 @@ export class RNSvgHandler implements SvgHandler {
         // Create & Set a new transform attribute based on the element's transform attributes
         buildTransformStringAttribute(el, transformsArray);
 
-        // Goes through an elemnts children and transforms its properties
         // Goes through an elements children and transforms its properties
         this.traverseAndTransformChildren(t, jsxElement, dimensions);
     }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
index f8745acec..4004d40d6 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
@@ -21,8 +21,7 @@ export class UriSvgHandler implements SvgHandler {
     }
 
     /**
-     * Retrieves and returns the contents of a local SVG file corresponding to the JSXElement tag name.
-     * If the file hasn't been read yet, it reads the SVG content from disk and caches it in `localSvgMap`.
+     * Retrieves and returns the URI of an SVG corresponding.
      * Also extracts and stores width/height dimensions from the JSX attributes into the `dimensions` object.
      *
      * @param dimensions - Object to collect extracted width/height info.
@@ -35,15 +34,7 @@ export class UriSvgHandler implements SvgHandler {
             dimensions
         );
 
-        // const clone = this.types.cloneNode(this.path.node, true);
-        //
-        // this.transformElement(this.types, clone, dimensions);
-        // this.setNamespace(this.types, clone);
-        // const output = generate(clone).code;
-
         return uri;
-
-        // return this.localSvgMap[this.name].content;
     }
 
     /**
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 6fce1705e..4845b9821 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -7,10 +7,11 @@
 import type * as Babel from '@babel/core';
 import * as parser from '@babel/parser';
 import traverse from '@babel/traverse';
-import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
+import { jsxIdentifier, stringLiteral } from '@babel/types';
+import { createHash } from 'crypto';
 import glob from 'fast-glob';
 import fs from 'fs';
-import { default as pathN } from 'path';
+import pathN from 'path';
 import { optimize } from 'svgo';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -155,7 +156,11 @@ export class ReactNativeSVG {
      *          or `undefined` if no transformation could be performed.
      */
     processItem(path: Babel.NodePath<Babel.types.JSXElement>, name: string) {
-        const dimensions: Record<string, string> = {};
+        const dimensions: { width?: string; height?: string } = {};
+
+        if (path.node?.extra?.__wrappedForSR) {
+            return;
+        }
 
         HandlerResolver.configure({
             t: this.t,
@@ -172,33 +177,203 @@ export class ReactNativeSVG {
         }
 
         const id = uuidv4();
-        const originalNode = path.node;
+
+        const optimized = output.startsWith('http')
+            ? output
+            : optimize(output, {
+                  multipass: true,
+                  plugins: ['preset-default']
+              }).data;
+
+        const hash = createHash('md5').update(optimized, 'utf8').digest('hex');
+
+        const wrapper = this.wrapElementForSessionReplay(
+            this.t,
+            path,
+            id,
+            hash,
+            dimensions
+        );
+        path.replaceWith(wrapper);
+
+        path.node.extra = {
+            __wrappedForSR: true
+        };
 
         this.svgMap[id] = {
-            file: output,
+            file: optimized,
             ...dimensions
         };
 
-        this.setNativeID(originalNode, id);
-
-        const optimized = optimize(output, {
-            multipass: true,
-            plugins: ['preset-default']
-        });
 
         return { original: output, optimized };
     }
 
     /**
-     * Adds a `nativeID` attribute to the JSXElement using the provided UUID.
-     * This helps in referencing or tracking the SVG element in native environments.
+     * Wraps a JSX element with a `SessionReplayView.Privacy` component
+     * and injects metadata attributes used by Session Replay.
+     *
+     * The resulting element is transformed into:
+     * ```tsx
+     * <SessionReplayView.Privacy
+     *   nativeID={id}
+     *   collapsable={false}
+     *   pointerEvents="box-none"
+     *   attributes={{
+     *     type: 'svg',
+     *     hash,
+     *     width,
+     *     height
+     *   }}
+     *   style={{ flexShrink: 1 }}
+     * >
+     *   {originalElement}
+     * </SessionReplayView.Privacy>
+     * ```
+     *
+     * This transformation ensures the element is identifiable on the native side
+     * while preserving its layout and interaction behavior.
      *
-     * @param el - JSXElement to which the `nativeID` should be added.
-     * @param id - UUID string to assign as the `nativeID`.
+     * @param t - Babel types helper used to build and manipulate AST nodes.
+     * @param path - The current JSXElement node path being transformed.
+     * @param id - The unique native identifier assigned to the element.
+     * @param hash - A content hash used to reference the corresponding resource.
+     * @param dimensions - Optional width and height metadata to include in the attributes.
+     * @returns A new `JSXElement` AST node wrapped in `SessionReplayView.Privacy`.
      */
-    private setNativeID(el: Babel.types.JSXElement, id: string) {
-        el.openingElement.attributes.push(
-            jsxAttribute(jSXIdentifier('nativeID'), stringLiteral(id))
+    private wrapElementForSessionReplay(
+        t: typeof Babel.types,
+        path: Babel.NodePath<Babel.types.JSXElement>,
+        id: string,
+        hash: string,
+        dimensions: { width?: string; height?: string }
+    ) {
+        const el = path.node;
+        const { width, height } = dimensions;
+
+        el.extra = {
+            __wrappedForSR: true
+        };
+
+        const styleProp = t.jsxAttribute(
+            t.jsxIdentifier('style'),
+            t.jsxExpressionContainer(
+                t.objectExpression([
+                    t.objectProperty(
+                        t.identifier('flexShrink'),
+                        t.numericLiteral(1)
+                    )
+                ])
+            )
         );
+
+        const attributesProp = t.jsxAttribute(
+            t.jsxIdentifier('attributes'),
+            t.jsxExpressionContainer(
+                t.objectExpression([
+                    t.objectProperty(
+                        t.identifier('type'),
+                        t.stringLiteral('svg')
+                    ),
+                    t.objectProperty(
+                        t.identifier('hash'),
+                        t.stringLiteral(hash)
+                    ),
+                    t.objectProperty(
+                        t.identifier('width'),
+                        width ? t.stringLiteral(width) : t.nullLiteral()
+                    ),
+
+                    t.objectProperty(
+                        t.identifier('height'),
+                        height ? t.stringLiteral(height) : t.nullLiteral()
+                    )
+                ])
+            )
+        );
+
+        const attributesNode = [
+            t.jsxAttribute(jsxIdentifier('nativeID'), stringLiteral(id)),
+            // https://reactnative.dev/docs/view#collapsable
+            t.jsxAttribute(
+                t.jsxIdentifier('collapsable'),
+                t.jsxExpressionContainer(t.booleanLiteral(false))
+            ),
+            // https://reactnative.dev/docs/view#pointerevents
+            t.jsxAttribute(
+                t.jsxIdentifier('pointerEvents'),
+                t.stringLiteral('box-none')
+            ),
+            attributesProp,
+            styleProp
+        ];
+
+        const viewWrapper = t.jsxElement(
+            t.jsxOpeningElement(
+                t.jsxMemberExpression(
+                    t.jsxIdentifier('SessionReplayView'),
+                    t.jsxIdentifier('Privacy')
+                ),
+                attributesNode,
+                false
+            ),
+            t.jsxClosingElement(
+                t.jsxMemberExpression(
+                    t.jsxIdentifier('SessionReplayView'),
+                    t.jsxIdentifier('Privacy')
+                )
+            ),
+            [el],
+            false
+        );
+
+        this.ensureSessionReplayImport(t, path);
+        return viewWrapper;
+    }
+
+    /**
+     * Ensures that the `SessionReplayView` import from
+     * `@datadog/mobile-react-native-session-replay` exists in the file.
+     *
+     * If the import is not already present, this method injects a new
+     * `import { SessionReplayView } from '@datadog/mobile-react-native-session-replay'`
+     * declaration at the top of the program.
+     *
+     * @param t - Babel types helper used to create and check AST nodes.
+     * @param path - The current JSXElement node path from which to locate the program root.
+     */
+    private ensureSessionReplayImport(
+        t: typeof Babel.types,
+        path: Babel.NodePath<Babel.types.JSXElement>
+    ) {
+        const program = path.findParent(p =>
+            p.isProgram()
+        ) as Babel.NodePath<Babel.types.Program>;
+
+        const alreadyImported = program.node.body.some(node => {
+            return (
+                t.isImportDeclaration(node) &&
+                node.source.value ===
+                    '@datadog/mobile-react-native-session-replay' &&
+                node.specifiers.some(
+                    spec =>
+                        t.isImportSpecifier(spec) &&
+                        getNodeName(t, spec.imported) === 'SessionReplayView'
+                )
+            );
+        });
+
+        if (!alreadyImported) {
+            const importDecl = t.importDeclaration(
+                [
+                    t.importSpecifier(
+                        t.identifier('SessionReplayView'),
+                        t.identifier('SessionReplayView')
+                    )
+                ],
+                t.stringLiteral('@datadog/mobile-react-native-session-replay')
+            );
+            program.unshiftContainer('body', importDecl);
+        }
     }
 }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index 37af153dc..7511b9688 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -83,7 +83,7 @@ export function validateAttribute(attrName: string) {
         result.attrName = kebabCase(attrName);
 
         // This means that the attribute name is not a valid SVG attribute and should be ignored
-        if (!svgAttributesKC.includes(attrName)) {
+        if (!svgAttributesKC.includes(result.attrName)) {
             result.isInvalidAttribute = true;
         }
     }

From 72f7b5e3c78e2140109026aaa19eeca4e76863ea Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 19:27:39 +0100
Subject: [PATCH 15/35] Add function to babel plugin that saves extracted SVG
 assets to disk

---
 .../src/libraries/react-native-svg/index.ts   |  2 +
 .../react-native-svg/processing/fs.ts         | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 4845b9821..541998046 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -18,6 +18,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { getNodeName } from '../../utils';
 
 import { HandlerResolver } from './handlers/HandlerResolver';
+import { writeAssetToDisk } from './processing/fs';
 
 type SvgOffset = {
     start: number;
@@ -205,6 +206,7 @@ export class ReactNativeSVG {
             ...dimensions
         };
 
+        writeAssetToDisk(this.assetsPath, id, hash, optimized);
 
         return { original: output, optimized };
     }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
index 8d0bfcd34..052115a7b 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
@@ -103,3 +103,48 @@ export function clearAssetsDir(assetsPath: string) {
     }
 }
 
+/**
+ * Writes a given SVG asset to disk using a hash-based filename.
+ *
+ * The asset is first written to a temporary file (`<nativeID>.svg`) to avoid race conditions
+ * when multiple workers attempt to write simultaneously. Once successfully written,
+ * the file is renamed to `<hash>.svg`. If a file with the same hash already exists,
+ * the temporary file is removed to prevent duplicates.
+ *
+ * @param assetsPath - Absolute path to the assets directory where the file should be stored.
+ * @param nativeID - Unique identifier of the source component or view.
+ * @param hash - Hash string used as the final filename to ensure uniqueness.
+ * @param svgCode - The SVG string content to be written to disk.
+ * @returns `true` if a new file was written, or `false` if the file already existed or an error occurred.
+ */
+export function writeAssetToDisk(
+    assetsPath: string,
+    nativeID: string,
+    hash: string,
+    svgCode: string
+): boolean {
+    try {
+        const tmpPath = path.join(assetsPath, `${nativeID}.svg`);
+        const outputPath = path.join(assetsPath, `${hash}.svg`);
+
+        if (!fs.existsSync(assetsPath)) {
+            fs.mkdirSync(assetsPath, { recursive: true });
+        }
+
+        // Write first to a tmp file to prevent multiple workers from trying to write to the same path
+        fs.writeFileSync(tmpPath, svgCode);
+
+        // Once finished, rename the file
+        // If multiple workers get the same hash, the last one wins, but the content should always be valid
+        if (!fs.existsSync(outputPath)) {
+            fs.renameSync(tmpPath, outputPath);
+            return true;
+        }
+
+        fs.unlinkSync(tmpPath);
+        return false;
+    } catch (error) {
+        console.error('[writeJSONToDisk]: ', error);
+        return false;
+    }
+}

From 6923bdff3f142bdbba53258777829c41c3950541 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Sun, 5 Oct 2025 20:27:41 +0100
Subject: [PATCH 16/35] Add babel plugin option to handle session replay
 functionality

- Add `sessionReplay` option to the plugin, allowing SVG tracking to be
enabled or disabled.
---
 packages/react-native-babel-plugin/README.md       | 14 +++++++++++++-
 .../src/constants/global.ts                        |  3 +++
 packages/react-native-babel-plugin/src/index.ts    |  8 ++++++++
 .../react-native-babel-plugin/src/types/general.ts |  5 +++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-babel-plugin/README.md b/packages/react-native-babel-plugin/README.md
index e83d36fff..200bddb91 100644
--- a/packages/react-native-babel-plugin/README.md
+++ b/packages/react-native-babel-plugin/README.md
@@ -40,10 +40,19 @@ You can configure the plugin to adjust how it processes your code, giving you co
 | Option               | Type   | Default | Description |
 |-----------------------|--------|---------|-------------|
 | `actionNameAttribute` | string | –       | The chosen attribute name to use for action names. |
+| `sessionReplay`          | object | –       | Session Replay options configuration. |
 | `components`          | object | –       | Component tracking configuration. |
 
 ---
 
+#### `sessionReplay` options
+
+| Option          | Type    | Default | Description |
+|-----------------|---------|---------|-------------|
+| `svgTracking`    | boolean | true   | Whether to track SVG assets in the context of Session Replay. |
+
+---
+
 #### `components` options
 
 | Option          | Type    | Default | Description |
@@ -85,8 +94,11 @@ module.exports = {
   plugins: [
     [
       '@datadog/mobile-react-native-babel-plugin',
-      {actionNameAttribute: 'custom-prop-value'},
       {
+        actionNameAttribute: 'custom-prop-value',
+        sessionReplay: {
+          svgTracking: true
+        },
         components: {
           useContent: true,
           useNamePrefix: true,
diff --git a/packages/react-native-babel-plugin/src/constants/global.ts b/packages/react-native-babel-plugin/src/constants/global.ts
index edbefe531..019974356 100644
--- a/packages/react-native-babel-plugin/src/constants/global.ts
+++ b/packages/react-native-babel-plugin/src/constants/global.ts
@@ -9,6 +9,9 @@ export const PluginConstants = {
 } as const;
 
 export const defaultPluginOptions = {
+    sessionReplay: {
+        svgTracking: true
+    },
     components: {
         useContent: true,
         useNamePrefix: true,
diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index 2085d67e8..d49caa24d 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -29,6 +29,10 @@ export default declare(
 
         const options = {
             ...opt,
+            sessionReplay: {
+                ...defaultPluginOptions.sessionReplay,
+                ...opt.sessionReplay
+            },
             components: {
                 ...defaultPluginOptions.components,
                 ...opt.components
@@ -41,6 +45,10 @@ export default declare(
 
         return {
             pre() {
+                if (!options.sessionReplay.svgTracking) {
+                    return;
+                }
+
                 if (!assetsPath) {
                     assetsPath = getAssetsPath();
                 }
diff --git a/packages/react-native-babel-plugin/src/types/general.ts b/packages/react-native-babel-plugin/src/types/general.ts
index a8df98066..df760cb67 100644
--- a/packages/react-native-babel-plugin/src/types/general.ts
+++ b/packages/react-native-babel-plugin/src/types/general.ts
@@ -30,8 +30,13 @@ export type TrackedComponent = {
     }[];
 };
 
+export type SessionReplayOptions = {
+    svgTracking: boolean;
+};
+
 export type PluginOptions = {
     actionNameAttribute?: string;
+    sessionReplay: SessionReplayOptions;
     components: {
         useContent: boolean;
         useNamePrefix: boolean;

From 1bcd89a5026f4dcd10d2536faceb3fc3668cbc8f Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Mon, 6 Oct 2025 15:51:50 +0100
Subject: [PATCH 17/35] Add new session replay react-native android mapper

- Add a new session replay mapper targeting SVG views
---
 .../DdSessionReplayImplementation.kt          |   4 +-
 .../ReactNativeInternalCallback.kt            | 131 ++++++++++++++++++
 ...eactNativeSessionReplayExtensionSupport.kt |   6 +-
 .../mappers/ReactViewGroupMapper.kt           |   1 +
 .../sessionreplay/mappers/SvgViewMapper.kt    | 102 ++++++++++++++
 5 files changed, 241 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt

diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt
index 9a6c1b3c5..ef5467bc4 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt
@@ -49,17 +49,17 @@ class DdSessionReplayImplementation(
             .setImagePrivacy(privacySettings.imagePrivacyLevel)
             .setTouchPrivacy(privacySettings.touchPrivacyLevel)
             .setTextAndInputPrivacy(privacySettings.textAndInputPrivacyLevel)
-            .addExtensionSupport(ReactNativeSessionReplayExtensionSupport(textViewUtils))
+            .addExtensionSupport(ReactNativeSessionReplayExtensionSupport(textViewUtils, internalCallback))
             .let {
                 _SessionReplayInternalProxy(it).setInternalCallback(internalCallback)
             }
 
-
         if (customEndpoint != "") {
             configuration.useCustomEndpoint(customEndpoint)
         }
 
         sessionReplayProvider().enable(configuration.build(), sdkCore)
+
         promise.resolve(null)
     }
 
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
index a287a6b75..135a9456c 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
@@ -8,7 +8,11 @@ package com.datadog.reactnative.sessionreplay
 
 import android.app.Activity
 import com.datadog.android.sessionreplay.SessionReplayInternalCallback
+import com.datadog.android.sessionreplay.SessionReplayInternalResourceQueue
 import com.facebook.react.bridge.ReactContext
+import org.json.JSONException
+import org.json.JSONObject
+import java.io.IOException
 
 /**
  * Responsible for defining the internal callback implementation for react-native that will allow
@@ -17,7 +21,134 @@ import com.facebook.react.bridge.ReactContext
 class ReactNativeInternalCallback(
     private val reactContext: ReactContext,
 ) : SessionReplayInternalCallback {
+    private var resourceQueue: SessionReplayInternalResourceQueue? = null
+
+    companion object {
+        private const val ASSETS_JSON = "assets.json"
+        private const val ASSETS_BIN = "assets.bin"
+    }
+
+    private val jsonObject: JSONObject? = loadAssetsJson()
+
+    /**
+     * Loads and parses the `assets.json` file from the app's assets directory.
+     * The JSON file maps unique asset keys to metadata entries containing
+     * their offset and length inside the `assets.bin` binary file.
+     *
+     * @return A [JSONObject] representing the parsed asset index, or `null` if
+     * the file could not be read or contained invalid JSON.
+     */
+    private fun loadAssetsJson(): JSONObject? {
+        return try {
+            val jsonText = reactContext.assets.open(ASSETS_JSON)
+                .bufferedReader()
+                .use { it.readText() }
+            JSONObject(jsonText)
+        } catch (e: IOException) {
+            null
+        } catch (e: JSONException) {
+            null
+        }
+    }
+
+    /**
+     * Returns the JSON entry for a given asset key, if it exists in the index.
+     *
+     * @param key The unique asset key to look up (as defined in `assets.json`).
+     * @return A [JSONObject] containing the metadata for the asset, or `null` if not found.
+     */
+    fun getJSONEntry(key: String): JSONObject? {
+        val json = jsonObject ?: return null
+        return if (json.has(key)) json.getJSONObject(key) else null
+    }
+
+    /**
+     * Reads the raw byte data from `assets.bin` corresponding to an entry in `assets.json`.
+     * Uses the `offset` and `length` fields in the JSON entry to extract the exact byte
+     * range for the requested asset.
+     *
+     * @param key The unique asset key defined in `assets.json`.
+     * @return A [ByteArray] containing the binary data for the asset, or `null` if the key
+     * is missing or the read operation fails.
+     */
+    fun getEntryData(key: String): ByteArray? {
+        val entry = getJSONEntry(key) ?: return null
+
+        val offset = entry.optInt("offset", -1)
+        val length = entry.optInt("length", -1)
+
+        if (offset < 0 || length <= 0) {
+            return null
+        }
+
+        return try {
+            readAssetBytes(reactContext, offset, length)
+        } catch (e: Exception) {
+            null
+        }
+    }
+
+
+    /**
+     * Reads a specific byte range from the `assets.bin` file.
+     * Skips forward to the given offset and reads `length` bytes.
+     *
+     * @param context The React context used to access the app's assets.
+     * @param offset The byte offset within `assets.bin` to start reading from.
+     * @param length The number of bytes to read.
+     * @return A [ByteArray] containing the requested portion of the binary asset.
+     * @throws IOException If the file cannot be read or skipped to the correct offset.
+     */
+    private fun readAssetBytes(context: ReactContext, offset: Int, length: Int): ByteArray {
+        context.assets.open(ASSETS_BIN).use { input ->
+            var skipped = 0L
+            while (skipped < offset) {
+                val result = input.skip((offset - skipped).toLong())
+                if (result <= 0) throw IOException("Unable to skip to offset $offset in $ASSETS_BIN")
+                skipped += result
+            }
+
+            // Read `length` bytes
+            val buffer = ByteArray(length)
+            var bytesRead = 0
+            while (bytesRead < length) {
+                val read = input.read(buffer, bytesRead, length - bytesRead)
+                if (read == -1) break
+                bytesRead += read
+            }
+            return buffer
+        }
+    }
+
+    /**
+     * Adds a resource item to the current [SessionReplayInternalResourceQueue].
+     *
+     * @param identifier A unique identifier for the resource.
+     * @param resourceData The binary content of the resource to enqueue.
+     * @param mimeType Optional MIME type describing the resource (e.g., `"image/png"` or `"image/svg+xml"`).
+     */
+    override fun addResourceItem(identifier: String, resourceData: ByteArray, mimeType: String?) {
+        this.resourceQueue?.addResourceItem(identifier, resourceData, mimeType)
+    }
+
+    /**
+     * Retrieves the current activity from the React context.
+     * Used by the Session Replay system to access the active UI context when
+     * registering lifecycle listeners.
+     *
+     * @return The currently active [Activity], or `null` if none is available.
+     */
     override fun getCurrentActivity(): Activity? {
         return reactContext.currentActivity
     }
+
+    /**
+     * Sets the resource queue to be used by this callback.
+     *
+     * @param resourceQueue The [SessionReplayInternalResourceQueue] responsible
+     * for handling resources.
+     */
+    override fun setResourceQueue(resourceQueue: SessionReplayInternalResourceQueue) {
+        this.resourceQueue = resourceQueue
+    }
 }
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt
index c2eb3880e..f1e082aba 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt
@@ -15,7 +15,9 @@ import com.datadog.reactnative.sessionreplay.mappers.ReactNativeImageViewMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactTextMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactViewGroupMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactViewModalMapper
+import com.datadog.reactnative.sessionreplay.mappers.SvgViewMapper
 import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
+import com.datadog.reactnative.sessionreplay.views.DdPrivacyView
 import com.facebook.react.views.image.ReactImageView
 import com.facebook.react.views.modal.ReactModalHostView
 import com.facebook.react.views.text.ReactTextView
@@ -24,7 +26,8 @@ import com.facebook.react.views.view.ReactViewGroup
 
 
 internal class ReactNativeSessionReplayExtensionSupport(
-    private val textViewUtils: TextViewUtils
+    private val textViewUtils: TextViewUtils,
+    private val internalCallback: ReactNativeInternalCallback
 ) : ExtensionSupport {
     override fun name(): String {
         return ReactNativeSessionReplayExtensionSupport::class.java.simpleName
@@ -33,6 +36,7 @@ internal class ReactNativeSessionReplayExtensionSupport(
     override fun getCustomViewMappers(): List<MapperTypeWrapper<*>> {
         return listOf(
             MapperTypeWrapper(ReactImageView::class.java, ReactNativeImageViewMapper()),
+            MapperTypeWrapper(DdPrivacyView::class.java, SvgViewMapper(internalCallback)),
             MapperTypeWrapper(ReactViewGroup::class.java, ReactViewGroupMapper()),
             MapperTypeWrapper(ReactTextView::class.java, ReactTextMapper(textViewUtils)),
             MapperTypeWrapper(ReactEditText::class.java, ReactEditTextMapper(textViewUtils)),
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactViewGroupMapper.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactViewGroupMapper.kt
index 78fba8b30..889c1aea7 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactViewGroupMapper.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactViewGroupMapper.kt
@@ -8,6 +8,7 @@ package com.datadog.reactnative.sessionreplay.mappers
 
 import ReactViewBackgroundDrawableUtils
 import com.datadog.android.sessionreplay.recorder.mapper.TraverseAllChildrenMapper
+import com.datadog.reactnative.sessionreplay.ReactNativeInternalCallback
 import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
 import com.facebook.react.views.view.ReactViewGroup
 
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
new file mode 100644
index 000000000..b5b225a6f
--- /dev/null
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
@@ -0,0 +1,102 @@
+package com.datadog.reactnative.sessionreplay.mappers
+
+import ReactViewBackgroundDrawableUtils
+import android.view.View
+import com.datadog.android.api.InternalLogger
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.android.sessionreplay.recorder.MappingContext
+import com.datadog.android.sessionreplay.recorder.mapper.BaseWireframeMapper
+import com.datadog.android.sessionreplay.utils.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.utils.DefaultColorStringFormatter
+import com.datadog.android.sessionreplay.utils.DefaultViewBoundsResolver
+import com.datadog.android.sessionreplay.utils.DefaultViewBoundsResolver.resolveViewGlobalBounds
+import com.datadog.android.sessionreplay.utils.DefaultViewIdentifierResolver
+import com.datadog.android.sessionreplay.utils.DrawableToColorMapper
+import com.datadog.reactnative.sessionreplay.ReactNativeInternalCallback
+import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
+import com.datadog.reactnative.sessionreplay.views.DdPrivacyView
+import java.util.Collections
+
+internal open class SvgViewMapper<T: View>(
+    private val internalCallback: ReactNativeInternalCallback,
+    private val drawableUtils: DrawableUtils =
+        ReactViewBackgroundDrawableUtils()
+): BaseWireframeMapper<T>(
+    viewIdentifierResolver = DefaultViewIdentifierResolver,
+    colorStringFormatter = DefaultColorStringFormatter,
+    viewBoundsResolver = DefaultViewBoundsResolver,
+    drawableToColorMapper = DrawableToColorMapper.getDefault()
+) {
+    private val queuedResourceIds = Collections.synchronizedSet(HashSet<String>())
+
+    override fun map(
+        view: T,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback,
+        internalLogger: InternalLogger
+    ): List<MobileSegment.Wireframe> {
+        val pixelDensity = mappingContext.systemInformation.screenDensity
+        val viewGlobalBounds = resolveViewGlobalBounds(view, pixelDensity)
+        val backgroundDrawable = drawableUtils.getReactBackgroundFromDrawable(view.background)
+
+        val opacity = view.alpha
+
+        val (shapeStyle, border) =
+            if (backgroundDrawable != null) {
+                drawableUtils
+                    .resolveShapeAndBorder(backgroundDrawable, opacity, pixelDensity)
+            } else {
+                null to null
+            }
+
+        val wireframes = mutableListOf<MobileSegment.Wireframe>()
+
+        if (view is DdPrivacyView) {
+            val hash = view.attributes?.get("hash") ?: return wireframes
+
+            val entryData = internalCallback.getEntryData(hash)
+                ?: return wireframes
+
+            // This is always guaranteed to be true due to how the babel plugin transformed the data
+            val subView = view.getChildAt(0) ?: return wireframes
+
+            wireframes.add(MobileSegment.Wireframe.ShapeWireframe(
+                    resolveViewId(view),
+                    viewGlobalBounds.x,
+                    viewGlobalBounds.y,
+                    viewGlobalBounds.width,
+                    viewGlobalBounds.height,
+                    shapeStyle = shapeStyle,
+                    border = border
+                ))
+
+            val imageBounds = resolveViewGlobalBounds(subView, pixelDensity)
+            val imgWireframe = MobileSegment.Wireframe.ImageWireframe(
+                resolveViewId(subView),
+                imageBounds.x,
+                imageBounds.y,
+                imageBounds.width,
+                imageBounds.height,
+                null,
+                null,
+                null,
+                null,
+                hash,
+                "svg+xml",
+                false
+            )
+            wireframes.add(imgWireframe)
+
+            if (!queuedResourceIds.contains(hash)) {
+                queuedResourceIds.add(hash)
+                internalCallback.addResourceItem(
+                    hash,
+                    entryData,
+                    "image/svg+xml"
+                )
+            }
+        }
+
+        return wireframes
+    }
+}

From 834824f9d62d824a3b3529f4ccd24f5e368934b3 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Mon, 6 Oct 2025 16:00:25 +0100
Subject: [PATCH 18/35] Add new session replay react-native iOS node recorder

- Add new session replay node recorder targeting SVG views
---
 .../DdSessionReplayImplementation.swift       |  32 +++-
 .../ios/Sources/SvgViewRecorder.swift         | 162 ++++++++++++++++++
 2 files changed, 191 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift

diff --git a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
index e576cb0ae..ab563585a 100644
--- a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
+++ b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
@@ -10,6 +10,11 @@ import DatadogInternal
 import DatadogSDKReactNative
 import React
 
+struct SVGData: Codable {
+    let offset: Int
+    let length: Int
+}
+
 @objc
 public class DdSessionReplayImplementation: NSObject {
     private lazy var sessionReplay: SessionReplayProtocol = sessionReplayProvider()
@@ -60,9 +65,30 @@ public class DdSessionReplayImplementation: NSObject {
             startRecordingImmediately: startRecordingImmediately,
             customEndpoint: customEndpointURL
         )
-                    
+        
+        let bundle = Bundle(for: DdSessionReplayImplementation.self)
+        var svgMap: [String: SVGData] = [:]
+        
+        if let url = bundle.url(forResource: "assets", withExtension: "json") {
+            do {
+                let data = try Data(contentsOf: url)
+                let decoder = JSONDecoder()
+                svgMap = try decoder.decode([String: SVGData].self, from: data)
+            } catch {
+                consolePrint("Failed to load or decode assets.json", .debug)
+            }
+        }
+        
         sessionReplayConfiguration.setAdditionalNodeRecorders([
-            RCTTextViewRecorder(uiManager: uiManager, fabricWrapper: fabricWrapper)
+            SvgViewRecorder(
+                uiManager: uiManager,
+                fabricWrapper: fabricWrapper,
+                svgMap: svgMap
+            ),
+            RCTTextViewRecorder(
+                uiManager: uiManager,
+                fabricWrapper: fabricWrapper
+            )
         ])
 
         if let core = DatadogSDKWrapper.shared.getCoreInstance() {
@@ -73,7 +99,7 @@ public class DdSessionReplayImplementation: NSObject {
         } else {
             consolePrint("Core instance was not found when initializing Session Replay.", .critical)
         }
-
+        
         resolve(nil)
     }
     
diff --git a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
new file mode 100644
index 000000000..91ea8c47d
--- /dev/null
+++ b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
@@ -0,0 +1,162 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import Foundation
+@_spi(Internal)
+import DatadogSessionReplay
+import DatadogInternal
+import DatadogSDKReactNative
+import UIKit
+import React
+
+
+internal struct ReactNativeSVGResource: SessionReplayResource {
+    let identifier: String
+    let svgContent: String
+    let mimeType: String = "image/svg+xml"
+
+    init(id: String, svgContent: String) {
+        self.identifier = id
+        self.svgContent = svgContent
+    }
+
+    func calculateIdentifier() -> String {
+        return identifier
+    }
+
+    func calculateData() -> Data {
+        return svgContent.data(using: .utf8) ?? Data()
+    }
+}
+
+
+internal class SvgViewRecorder: SessionReplayNodeRecorder {
+    internal var identifier = UUID()
+
+    internal let uiManager: RCTUIManager
+    internal let fabricWrapper: RCTFabricWrapper
+    internal let svgMap: [String: SVGData]
+
+    internal init(uiManager: RCTUIManager, fabricWrapper: RCTFabricWrapper, svgMap: [String: SVGData]) {
+        self.uiManager = uiManager
+        self.fabricWrapper = fabricWrapper
+        self.svgMap = svgMap
+    }
+    
+    func semantics(
+        of view: UIView,
+        with attributes: SessionReplayViewAttributes,
+        in context: SessionReplayViewTreeRecordingContext
+    ) -> SessionReplayNodeSemantics? {
+        
+        if (view.accessibilityIdentifier != nil) {
+            let viewId = context.ids.nodeID(view: view, nodeRecorder: self)
+            let subView = view.subviews[0]
+            
+            if let attrs = view.value(forKey: "attributes") as? [String: String] {
+                let svgId = context.ids.nodeID(view: subView, nodeRecorder: self)
+                let type = attrs["type"]
+                
+                guard let hash = attrs["hash"] else {
+                    return nil
+                }
+                
+                if (type != "svg") {
+                    return nil
+                }
+                
+                let bundle = Bundle(for: SvgViewRecorder.self)
+                if let url = bundle.url(forResource: "assets", withExtension: "bin") {
+                    do {
+                        let data = try Data(contentsOf: url)
+                        guard let svgInfo = svgMap[hash] else {
+                            return nil
+                        }
+                        
+                        let range = svgInfo.offset..<(svgInfo.offset + svgInfo.length)
+                        let svgData = String(data: data.subdata(in: range), encoding: .utf8)
+                        
+                        let svgResource = ReactNativeSVGResource(
+                             id: hash,
+                             svgContent: svgData!
+                         )
+
+                        let contentFrame = CGRect(
+                            origin: attributes.frame.origin,
+                            size: CGSize(width: subView.bounds.width,
+                                         height: subView.bounds.height)
+                        )
+                        
+                        let builder = SvgViewWireframesBuilder(
+                            wireframeID: viewId,
+                            imageWireframeID: svgId,
+                            attributes: attributes,
+                            contentFrame: contentFrame,
+                            svgResource: svgResource,
+                            imagePrivacyLevel: context.recorder.imagePrivacy
+                        )
+                        
+                        let element = SessionReplaySpecificElement(subtreeStrategy: .ignore, nodes: [
+                            SessionReplayNode(viewAttributes: attributes, wireframesBuilder: builder)
+                        ])
+                        
+                        return element
+                    } catch {
+                        return nil
+                    }
+                }
+            }
+        }
+
+        return nil
+    }
+}
+
+internal struct SvgViewWireframesBuilder: SessionReplayNodeWireframesBuilder {
+    let wireframeID: WireframeID
+    
+    var wireframeRect: CGRect {
+        attributes.frame
+    }
+    
+    let imageWireframeID: WireframeID
+    
+    let attributes: SessionReplayViewAttributes
+    
+    let contentFrame: CGRect?
+    
+    let svgResource: ReactNativeSVGResource?
+    
+    let imagePrivacyLevel: ImagePrivacyLevel
+    
+    func buildWireframes(with builder: SessionReplayWireframesBuilder) -> [SRWireframe] {
+        var wireframes = [
+            builder.createShapeWireframe(
+                id: wireframeID,
+                frame: attributes.frame,
+                clip: attributes.clip,
+                borderColor: attributes.layerBorderColor,
+                borderWidth: attributes.layerBorderWidth,
+                backgroundColor: attributes.backgroundColor,
+                cornerRadius: attributes.layerCornerRadius,
+                opacity: attributes.alpha
+            )
+        ]
+        
+        if let svgResource {
+            wireframes.append(
+                builder.createImageWireframe(
+                    id: imageWireframeID,
+                    resource: svgResource,
+                    frame: contentFrame ?? attributes.frame,
+                    clip: attributes.clip
+                )
+            )
+        }
+
+        return wireframes
+    }
+}

From bb71cb1bb3244c9fddb52a3a5e08aead0abc3ab4 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Tue, 7 Oct 2025 12:53:36 +0100
Subject: [PATCH 19/35] Add cli script to babel plugin to handle initial
 resource generation

---
 .../react-native-babel-plugin/package.json    |   3 +
 .../src/cli/generate-sr-assets.ts             | 206 ++++++++++++++++++
 yarn.lock                                     |   2 +
 3 files changed, 211 insertions(+)
 create mode 100644 packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts

diff --git a/packages/react-native-babel-plugin/package.json b/packages/react-native-babel-plugin/package.json
index 3cbc1d7b3..90b7e2c30 100644
--- a/packages/react-native-babel-plugin/package.json
+++ b/packages/react-native-babel-plugin/package.json
@@ -17,6 +17,9 @@
     },
     "license": "Apache-2.0",
     "main": "lib/commonjs/index",
+    "bin": {
+        "datadog-generate-sr-assets": "./lib/commonjs/cli/generate-sr-assets.js"
+    },
     "files": [
         "src/**",
         "lib"
diff --git a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
new file mode 100644
index 000000000..8139bb7b9
--- /dev/null
+++ b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
@@ -0,0 +1,206 @@
+#!/usr/bin/env node
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import { transformSync } from '@babel/core';
+import glob from 'fast-glob';
+import fs from 'fs';
+import path from 'path';
+
+import babelPlugin from '../index';
+import {
+    clearAssetsDir,
+    getAssetsPath
+} from '../libraries/react-native-svg/processing/fs';
+
+type SvgIndexEntry = {
+    offset: number;
+    length: number;
+};
+
+type SvgIndex = Record<string, SvgIndexEntry>;
+
+/**
+ * Merges all individual SVG files into assets.bin and creates an index in assets.json.
+ * This function reads all .svg files from the assets directory and packs them into
+ * a single binary file with an accompanying JSON index for efficient lookup.
+ *
+ * @param assetsDir - Absolute path to the assets directory
+ */
+function mergeSvgAssets(assetsDir: string) {
+    const binName = 'assets.bin';
+    const jsonName = 'assets.json';
+
+    const binPath = path.resolve(assetsDir, binName);
+    const jsonPath = path.resolve(assetsDir, jsonName);
+
+    let index: SvgIndex = {};
+    let offset = 0;
+
+    if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+    }
+
+    if (fs.existsSync(binPath) && fs.existsSync(jsonPath)) {
+        try {
+            index = JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as SvgIndex;
+            offset = fs.statSync(binPath).size;
+        } catch (err) {
+            index = {};
+            offset = 0;
+
+            if (fs.existsSync(binPath)) {
+                fs.unlinkSync(binPath);
+            }
+            if (fs.existsSync(jsonPath)) {
+                fs.unlinkSync(jsonPath);
+            }
+        }
+    } else {
+        if (fs.existsSync(binPath)) {
+            fs.unlinkSync(binPath);
+        }
+        if (fs.existsSync(jsonPath)) {
+            fs.unlinkSync(jsonPath);
+        }
+    }
+
+    const files = fs.readdirSync(assetsDir).sort();
+    let added = 0;
+
+    for (const f of files) {
+        if (f === binName || f === jsonName) {
+            continue;
+        }
+
+        const id = path.basename(f, path.extname(f));
+        if (index[id]) {
+            continue;
+        }
+
+        try {
+            const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
+            const buf = Buffer.from(svg, 'utf8');
+            const length = buf.length;
+
+            fs.appendFileSync(binPath, buf);
+            index[id] = { offset, length };
+            offset += length;
+            added++;
+        } catch (err) {
+            console.warn(`[mergeSvgAssets] Failed to process ${f}:`, err);
+        }
+    }
+
+    fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
+    if (added > 0) {
+        console.log(
+            `\nPacked ${added} new Session Replay assets -> total: ${
+                Object.keys(index).length
+            }`
+        );
+    }
+}
+
+/**
+ * CLI tool to pre-generate SVG assets for Session Replay.
+ *
+ * This command scans the user's codebase for React components that use SVG elements,
+ * processes them through the Datadog Babel plugin, and extracts assets
+ * into the Session Replay module's assets directory.
+ *
+ * This should be ran before `pod install` on iOS to ensure that native asset
+ * references are available during the build process.
+ *
+ * Usage:
+ *   npx @datadog/mobile-react-native-babel-plugin generate-sr-assets
+ *   or
+ *   npx datadog-generate-sr-assets
+ */
+function generateSRAssets() {
+    const rootDir = process.cwd();
+    const assetsPath = getAssetsPath();
+
+    if (!assetsPath) {
+        process.exit(0);
+    }
+
+    console.log(`Scanning for session replay assets in ${rootDir}...`);
+
+    // Clear existing assets to ensure a fresh state
+    clearAssetsDir(assetsPath);
+
+    const files = glob.sync(['**/*.{js,jsx,ts,tsx}'], {
+        cwd: rootDir,
+        absolute: true,
+        ignore: [
+            '**/node_modules/**',
+            '**/lib/**',
+            '**/dist/**',
+            '**/build/**',
+            '**/*.d.ts',
+            '**/*.test.*',
+            '**/*.spec.*',
+            '**/*.config.js',
+            '**/__tests__/**',
+            '**/__mocks__/**'
+        ]
+    });
+
+    let errorCount = 0;
+    const errors: Array<{ file: string; error: string }> = [];
+
+    for (const file of files) {
+        try {
+            const code = fs.readFileSync(file, 'utf8');
+
+            // Transform the file using the Babel plugin with SVG tracking enabled
+            transformSync(code, {
+                filename: file,
+                plugins: [
+                    [
+                        babelPlugin,
+                        {
+                            sessionReplay: {
+                                svgTracking: true
+                            }
+                        }
+                    ]
+                ],
+                presets: [
+                    [
+                        '@babel/preset-typescript',
+                        { isTSX: true, allExtensions: true }
+                    ],
+                    '@babel/preset-react'
+                ],
+                // Don't generate actual output, we just the asset generation
+                code: false,
+                ast: false
+            });
+        } catch (error) {
+            errorCount++;
+            const errorMessage =
+                error instanceof Error ? error.message : String(error);
+            errors.push({ file, error: errorMessage });
+        }
+    }
+
+    if (errorCount > 0) {
+        console.log(`${errorCount} files had errors`);
+    }
+
+    // Merge all individual SVG files into assets.bin and assets.json
+    mergeSvgAssets(assetsPath);
+
+    if (errorCount > 0) {
+        console.log('Some files had errors but asset generation completed.');
+    }
+
+    console.log('Your assets are now ready to be used by session replay.');
+}
+
+generateSRAssets();
diff --git a/yarn.lock b/yarn.lock
index a69a7e1f4..492dbfed5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3743,6 +3743,8 @@ __metadata:
   peerDependencies:
     react: ">=16.13.1"
     react-native: ">=0.63.4 <1.0"
+  bin:
+    datadog-generate-sr-assets: ./lib/commonjs/cli/generate-sr-assets.js
   languageName: unknown
   linkType: soft
 

From 5d6e906c279ca2252324f8e038646cafe2216bf7 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Mon, 13 Oct 2025 23:14:08 +0100
Subject: [PATCH 20/35] Update native android/ios SDK versions to latest
 version of v2

- iOS 2.30.2
- Android 2.26.2
---
 packages/core/DatadogSDKReactNative.podspec          | 12 ++++++------
 packages/core/android/build.gradle                   | 10 +++++-----
 .../DatadogSDKReactNativeSessionReplay.podspec       |  2 +-
 .../react-native-session-replay/android/build.gradle |  4 ++--
 .../DatadogSDKReactNativeWebView.podspec             |  4 ++--
 packages/react-native-webview/android/build.gradle   |  2 +-
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/core/DatadogSDKReactNative.podspec b/packages/core/DatadogSDKReactNative.podspec
index a3c426527..ff3b91232 100644
--- a/packages/core/DatadogSDKReactNative.podspec
+++ b/packages/core/DatadogSDKReactNative.podspec
@@ -19,14 +19,14 @@ Pod::Spec.new do |s|
   s.dependency "React-Core"
 
   # /!\ Remember to keep the versions in sync with DatadogSDKReactNativeSessionReplay.podspec
-  s.dependency 'DatadogCore', '2.30.0'
-  s.dependency 'DatadogLogs', '2.30.0'
-  s.dependency 'DatadogTrace', '2.30.0'
-  s.dependency 'DatadogRUM', '2.30.0'
-  s.dependency 'DatadogCrashReporting', '2.30.0'
+  s.dependency 'DatadogCore', '2.30.2'
+  s.dependency 'DatadogLogs', '2.30.2'
+  s.dependency 'DatadogTrace', '2.30.2'
+  s.dependency 'DatadogRUM', '2.30.2'
+  s.dependency 'DatadogCrashReporting', '2.30.2'
 
   # DatadogWebViewTracking is not available for tvOS
-  s.ios.dependency 'DatadogWebViewTracking', '2.30.0'
+  s.ios.dependency 'DatadogWebViewTracking', '2.30.2'
   
   s.test_spec 'Tests' do |test_spec|
     test_spec.source_files = 'ios/Tests/**/*.{swift,json}'
diff --git a/packages/core/android/build.gradle b/packages/core/android/build.gradle
index c7c6300ef..0396ae323 100644
--- a/packages/core/android/build.gradle
+++ b/packages/core/android/build.gradle
@@ -201,16 +201,16 @@ dependencies {
   // This breaks builds if the React Native target is below 0.76.0. as it relies on Gradle 8.5.0. 
   // To avoid this, we enforce 1.0.0-beta01 on RN < 0.76.0
   if (reactNativeMinorVersion < 76) {
-      implementation("com.datadoghq:dd-sdk-android-rum:2.25.0") {
+      implementation("com.datadoghq:dd-sdk-android-rum:2.26.2") {
           exclude group: "androidx.metrics", module: "metrics-performance"
       }
       implementation "androidx.metrics:metrics-performance:1.0.0-beta01"
   } else {
-      implementation "com.datadoghq:dd-sdk-android-rum:2.25.0"
+      implementation "com.datadoghq:dd-sdk-android-rum:2.26.2"
   }
-  implementation "com.datadoghq:dd-sdk-android-logs:2.25.0"
-  implementation "com.datadoghq:dd-sdk-android-trace:2.25.0"
-  implementation "com.datadoghq:dd-sdk-android-webview:2.25.0"
+  implementation "com.datadoghq:dd-sdk-android-logs:2.26.2"
+  implementation "com.datadoghq:dd-sdk-android-trace:2.26.2"
+  implementation "com.datadoghq:dd-sdk-android-webview:2.26.2"
   implementation "com.google.code.gson:gson:2.10.0"
   testImplementation "org.junit.platform:junit-platform-launcher:1.6.2"
   testImplementation "org.junit.jupiter:junit-jupiter-api:5.6.2"
diff --git a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
index 941880f9d..a89f6cce4 100644
--- a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
+++ b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
@@ -21,7 +21,7 @@ Pod::Spec.new do |s|
   s.dependency "React-Core"
 
   # /!\ Remember to keep the version in sync with DatadogSDKReactNative.podspec
-  s.dependency 'DatadogSessionReplay', '2.30.0'
+  s.dependency 'DatadogSessionReplay', '2.30.2'
   s.dependency 'DatadogSDKReactNative'
 
   s.test_spec 'Tests' do |test_spec|
diff --git a/packages/react-native-session-replay/android/build.gradle b/packages/react-native-session-replay/android/build.gradle
index e670a384e..afb5f5c09 100644
--- a/packages/react-native-session-replay/android/build.gradle
+++ b/packages/react-native-session-replay/android/build.gradle
@@ -214,8 +214,8 @@ dependencies {
     api "com.facebook.react:react-android:$reactNativeVersion"
   }
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.datadoghq:dd-sdk-android-session-replay:2.25.0"
-  implementation "com.datadoghq:dd-sdk-android-internal:2.25.0"
+  implementation "com.datadoghq:dd-sdk-android-session-replay:2.26.2"
+  implementation "com.datadoghq:dd-sdk-android-internal:2.26.2"
   implementation project(path: ':datadog_mobile-react-native')
 
   testImplementation "org.junit.platform:junit-platform-launcher:1.6.2"
diff --git a/packages/react-native-webview/DatadogSDKReactNativeWebView.podspec b/packages/react-native-webview/DatadogSDKReactNativeWebView.podspec
index 647126555..3d4668bb0 100644
--- a/packages/react-native-webview/DatadogSDKReactNativeWebView.podspec
+++ b/packages/react-native-webview/DatadogSDKReactNativeWebView.podspec
@@ -23,8 +23,8 @@ Pod::Spec.new do |s|
   end
 
   # /!\ Remember to keep the version in sync with DatadogSDKReactNative.podspec
-  s.dependency 'DatadogWebViewTracking', '2.30.0'
-  s.dependency 'DatadogInternal', '2.30.0'
+  s.dependency 'DatadogWebViewTracking', '2.30.2'
+  s.dependency 'DatadogInternal', '2.30.2'
   s.dependency 'DatadogSDKReactNative'
 
   s.test_spec 'Tests' do |test_spec|
diff --git a/packages/react-native-webview/android/build.gradle b/packages/react-native-webview/android/build.gradle
index 145cb1528..973b3ec5f 100644
--- a/packages/react-native-webview/android/build.gradle
+++ b/packages/react-native-webview/android/build.gradle
@@ -190,7 +190,7 @@ dependencies {
     implementation "com.facebook.react:react-android:$reactNativeVersion"
   }
 
-  implementation "com.datadoghq:dd-sdk-android-webview:2.25.0"
+  implementation "com.datadoghq:dd-sdk-android-webview:2.26.2"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 
   implementation project(path: ':datadog_mobile-react-native')

From 172d5cea912c1955298cfbe154bd66c9d4da7c7c Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Tue, 14 Oct 2025 18:45:53 +0100
Subject: [PATCH 21/35] Improve handling of dynamic dimensions in SVG elements

- The code now searches within the file itself for the variables used
for width and height and sets those as static values.
- If the variables come from outside, this work is then handled in the
native layer by using the wireframe's data to fill those values.
---
 .../handlers/LocalSvgHandler.ts               |  21 ++-
 .../react-native-svg/handlers/RNSvgHandler.ts |  42 ++++-
 .../handlers/UriSvgHandler.ts                 |  14 +-
 .../src/libraries/react-native-svg/index.ts   | 148 ++++++++++--------
 .../react-native-svg/processing/attributes.ts |  89 +++++++++--
 .../src/utils/nodeProcessing.ts               |  44 ++++++
 .../sessionreplay/mappers/SvgViewMapper.kt    |  46 +++++-
 .../ios/Sources/SvgViewRecorder.swift         |  45 +++++-
 8 files changed, 351 insertions(+), 98 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
index f46cd67b6..0504e0a10 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/LocalSvgHandler.ts
@@ -12,6 +12,14 @@ import { handleSvgDimensions } from '../processing/attributes';
 
 import type { SvgHandler } from './SvgHandler';
 
+/**
+ * Internal handler that inlines locally imported SVG components into
+ * JSX output during Babel transformation.
+ *
+ * The `LocalSvgHandler` resolves SVG imports from disk, caches their raw
+ * contents, and extracts relevant dimension attributes (e.g., width, height)
+ * from the JSX element for use in the generated SVG markup.
+ */
 export class LocalSvgHandler implements SvgHandler {
     constructor(
         private types: typeof Babel.types,
@@ -41,7 +49,12 @@ export class LocalSvgHandler implements SvgHandler {
             this.localSvgMap[this.name].content = fs.readFileSync(path, 'utf8');
         }
 
-        this.processAttributes(this.types, this.path.node, dimensions);
+        this.processAttributes(
+            this.types,
+            this.path,
+            this.path.node,
+            dimensions
+        );
 
         return this.localSvgMap[this.name].content;
     }
@@ -52,11 +65,16 @@ export class LocalSvgHandler implements SvgHandler {
      * storing them into the provided `dimensions` object. Ignores spread attributes.
      *
      * @param t - Babel types helper.
+     *
+     * @param rootElementPath - The path of the root JSX element containing the SVG.
+     *   Used to locate lexical scopes (component or program) for resolving variable references.
+     *   May be `null` if no traversal context is available.
      * @param jsxElement - The JSXElement whose attributes will be processed.
      * @param dimensions - Object to collect extracted width/height info.
      */
     private processAttributes(
         t: typeof Babel.types,
+        rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
         jsxElement: Babel.types.JSXElement,
         dimensions: Record<string, string>
     ) {
@@ -75,6 +93,7 @@ export class LocalSvgHandler implements SvgHandler {
             // Handle SVG dimensions
             handleSvgDimensions(
                 t,
+                rootElementPath,
                 attr,
                 attrName,
                 dimensions,
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
index a2a416e18..9f46c7ef7 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
@@ -13,7 +13,7 @@ import { svgSupportedNames, xmlNamespace } from '../constants';
 import {
     buildTransformStringAttribute,
     handleArrayAttributes,
-    handleJoinedTranformAttributes,
+    handleJoinedTransformAttributes,
     handleRegularAttributes,
     handleRNSpecificAttributes,
     handleSeparateTransformAttributes,
@@ -24,6 +24,14 @@ import { convertAttributeCasing } from '../utils';
 
 import type { SvgHandler } from './SvgHandler';
 
+/**
+ * Internal handler that transforms React Native–style SVG JSXElements into
+ * web-compatible SVG output during Babel processing.
+ *
+ * The `RNSvgHandler` normalizes tag names and attributes, extracts
+ * width/height dimensions, consolidates transform attributes, and ensures
+ * correct SVG namespace declarations.
+ */
 export class RNSvgHandler implements SvgHandler {
     constructor(
         private types: typeof Babel.types,
@@ -48,7 +56,7 @@ export class RNSvgHandler implements SvgHandler {
 
         const clone = this.types.cloneNode(this.path.node, true);
 
-        this.transformElement(this.types, clone, dimensions);
+        this.transformElement(this.types, this.path, clone, dimensions);
         this.setNamespace(this.types, clone);
 
         const output = generate(clone).code;
@@ -87,6 +95,7 @@ export class RNSvgHandler implements SvgHandler {
      */
     private transformElement(
         t: typeof Babel.types,
+        rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
         el: Babel.types.JSXElement,
         dimensions: Record<string, string>
     ) {
@@ -106,7 +115,7 @@ export class RNSvgHandler implements SvgHandler {
             closingNode.name = convertAttributeCasing(closingNode.name);
         }
 
-        this.processAttributes(t, el, dimensions);
+        this.processAttributes(t, rootElementPath, el, dimensions);
     }
 
     /**
@@ -114,17 +123,21 @@ export class RNSvgHandler implements SvgHandler {
      * to each child that is itself a JSXElement.
      *
      * @param t - Babel types helper.
+     * @param rootElementPath - The path of the root JSX element containing the SVG.
+     *   Used to locate lexical scopes (component or program) for resolving variable references.
+     *   May be `null` if no traversal context is available.
      * @param jsxElement - Parent JSXElement whose children will be transformed.
      * @param dimensions - Optional object to propagate width/height info through child elements.
      */
     private traverseAndTransformChildren(
         t: typeof Babel.types,
+        rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
         jsxElement: Babel.types.JSXElement,
         dimensions: Record<string, string> = {}
     ) {
         for (const child of jsxElement.children) {
             if (t.isJSXElement(child)) {
-                this.transformElement(t, child, dimensions);
+                this.transformElement(t, rootElementPath, child, dimensions);
             }
         }
     }
@@ -138,11 +151,15 @@ export class RNSvgHandler implements SvgHandler {
      * - Recursively applies transformations to child elements.
      *
      * @param t - Babel types helper.
+     * @param rootElementPath - The path of the root JSX element containing the SVG.
+     *   Used to locate lexical scopes (component or program) for resolving variable references.
+     *   May be `null` if no traversal context is available.
      * @param jsxElement - JSXElement whose attributes are to be processed.
      * @param dimensions - Optional object to collect extracted width/height info.
      */
     private processAttributes(
         t: typeof Babel.types,
+        rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
         jsxElement: Babel.types.JSXElement,
         dimensions: Record<string, string> = {}
     ) {
@@ -190,8 +207,13 @@ export class RNSvgHandler implements SvgHandler {
                 /* If we reach this point we know we have a valid attribute name */
 
                 // Handle SVG dimensions
-                const dimensionsHandled = handleSvgDimensions(
+
+                const {
+                    resolved: dimensionsHandled,
+                    remove: removeDimension
+                } = handleSvgDimensions(
                     t,
+                    rootElementPath,
                     attr,
                     attrName,
                     dimensions,
@@ -200,7 +222,11 @@ export class RNSvgHandler implements SvgHandler {
                 );
 
                 if (dimensionsHandled) {
-                    el.attributes.splice(index, 1);
+                    // If dimension is invalid or if it's a variable that was not initialized in the file
+                    // We remove the attribute and assign a value in the native layer where we have access to wireframe's dimensions
+                    if (removeDimension) {
+                        el.attributes.splice(index, 1);
+                    }
                     continue;
                 }
 
@@ -233,7 +259,7 @@ export class RNSvgHandler implements SvgHandler {
                 }
 
                 // Handle joined transform attributes
-                const joinedTransformAttributesHandled = handleJoinedTranformAttributes(
+                const joinedTransformAttributesHandled = handleJoinedTransformAttributes(
                     t,
                     attr,
                     attrName,
@@ -255,6 +281,6 @@ export class RNSvgHandler implements SvgHandler {
         buildTransformStringAttribute(el, transformsArray);
 
         // Goes through an elements children and transforms its properties
-        this.traverseAndTransformChildren(t, jsxElement, dimensions);
+        this.traverseAndTransformChildren(t, null, jsxElement, dimensions);
     }
 }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
index 4004d40d6..89caccf03 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/UriSvgHandler.ts
@@ -11,6 +11,13 @@ import { handleSvgDimensions } from '../processing/attributes';
 
 import type { SvgHandler } from './SvgHandler';
 
+/**
+ * Handles extraction and transformation of SVG data from JSX elements that reference SVGs by URI.
+ *
+ * The `UriSvgHandler` inspects a JSXElement, extracts its `uri` attribute to locate the SVG source,
+ * and captures its dimensional attributes (e.g., `width`, `height`) for further processing.
+ *
+ */
 export class UriSvgHandler implements SvgHandler {
     constructor(
         private types: typeof Babel.types,
@@ -30,6 +37,7 @@ export class UriSvgHandler implements SvgHandler {
     transformSvgNode(dimensions: Record<string, string>) {
         const uri = this.processAttributes(
             this.types,
+            this.path,
             this.path.node,
             dimensions
         );
@@ -43,11 +51,15 @@ export class UriSvgHandler implements SvgHandler {
      * storing them into the provided `dimensions` object. Ignores spread attributes.
      *
      * @param t - Babel types helper.
+     * @param rootElementPath - The path of the root JSX element containing the SVG.
+     *   Used to locate lexical scopes (component or program) for resolving variable references.
+     *   May be `null` if no traversal context is available.
      * @param jsxElement - The JSXElement whose attributes will be processed.
      * @param dimensions - Object to collect extracted width/height info.
      */
     private processAttributes(
         t: typeof Babel.types,
+        rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
         jsxElement: Babel.types.JSXElement,
         dimensions: Record<string, string>
     ) {
@@ -68,6 +80,7 @@ export class UriSvgHandler implements SvgHandler {
             // Handle SVG dimensions
             handleSvgDimensions(
                 t,
+                rootElementPath,
                 attr,
                 attrName,
                 dimensions,
@@ -79,7 +92,6 @@ export class UriSvgHandler implements SvgHandler {
                 if (t.isStringLiteral(attr.value)) {
                     uri = attr.value.value;
                 }
-                console.log('attr: ', JSON.stringify(attr, null, 2));
             }
         }
 
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 541998046..288a38289 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -25,6 +25,16 @@ type SvgOffset = {
     length: number;
 };
 
+/**
+ * Internal processor responsible for detecting, transforming, and wrapping
+ * React Native SVG components for use with Session Replay.
+ *
+ * This class scans the project for `.svg` imports, builds a mapping between
+ * JSX identifiers and SVG files, and transforms JSX SVG nodes into
+ * optimized, web-compatible SVG markup. Each transformed element is then
+ * wrapped in a `SessionReplayView.Privacy` component with metadata used by
+ * the native Session Replay layer.
+ */
 export class ReactNativeSVG {
     svgMap: Record<string, { file: string; [key: string]: string }> = {};
 
@@ -157,58 +167,64 @@ export class ReactNativeSVG {
      *          or `undefined` if no transformation could be performed.
      */
     processItem(path: Babel.NodePath<Babel.types.JSXElement>, name: string) {
-        const dimensions: { width?: string; height?: string } = {};
-
-        if (path.node?.extra?.__wrappedForSR) {
-            return;
-        }
-
-        HandlerResolver.configure({
-            t: this.t,
-            path,
-            name,
-            localSvgMap: this.localSvgMap
-        });
+        try {
+            const dimensions: { width?: string; height?: string } = {};
 
-        const handler = HandlerResolver.create();
-        const output = handler?.transformSvgNode(dimensions);
-
-        if (!output) {
-            return;
-        }
+            if (path.node?.extra?.__wrappedForSR) {
+                return;
+            }
 
-        const id = uuidv4();
+            HandlerResolver.configure({
+                t: this.t,
+                path,
+                name,
+                localSvgMap: this.localSvgMap
+            });
 
-        const optimized = output.startsWith('http')
-            ? output
-            : optimize(output, {
-                  multipass: true,
-                  plugins: ['preset-default']
-              }).data;
+            const handler = HandlerResolver.create();
+            const output = handler?.transformSvgNode(dimensions);
 
-        const hash = createHash('md5').update(optimized, 'utf8').digest('hex');
+            if (!output) {
+                return;
+            }
 
-        const wrapper = this.wrapElementForSessionReplay(
-            this.t,
-            path,
-            id,
-            hash,
-            dimensions
-        );
-        path.replaceWith(wrapper);
+            const id = uuidv4();
+
+            const optimized = output.startsWith('http')
+                ? output
+                : optimize(output, {
+                      multipass: true,
+                      plugins: ['preset-default']
+                  }).data;
+
+            const hash = createHash('md5')
+                .update(optimized, 'utf8')
+                .digest('hex');
+
+            const wrapper = this.wrapElementForSessionReplay(
+                this.t,
+                path,
+                id,
+                hash,
+                dimensions
+            );
+            path.replaceWith(wrapper);
 
-        path.node.extra = {
-            __wrappedForSR: true
-        };
+            path.node.extra = {
+                __wrappedForSR: true
+            };
 
-        this.svgMap[id] = {
-            file: optimized,
-            ...dimensions
-        };
+            this.svgMap[id] = {
+                file: optimized,
+                ...dimensions
+            };
 
-        writeAssetToDisk(this.assetsPath, id, hash, optimized);
+            writeAssetToDisk(this.assetsPath, id, hash, optimized);
 
-        return { original: output, optimized };
+            return { original: output, optimized };
+        } catch (err) {
+            return { original: null, optimized: null };
+        }
     }
 
     /**
@@ -269,29 +285,29 @@ export class ReactNativeSVG {
             )
         );
 
-        const attributesProp = t.jsxAttribute(
-            t.jsxIdentifier('attributes'),
-            t.jsxExpressionContainer(
-                t.objectExpression([
-                    t.objectProperty(
-                        t.identifier('type'),
-                        t.stringLiteral('svg')
-                    ),
-                    t.objectProperty(
-                        t.identifier('hash'),
-                        t.stringLiteral(hash)
-                    ),
-                    t.objectProperty(
-                        t.identifier('width'),
-                        width ? t.stringLiteral(width) : t.nullLiteral()
-                    ),
+        const props = [
+            t.objectProperty(t.identifier('type'), t.stringLiteral('svg')),
+            t.objectProperty(t.identifier('hash'), t.stringLiteral(hash))
+        ];
 
-                    t.objectProperty(
-                        t.identifier('height'),
-                        height ? t.stringLiteral(height) : t.nullLiteral()
-                    )
-                ])
-            )
+        if (width) {
+            props.push(
+                t.objectProperty(t.identifier('width'), t.stringLiteral(width))
+            );
+        }
+
+        if (height) {
+            props.push(
+                t.objectProperty(
+                    t.identifier('height'),
+                    t.stringLiteral(height)
+                )
+            );
+        }
+
+        const attributeProp = t.jsxAttribute(
+            t.jsxIdentifier('attributes'),
+            t.jsxExpressionContainer(t.objectExpression(props))
         );
 
         const attributesNode = [
@@ -306,7 +322,7 @@ export class ReactNativeSVG {
                 t.jsxIdentifier('pointerEvents'),
                 t.stringLiteral('box-none')
             ),
-            attributesProp,
+            attributeProp,
             styleProp
         ];
 
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index 7511b9688..4f0d8ab0a 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -10,7 +10,9 @@ import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
 import {
     evaluateStaticNode,
     getJSXAttributeData,
-    parseStyleNode
+    parseStyleNode,
+    findIdentifierInScope,
+    getNodeName
 } from '../../../utils/nodeProcessing';
 import {
     rnAttributeNames,
@@ -96,38 +98,97 @@ export function validateAttribute(attrName: string) {
  * adding them to the provided `dimensions` object.
  *
  * @param t - Babel types helper.
+ * @param rootElementPath - The path of the root JSX element containing the SVG.
+ *   Used to locate lexical scopes (component or program) for resolving variable references.
+ *   May be `null` if no traversal context is available.
  * @param attr - JSX attribute node (e.g., width or height).
  * @param attrName - Name of the attribute.
  * @param dimensions - Object to collect dimension key/value pairs.
  * @param nodeName - Tag name (should be 'svg').
- * @returns True if the attribute was handled and should be removed, false otherwise.
+ * @returns An object describing the result of the operation:
+ * - `resolved`: `true` if the attribute was processed (even if unresolved or removed).
+ * - `remove`: `true` if the attribute should be removed from the AST (unresolved variable or fallback case).
  */
 export function handleSvgDimensions(
     t: typeof Babel.types,
+    rootElementPath: Babel.NodePath<Babel.types.JSXElement> | null,
     attr: Babel.types.JSXAttribute,
     attrName: string,
     dimensions: Record<string, string> = {},
     nodeName: string | null,
     expectedName: string
 ) {
-    if (nodeName !== expectedName) {
-        return false;
+    const dimensionAttributes = ['width', 'height'];
+
+    // Early exit for irrelevant attributes
+    if (nodeName !== expectedName || !dimensionAttributes.includes(attrName)) {
+        return { resolved: false, remove: false };
     }
 
-    const dimensionAttributes = ['width', 'height'];
+    const setDimension = (value: string) => {
+        attr.value = t.stringLiteral(value);
+        dimensions[attrName] = value;
+    };
+
+    const val = attr.value;
+
+    // Handle expression container (e.g., width={widthVal})
+    if (t.isJSXExpressionContainer(val) && t.isIdentifier(val.expression)) {
+        const variableName = getNodeName(t, val.expression);
+        let resolvedValue: string | number | null = null;
+
+        // If no root element, fallback immediately
+        if (!rootElementPath) {
+            return { resolved: true, remove: false };
+        }
+
+        // Try to find a variable in the nearest component/function/class scope
+        const componentPath = rootElementPath.findParent(
+            p =>
+                p.isFunctionDeclaration() ||
+                p.isArrowFunctionExpression() ||
+                p.isFunctionExpression() ||
+                p.isClassDeclaration()
+        );
 
-    if (dimensionAttributes.includes(attrName)) {
-        const result = getJSXAttributeData(t, attr);
+        if (componentPath && variableName) {
+            resolvedValue = findIdentifierInScope(
+                t,
+                componentPath,
+                variableName
+            );
+        }
+
+        // If not found, check the program (global) scope
+        if (resolvedValue === null && variableName) {
+            const programPath = rootElementPath.findParent(p => p.isProgram());
+            if (programPath) {
+                resolvedValue = findIdentifierInScope(
+                    t,
+                    programPath,
+                    variableName
+                );
+            }
+        }
 
-        // IMPROVEMENT: If it's a variable try to find it in the closure
-        if (result.value) {
-            attr.value = t.stringLiteral(result.value.toString());
-            dimensions[attrName] = attr.value.value;
-            return false;
+        // Use resolved value or fallback
+        if (resolvedValue != null) {
+            setDimension(resolvedValue.toString());
+            return { resolved: true, remove: false };
+        } else {
+            return { resolved: true, remove: true };
         }
     }
 
-    return true;
+    // Handle static JSX attribute values
+    const result = getJSXAttributeData(t, attr);
+    if (result.value) {
+        setDimension(result.value.toString());
+        return { resolved: true, remove: false };
+    }
+
+    // Default fallback if unrecognized case
+    return { resolved: true, remove: true };
 }
 
 /**
@@ -198,7 +259,7 @@ export function handleSeparateTransformAttributes(
  * @param transformsArray - Accumulator array for transform operations.
  * @returns True if the transform list was extracted successfully.
  */
-export function handleJoinedTranformAttributes(
+export function handleJoinedTransformAttributes(
     t: typeof Babel.types,
     attr: Babel.types.JSXAttribute,
     attrName: string,
diff --git a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
index 801f0ae3b..e2be8b990 100644
--- a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
+++ b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
@@ -538,3 +538,47 @@ export function parseStyleNode(
 
     return null;
 }
+
+/**
+ * Searches for a variable declaration in the given scope and returns its static value.
+ *
+ * @param t - Babel types helper.
+ * @param scopePath - The scope path to search in (e.g., function, class, or program).
+ * @param variableName - The name of the variable to find.
+ * @returns The static value of the variable (string or number), or null if not found or not static.
+ */
+export function findIdentifierInScope(
+    t: typeof Babel.types,
+    scopePath: Babel.NodePath<Babel.types.Node>,
+    variableName: string
+): string | number | null {
+    let foundValue: string | number | null = null;
+
+    scopePath.traverse({
+        VariableDeclarator(path) {
+            // Here we check for `parentPath` twice because nodes like variables are usually inside `BlockStatement` nodes
+            // So we need to get past those to get the right parentPath
+            if (path.parentPath?.parentPath !== scopePath) {
+                return;
+            }
+
+            const nodeName = getNodeName(t, path.node.id);
+            if (
+                t.isIdentifier(path.node.id) &&
+                nodeName === variableName &&
+                path.node.init
+            ) {
+                const staticValue = evaluateStaticNode(t, path.node.init);
+                if (
+                    typeof staticValue === 'string' ||
+                    typeof staticValue === 'number'
+                ) {
+                    foundValue = staticValue;
+                    path.stop();
+                }
+            }
+        }
+    });
+
+    return foundValue;
+}
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
index b5b225a6f..87a08c2f2 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
@@ -53,12 +53,30 @@ internal open class SvgViewMapper<T: View>(
 
         if (view is DdPrivacyView) {
             val hash = view.attributes?.get("hash") ?: return wireframes
+            val width = view.attributes?.get("width")
+            val height = view.attributes?.get("height")
 
-            val entryData = internalCallback.getEntryData(hash)
+            var entryData = internalCallback.getEntryData(hash)
                 ?: return wireframes
 
             // This is always guaranteed to be true due to how the babel plugin transformed the data
             val subView = view.getChildAt(0) ?: return wireframes
+            val imageBounds = resolveViewGlobalBounds(subView, pixelDensity)
+            var entryStr: String? = null
+
+            if (width == null) {
+                entryStr = injectSvgDimensions(entryData.toString(Charsets.UTF_8), imageBounds.width.toInt(), null)
+            }
+
+            if (height == null) {
+                entryStr = injectSvgDimensions(entryStr ?: entryData.toString(Charsets.UTF_8), null, imageBounds.height.toInt())
+            }
+
+            if (entryStr != null) {
+                // Here we update the svg content but keep the original hash without these values
+                // The goal is to save some time, as it won't matter since the hash is used as an identifier
+                entryData = entryStr.toByteArray(Charsets.UTF_8);
+            }
 
             wireframes.add(MobileSegment.Wireframe.ShapeWireframe(
                     resolveViewId(view),
@@ -70,7 +88,6 @@ internal open class SvgViewMapper<T: View>(
                     border = border
                 ))
 
-            val imageBounds = resolveViewGlobalBounds(subView, pixelDensity)
             val imgWireframe = MobileSegment.Wireframe.ImageWireframe(
                 resolveViewId(subView),
                 imageBounds.x,
@@ -99,4 +116,29 @@ internal open class SvgViewMapper<T: View>(
 
         return wireframes
     }
+
+    fun injectSvgDimensions(
+        svgData: String,
+        width: Int? = null,
+        height: Int? = null
+    ): String? {
+        val attrs = mutableListOf<String>()
+        width?.let { attrs.add("""width="$it"""") }
+        height?.let { attrs.add("""height="$it"""") }
+
+        if (attrs.isEmpty()) return svgData
+
+        val insertIndex = svgData.indexOf("<svg")
+        if (insertIndex == -1) return svgData
+
+        val tagEndIndex = svgData.indexOf(">", startIndex = insertIndex)
+        if (tagEndIndex == -1) return svgData
+
+        val dimensions = " " + attrs.joinToString(" ")
+
+        val builder = StringBuilder(svgData)
+        builder.insert(tagEndIndex, dimensions)
+
+        return builder.toString()
+    }
 }
diff --git a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
index 91ea8c47d..689a12005 100644
--- a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
+++ b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
@@ -59,7 +59,9 @@ internal class SvgViewRecorder: SessionReplayNodeRecorder {
             if let attrs = view.value(forKey: "attributes") as? [String: String] {
                 let svgId = context.ids.nodeID(view: subView, nodeRecorder: self)
                 let type = attrs["type"]
-                
+                let width = attrs["width"]
+                let height = attrs["height"]
+
                 guard let hash = attrs["hash"] else {
                     return nil
                 }
@@ -71,17 +73,48 @@ internal class SvgViewRecorder: SessionReplayNodeRecorder {
                 let bundle = Bundle(for: SvgViewRecorder.self)
                 if let url = bundle.url(forResource: "assets", withExtension: "bin") {
                     do {
-                        let data = try Data(contentsOf: url)
+                        let fileHandle = try FileHandle(forReadingFrom: url)
+                        defer { try? fileHandle.close() }
+                        
                         guard let svgInfo = svgMap[hash] else {
                             return nil
                         }
                         
-                        let range = svgInfo.offset..<(svgInfo.offset + svgInfo.length)
-                        let svgData = String(data: data.subdata(in: range), encoding: .utf8)
+                        try fileHandle.seek(toOffset: UInt64(svgInfo.offset))
+                        let svgDataChunk = try fileHandle.read(upToCount: svgInfo.length)
+                        
+                        guard let svgDataChunk = svgDataChunk,
+                              var svgData = String(data: svgDataChunk, encoding: .utf8) else {
+                            return nil
+                        }
+                        
+                        var svgAttributes: [String] = []
+                        
+                        if (width == "") {
+                            svgAttributes.append(#"width="\#(Int(subView.bounds.width))""#)
+                        }
+                        
+                        if (height == "") {
+                            svgAttributes.append(#"height="\#(Int(subView.bounds.height))""#)
+                        }
+                        
+                        if !svgAttributes.isEmpty {
+                            // Here we update the svg content but keep the original hash without these values
+                            // The goal is to save some time, as it won't matter since the hash is used as an identifier
+                            var svg = svgData
+                            
+                            if let svgStart = svg.range(of: "<svg"),
+                               let tagEnd = svg.range(of: ">", range: svgStart.upperBound..<svg.endIndex) {
+
+                                let dimensions = " " + svgAttributes.joined(separator: " ")
+                                svg.replaceSubrange(tagEnd, with: dimensions + ">")
+                                svgData = svg
+                            }
+                        }
                         
                         let svgResource = ReactNativeSVGResource(
-                             id: hash,
-                             svgContent: svgData!
+                            id: hash,
+                            svgContent: svgData
                          )
 
                         let contentFrame = CGRect(

From ebc6768e36fe958c567ad48b05df5e1969826a65 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 08:13:16 +0100
Subject: [PATCH 22/35] Fix typos & rename functions

---
 .gitignore                                         |  4 ++++
 packages/react-native-babel-plugin/README.md       |  2 +-
 .../src/cli/generate-sr-assets.ts                  | 14 ++++++++------
 .../src/libraries/react-native-svg/constants.ts    |  3 +--
 .../libraries/react-native-svg/processing/svg.ts   |  5 ++++-
 .../react-native-session-replay/src/metro/index.ts |  2 +-
 .../src/metro/processing.ts                        |  8 +++++++-
 7 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index 464a95953..3b6813db1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -101,5 +101,9 @@ example/android/app/src/main/assets/index.android*
 # Credentials for example app
 datadog-ci.json
 
+
+# Babel Plugin assets
+packages/react-native-babel-plugin/assets/*
+
 # Session Replay assets
 packages/react-native-session-replay/assets/*
diff --git a/packages/react-native-babel-plugin/README.md b/packages/react-native-babel-plugin/README.md
index 200bddb91..af4d09e60 100644
--- a/packages/react-native-babel-plugin/README.md
+++ b/packages/react-native-babel-plugin/README.md
@@ -40,7 +40,7 @@ You can configure the plugin to adjust how it processes your code, giving you co
 | Option               | Type   | Default | Description |
 |-----------------------|--------|---------|-------------|
 | `actionNameAttribute` | string | –       | The chosen attribute name to use for action names. |
-| `sessionReplay`          | object | –       | Session Replay options configuration. |
+| `sessionReplay`          | object | –       | Session Replay configuration. |
 | `components`          | object | –       | Component tracking configuration. |
 
 ---
diff --git a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
index 8139bb7b9..a3ca8964d 100644
--- a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
+++ b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
@@ -120,7 +120,7 @@ function mergeSvgAssets(assetsDir: string) {
  *   or
  *   npx datadog-generate-sr-assets
  */
-function generateSRAssets() {
+function generateSessionReplayAssets() {
     const rootDir = process.cwd();
     const assetsPath = getAssetsPath();
 
@@ -177,7 +177,7 @@ function generateSRAssets() {
                     ],
                     '@babel/preset-react'
                 ],
-                // Don't generate actual output, we just the asset generation
+                // Don't generate actual output, we just want the asset generation
                 code: false,
                 ast: false
             });
@@ -190,17 +190,19 @@ function generateSRAssets() {
     }
 
     if (errorCount > 0) {
-        console.log(`${errorCount} files had errors`);
+        console.warn(`${errorCount} files had errors`);
     }
 
     // Merge all individual SVG files into assets.bin and assets.json
     mergeSvgAssets(assetsPath);
 
     if (errorCount > 0) {
-        console.log('Some files had errors but asset generation completed.');
+        console.log(
+            'Asset generation finished, but some files encountered errors.'
+        );
     }
 
-    console.log('Your assets are now ready to be used by session replay.');
+    console.log('Your assets are now ready to be used by Session Replay.');
 }
 
-generateSRAssets();
+generateSessionReplayAssets();
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
index 152e5738d..9c590d605 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
@@ -12,7 +12,7 @@ export const rnAttributeNames = [
 ];
 
 export const rnSvgArrayAttributeValues = [
-    'stroke-dasharray', // this attribute is already in the web compliant format, sice the RN to web conversion already occured when this is used
+    'stroke-dasharray', // this attribute is already in the web compliant format, since the RN to web conversion already occured when this is used
     'points',
     'gradientTransform',
     'stdDeviation',
@@ -144,7 +144,6 @@ export const svgAttributesCC = [
     'startOffset',
     'stdDeviation',
     'stitchTiles',
-    // 'strokeDasharray', //
     'surfaceScale',
     'systemLanguage',
     'tableValues',
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
index 0b5061385..ab398a676 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
@@ -114,7 +114,10 @@ export function convertArrayExpressionToArray(
         }
 
         // Ignore unsupported elements (identifiers, spreads)
-        console.warn('Unsupported array element in SVG prop:', element);
+        console.warn(
+            '[convertArrayExpressionToArray] Unsupported array element in SVG prop:',
+            element
+        );
     }
 
     return data;
diff --git a/packages/react-native-session-replay/src/metro/index.ts b/packages/react-native-session-replay/src/metro/index.ts
index 4c7b26325..cdb420c5e 100644
--- a/packages/react-native-session-replay/src/metro/index.ts
+++ b/packages/react-native-session-replay/src/metro/index.ts
@@ -13,7 +13,7 @@ import { debounce } from './utils';
 
 let watching = false;
 
-export function withSessionReplayAggregator(metroConfig: any): any {
+export function withSessionReplayAssetBundler(metroConfig: any): any {
     const originalReporter = metroConfig.reporter;
 
     const assetsDir = path.resolve(__dirname, '../../../assets');
diff --git a/packages/react-native-session-replay/src/metro/processing.ts b/packages/react-native-session-replay/src/metro/processing.ts
index 3db12e865..ce2118243 100644
--- a/packages/react-native-session-replay/src/metro/processing.ts
+++ b/packages/react-native-session-replay/src/metro/processing.ts
@@ -14,8 +14,14 @@ type SvgIndexEntry = {
 
 type SvgIndex = Record<string, SvgIndexEntry>;
 
+/**
+ * Merges all individual SVG files into assets.bin and creates an index in assets.json.
+ * This function reads all .svg files from the assets directory and packs them into
+ * a single binary file with an accompanying JSON index for efficient lookup.
+ *
+ * @param assetsDir - Absolute path to the assets directory
+ */
 export function mergeSvgAssets(assetsDir: string) {
-    // const assetsDir = 'node_modules/@datadog/mobile-react-native-session-replay/assets'
     const binName = 'assets.bin';
     const jsonName = 'assets.json';
 

From 495e5a86bf2d5f5e9a1306bacab26f7cee1f87d3 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 08:38:09 +0100
Subject: [PATCH 23/35] Convert SVG constant arrays to Sets & Check SVG element
 name conversion

---
 .../libraries/react-native-svg/constants.ts   | 158 +++++++++---------
 .../react-native-svg/handlers/RNSvgHandler.ts |  13 +-
 .../src/libraries/react-native-svg/index.ts   |   1 +
 .../react-native-svg/processing/attributes.ts |  12 +-
 4 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
index 9c590d605..9a25f7bc7 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/constants.ts
@@ -4,23 +4,27 @@
  * Copyright 2016-Present Datadog, Inc.
  */
 
-export const rnAttributeNames = [
+export const svgSupportedNames = ['Svg', 'SvgUri'];
+
+export const xmlNamespace = ['xmlns', 'http://www.w3.org/2000/svg'];
+
+export const rnAttributeNames = new Set([
     '__self',
     'accessibilityLabel',
     'accessibilityRole',
     'style'
-];
+]);
 
-export const rnSvgArrayAttributeValues = [
+export const rnSvgArrayAttributeValues = new Set([
     'stroke-dasharray', // this attribute is already in the web compliant format, since the RN to web conversion already occured when this is used
     'points',
     'gradientTransform',
     'stdDeviation',
     'values'
-];
+]);
 
 // All these values are deprecated, but still allowed in react-native-svg
-export const rnSvgTransformAttributeValues = [
+export const rnSvgTransformAttributeValues = new Set([
     'translateX',
     'translateY',
     'scaleX',
@@ -29,79 +33,75 @@ export const rnSvgTransformAttributeValues = [
     'skewX',
     'skewY',
     'matrix'
-];
-
-export const svgSupportedNames = ['Svg', 'SvgUri'];
+]);
 
-export const xmlNamespace = ['xmlns', 'http://www.w3.org/2000/svg'];
-
-export const svgElements = [
-    '<a>',
-    '<animate>',
-    '<animateMotion>',
-    '<animateTransform>',
-    '<circle>',
-    '<clipPath>',
-    '<defs>',
-    '<desc>',
-    '<ellipse>',
-    '<feBlend>',
-    '<feColorMatrix>',
-    '<feComponentTransfer>',
-    '<feComposite>',
-    '<feConvolveMatrix>',
-    '<feDiffuseLighting>',
-    '<feDisplacementMap>',
-    '<feDistantLight>',
-    '<feDropShadow>',
-    '<feFlood>',
-    '<feFuncA>',
-    '<feFuncB>',
-    '<feFuncG>',
-    '<feFuncR>',
-    '<feGaussianBlur>',
-    '<feImage>',
-    '<feMerge>',
-    '<feMergeNode>',
-    '<feMorphology>',
-    '<feOffset>',
-    '<fePointLight>',
-    '<feSpecularLighting>',
-    '<feSpotLight>',
-    '<feTile>',
-    '<feTurbulence>',
-    '<filter>',
-    '<foreignObject>',
-    '<g>',
-    '<image>',
-    '<line>',
-    '<linearGradient>',
-    '<marker>',
-    '<mask>',
-    '<metadata>',
-    '<mpath>',
-    '<path>',
-    '<pattern>',
-    '<polygon>',
-    '<polyline>',
-    '<radialGradient>',
-    '<rect>',
-    '<script>',
-    '<set>',
-    '<stop>',
-    '<style>',
-    '<svg>',
-    '<switch>',
-    '<symbol>',
-    '<text>',
-    '<textPath>',
-    '<title>',
-    '<tspan>',
-    '<use>',
-    '<view>'
-];
+export const svgElements = new Set([
+    'a',
+    'animate',
+    'animateMotion',
+    'animateTransform',
+    'circle',
+    'clipPath',
+    'defs',
+    'desc',
+    'ellipse',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'filter',
+    'foreignObject',
+    'g',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'metadata',
+    'mpath',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'script',
+    'set',
+    'stop',
+    'style',
+    'svg',
+    'switch',
+    'symbol',
+    'text',
+    'textPath',
+    'title',
+    'tspan',
+    'use',
+    'view'
+]);
 
-export const svgAttributesCC = [
+export const svgAttributesCC = new Set([
     'attributeName',
     'attributeType',
     'baseFrequency',
@@ -151,9 +151,9 @@ export const svgAttributesCC = [
     'viewBox',
     'xChannelSelector',
     'yChannelSelector'
-];
+]);
 
-export const svgAttributesKC = [
+export const svgAttributesKC = new Set([
     'accumulate',
     'additive',
     'alignment-baseline',
@@ -288,4 +288,4 @@ export const svgAttributesKC = [
     'y1',
     'y2',
     'z'
-];
+]);
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
index 9f46c7ef7..7c67d12e4 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
@@ -9,7 +9,7 @@ import generate from '@babel/generator';
 import { jsxAttribute, jSXIdentifier, stringLiteral } from '@babel/types';
 
 import { getNodeName } from '../../../utils';
-import { svgSupportedNames, xmlNamespace } from '../constants';
+import { svgElements, svgSupportedNames, xmlNamespace } from '../constants';
 import {
     buildTransformStringAttribute,
     handleArrayAttributes,
@@ -105,6 +105,11 @@ export class RNSvgHandler implements SvgHandler {
         // Fix casing for openingElement
         if (isJSXIdentifierOpen) {
             openingNode.name = convertAttributeCasing(openingNode.name);
+            if (!svgElements.has(openingNode.name)) {
+                throw new Error(
+                    `RNSvgHandler[transformElement]: Failed to transform element: "${openingNode.name}" is not supported`
+                );
+            }
         }
 
         const closingNode = el.closingElement?.name;
@@ -113,6 +118,12 @@ export class RNSvgHandler implements SvgHandler {
         // Fix casing for closingElement
         if (isJSXIdentifierClose) {
             closingNode.name = convertAttributeCasing(closingNode.name);
+
+            if (!svgElements.has(closingNode.name)) {
+                throw new Error(
+                    `RNSvgHandler[transformElement]: Failed to transform element: "${closingNode.name}" is not supported`
+                );
+            }
         }
 
         this.processAttributes(t, rootElementPath, el, dimensions);
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index 288a38289..f3993b94e 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -223,6 +223,7 @@ export class ReactNativeSVG {
 
             return { original: output, optimized };
         } catch (err) {
+            console.warn(err);
             return { original: null, optimized: null };
         }
     }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index 4f0d8ab0a..ddc5a9657 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -43,7 +43,7 @@ export function handleRNSpecificAttributes(
     attr: Babel.types.JSXAttribute,
     attrName: string
 ) {
-    if (rnAttributeNames.includes(attrName)) {
+    if (rnAttributeNames.has(attrName)) {
         if (attrName === 'style') {
             const styleObj = parseStyleNode(t, attr);
             if (styleObj) {
@@ -76,16 +76,16 @@ export function handleRNSpecificAttributes(
 export function validateAttribute(attrName: string) {
     const result = { attrName, isInvalidAttribute: false };
 
-    if (rnSvgTransformAttributeValues.includes(attrName)) {
+    if (rnSvgTransformAttributeValues.has(attrName)) {
         return result;
     }
 
     // This means that the attribute name is already in the right format
-    if (!svgAttributesCC.includes(attrName)) {
+    if (!svgAttributesCC.has(attrName)) {
         result.attrName = kebabCase(attrName);
 
         // This means that the attribute name is not a valid SVG attribute and should be ignored
-        if (!svgAttributesKC.includes(result.attrName)) {
+        if (!svgAttributesKC.has(result.attrName)) {
             result.isInvalidAttribute = true;
         }
     }
@@ -206,7 +206,7 @@ export function handleArrayAttributes(
     attrName: string
 ) {
     if (
-        rnSvgArrayAttributeValues.includes(attrName) &&
+        rnSvgArrayAttributeValues.has(attrName) &&
         t.isJSXExpressionContainer(attr.value) &&
         t.isArrayExpression(attr.value.expression)
     ) {
@@ -240,7 +240,7 @@ export function handleSeparateTransformAttributes(
     attrName: string,
     transformsArray: { name: string; value: string | number }[] = []
 ) {
-    if (rnSvgTransformAttributeValues.includes(attrName)) {
+    if (rnSvgTransformAttributeValues.has(attrName)) {
         convertAttributeTransformArray(t, transformsArray, attr);
         return true;
     }

From f87aaa08841f2041d0d618d3978f2646e9a59b09 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 09:28:01 +0100
Subject: [PATCH 24/35] Link jira tickets to potential improvements to the code

---
 .../react-native-babel-plugin/src/cli/generate-sr-assets.ts     | 1 +
 .../src/libraries/react-native-svg/index.ts                     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
index a3ca8964d..1273bf50d 100644
--- a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
+++ b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
@@ -205,4 +205,5 @@ function generateSessionReplayAssets() {
     console.log('Your assets are now ready to be used by Session Replay.');
 }
 
+// TODO: Add flag support [e.g., --verbose] (RUM-12186)
 generateSessionReplayAssets();
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
index f3993b94e..42d2a2a08 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts
@@ -62,7 +62,7 @@ export class ReactNativeSVG {
      * and config files.
      */
     buildSvgMap() {
-        // IMPROVEMENT: Support aliased paths
+        // TODO: Support aliased paths (RUM-12185)
         const files = glob.sync(
             ['**/*.{js,jsx,ts,tsx}', '**/*.{js,jsx,ts,tsx}'],
             {

From 2187fce348e5fc0df09a5bfd9ed0d374d6550047 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 11:20:57 +0100
Subject: [PATCH 25/35] Clean up SVG handling logic in Session Replay and Babel
 plugin packages for clarity and consistency

---
 .../react-native-babel-plugin/package.json    |   2 +-
 .../src/cli/generate-sr-assets.ts             | 102 ++++++-------
 .../react-native-svg/processing/attributes.ts |  46 +++---
 .../react-native-svg/processing/fs.ts         |  14 --
 .../react-native-svg/processing/svg.ts        |  37 +++--
 .../src/utils/nodeProcessing.ts               |   1 -
 .../ReactNativeInternalCallback.kt            |   5 +
 .../src/metro/index.ts                        |  10 +-
 .../src/metro/processing.ts                   | 134 ++++++++++--------
 9 files changed, 173 insertions(+), 178 deletions(-)

diff --git a/packages/react-native-babel-plugin/package.json b/packages/react-native-babel-plugin/package.json
index 90b7e2c30..208fa1a23 100644
--- a/packages/react-native-babel-plugin/package.json
+++ b/packages/react-native-babel-plugin/package.json
@@ -49,7 +49,7 @@
         "@babel/types": "^7.27.1",
         "fast-glob": "^3.3.3",
         "svgo": "^4.0.0",
-        "uuid": "^11.1.0"
+        "uuid": "^13.0.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.27.2",
diff --git a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
index 1273bf50d..ff6eba945 100644
--- a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
+++ b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
@@ -31,76 +31,64 @@ type SvgIndex = Record<string, SvgIndexEntry>;
  * @param assetsDir - Absolute path to the assets directory
  */
 function mergeSvgAssets(assetsDir: string) {
-    const binName = 'assets.bin';
-    const jsonName = 'assets.json';
+    try {
+        const binName = 'assets.bin';
+        const jsonName = 'assets.json';
 
-    const binPath = path.resolve(assetsDir, binName);
-    const jsonPath = path.resolve(assetsDir, jsonName);
+        const binPath = path.resolve(assetsDir, binName);
+        const jsonPath = path.resolve(assetsDir, jsonName);
+        const index: SvgIndex = {};
 
-    let index: SvgIndex = {};
-    let offset = 0;
+        let offset = 0;
 
-    if (!fs.existsSync(assetsDir)) {
-        fs.mkdirSync(assetsDir, { recursive: true });
-    }
+        // Read SVG files from directory
+        let files: string[] = [];
+        files = fs
+            .readdirSync(assetsDir)
+            .filter(f => f.endsWith('.svg'))
+            .sort();
 
-    if (fs.existsSync(binPath) && fs.existsSync(jsonPath)) {
-        try {
-            index = JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as SvgIndex;
-            offset = fs.statSync(binPath).size;
-        } catch (err) {
-            index = {};
-            offset = 0;
+        let added = 0;
 
-            if (fs.existsSync(binPath)) {
-                fs.unlinkSync(binPath);
-            }
-            if (fs.existsSync(jsonPath)) {
-                fs.unlinkSync(jsonPath);
+        for (const f of files) {
+            const id = path.basename(f, path.extname(f));
+            if (index[id]) {
+                continue;
             }
-        }
-    } else {
-        if (fs.existsSync(binPath)) {
-            fs.unlinkSync(binPath);
-        }
-        if (fs.existsSync(jsonPath)) {
-            fs.unlinkSync(jsonPath);
-        }
-    }
 
-    const files = fs.readdirSync(assetsDir).sort();
-    let added = 0;
-
-    for (const f of files) {
-        if (f === binName || f === jsonName) {
-            continue;
-        }
-
-        const id = path.basename(f, path.extname(f));
-        if (index[id]) {
-            continue;
+            try {
+                const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
+                const buf = Buffer.from(svg, 'utf8');
+                const length = buf.length;
+
+                fs.appendFileSync(binPath, buf);
+                index[id] = { offset, length };
+                offset += length;
+                added++;
+            } catch (err) {
+                console.warn(`[mergeSvgAssets] Failed to process ${f}:`, err);
+            }
         }
 
+        // Write final index
         try {
-            const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
-            const buf = Buffer.from(svg, 'utf8');
-            const length = buf.length;
-
-            fs.appendFileSync(binPath, buf);
-            index[id] = { offset, length };
-            offset += length;
-            added++;
+            fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
         } catch (err) {
-            console.warn(`[mergeSvgAssets] Failed to process ${f}:`, err);
+            console.error('[mergeSvgAssets] Failed to write assets index', err);
+            return;
         }
-    }
 
-    fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
-    if (added > 0) {
-        console.log(
-            `\nPacked ${added} new Session Replay assets -> total: ${
-                Object.keys(index).length
-            }`
+        if (added > 0) {
+            console.log(
+                `\nPacked ${added} new Session Replay assets -> total: ${
+                    Object.keys(index).length
+                }`
+            );
+        }
+    } catch (err) {
+        console.error(
+            '[mergeSvgAssets] Unexpected error during asset merge',
+            err
         );
     }
 }
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index ddc5a9657..39e20751b 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -266,31 +266,33 @@ export function handleJoinedTransformAttributes(
     transformsArray: { name: string; value: string | number }[] = []
 ) {
     if (
-        attrName === 'transform' &&
-        t.isJSXExpressionContainer(attr.value) &&
-        t.isArrayExpression(attr.value.expression)
+        attrName !== 'transform' ||
+        !t.isJSXExpressionContainer(attr.value) ||
+        !t.isArrayExpression(attr.value.expression)
     ) {
-        const transformList = evaluateStaticNode(t, attr.value.expression);
-
-        if (Array.isArray(transformList)) {
-            for (const entry of transformList) {
-                if (
-                    entry &&
-                    typeof entry === 'object' &&
-                    !Array.isArray(entry)
-                ) {
-                    for (const key of Object.keys(entry)) {
-                        transformsArray.push({
-                            name: key,
-                            value: entry[key]
-                        });
-                    }
-                }
-            }
-            return true;
+        return false;
+    }
+
+    const transformList = evaluateStaticNode(t, attr.value.expression);
+
+    if (!Array.isArray(transformList)) {
+        return false;
+    }
+
+    for (const entry of transformList) {
+        if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+            continue;
+        }
+
+        for (const key of Object.keys(entry)) {
+            transformsArray.push({
+                name: key,
+                value: entry[key]
+            });
         }
     }
-    return false;
+
+    return true;
 }
 
 /**
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
index 052115a7b..72a003677 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/fs.ts
@@ -68,20 +68,6 @@ export function getAssetsPath() {
     return path.resolve('./assets');
 }
 
-/**
- * Ensures that the given assets directory exists.
- * If it does not exist, creates it using `fs.mkdirSync`.
- *
- * @param assetsPath - Absolute path to the assets directory.
- */
-export function ensureAssetsDir(assetsPath: string) {
-    try {
-        fs.accessSync(assetsPath, fs.constants.F_OK);
-    } catch (error) {
-        fs.mkdirSync(assetsPath);
-    }
-}
-
 /**
  * Deletes all files (non-recursively) in the provided assets directory.
  * Only removes files, leaving subdirectories untouched.
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
index ab398a676..7cc480153 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/svg.ts
@@ -21,32 +21,29 @@ export function convertAttributeArrayValue(
     t: typeof Babel.types,
     expression: Babel.types.ArrayExpression,
     attrName: string
-) {
+): string | null {
     const value = convertArrayExpressionToArray(t, expression, []);
+    if (!Array.isArray(value)) {
+        return null;
+    }
 
-    if (Array.isArray(value)) {
-        switch (attrName) {
-            case 'gradientTransform':
-            case 'matrix':
-                return `matrix(${value.join(' ')})`;
-
-            case 'values':
-                return value.join(';');
+    switch (attrName) {
+        case 'gradientTransform':
+        case 'matrix':
+            return `matrix(${value.join(' ')})`;
 
-            case 'points': {
-                const data = value
-                    .map(v => (Array.isArray(v) ? v.join(',') : v))
-                    .join(' ');
+        case 'values':
+            return value.join(';');
 
-                return data;
-            }
-
-            default:
-                return value.join(' ');
+        case 'points': {
+            return value
+                .map(v => (Array.isArray(v) ? v.join(',') : v))
+                .join(' ');
         }
-    }
 
-    return null;
+        default:
+            return value.join(' ');
+    }
 }
 
 /**
diff --git a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
index e2be8b990..10cbc1d7d 100644
--- a/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
+++ b/packages/react-native-babel-plugin/src/utils/nodeProcessing.ts
@@ -533,7 +533,6 @@ export function parseStyleNode(
         }
 
         // Any other type at top-level is not a valid style object
-        return null;
     }
 
     return null;
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
index 135a9456c..dfbfbbe23 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
@@ -7,6 +7,7 @@
 package com.datadog.reactnative.sessionreplay
 
 import android.app.Activity
+import android.util.Log
 import com.datadog.android.sessionreplay.SessionReplayInternalCallback
 import com.datadog.android.sessionreplay.SessionReplayInternalResourceQueue
 import com.facebook.react.bridge.ReactContext
@@ -26,6 +27,7 @@ class ReactNativeInternalCallback(
     companion object {
         private const val ASSETS_JSON = "assets.json"
         private const val ASSETS_BIN = "assets.bin"
+        private const val TAG = "SessionReplayInternalCallback"
     }
 
     private val jsonObject: JSONObject? = loadAssetsJson()
@@ -45,8 +47,10 @@ class ReactNativeInternalCallback(
                 .use { it.readText() }
             JSONObject(jsonText)
         } catch (e: IOException) {
+            Log.w(TAG, "Failed to read $ASSETS_JSON from assets: ${e.message}")
             null
         } catch (e: JSONException) {
+            Log.w(TAG, "Invalid JSON in $ASSETS_JSON: ${e.message}")
             null
         }
     }
@@ -84,6 +88,7 @@ class ReactNativeInternalCallback(
         return try {
             readAssetBytes(reactContext, offset, length)
         } catch (e: Exception) {
+            Log.w(TAG, "Failed to read entry from binary: ${e.message}")
             null
         }
     }
diff --git a/packages/react-native-session-replay/src/metro/index.ts b/packages/react-native-session-replay/src/metro/index.ts
index cdb420c5e..5891c72ff 100644
--- a/packages/react-native-session-replay/src/metro/index.ts
+++ b/packages/react-native-session-replay/src/metro/index.ts
@@ -13,6 +13,10 @@ import { debounce } from './utils';
 
 let watching = false;
 
+const MERGE_DEBOUNCE_MS = 300;
+const WATCH_STABILITY_THRESHOLD_MS = 200;
+const WATCH_POLL_INTERVAL_MS = 50;
+
 export function withSessionReplayAssetBundler(metroConfig: any): any {
     const originalReporter = metroConfig.reporter;
 
@@ -28,7 +32,7 @@ export function withSessionReplayAssetBundler(metroConfig: any): any {
         } catch (error) {
             console.warn('[SessionReplayAggregator] merge failed:', error);
         }
-    }, 300);
+    }, MERGE_DEBOUNCE_MS);
 
     // Prevent potential multiple watchers if metro loads the config multiple times
     if (!watching) {
@@ -40,9 +44,9 @@ export function withSessionReplayAssetBundler(metroConfig: any): any {
                 depth: 0,
                 awaitWriteFinish: {
                     // Wait 200ms after last change
-                    stabilityThreshold: 200,
+                    stabilityThreshold: WATCH_STABILITY_THRESHOLD_MS,
                     // Check every 50ms
-                    pollInterval: 50
+                    pollInterval: WATCH_POLL_INTERVAL_MS
                 }
             })
             .on('add', file => {
diff --git a/packages/react-native-session-replay/src/metro/processing.ts b/packages/react-native-session-replay/src/metro/processing.ts
index ce2118243..3db3e1db6 100644
--- a/packages/react-native-session-replay/src/metro/processing.ts
+++ b/packages/react-native-session-replay/src/metro/processing.ts
@@ -14,6 +14,27 @@ type SvgIndexEntry = {
 
 type SvgIndex = Record<string, SvgIndexEntry>;
 
+/**
+ * Removes the binary and JSON asset files from the specified directory.
+ * This is used to clean up corrupted or partial asset files before regenerating them.
+ *
+ * @param binPath - Absolute path to the assets.bin file
+ * @param jsonPath - Absolute path to the assets.json file
+ */
+function cleanupFiles(binPath: string, jsonPath: string) {
+    try {
+        fs.unlinkSync(binPath);
+    } catch (err) {
+        console.warn('[cleanupFiles] Failed to cleanup binary assets', err);
+    }
+
+    try {
+        fs.unlinkSync(jsonPath);
+    } catch (err) {
+        console.warn('[cleanupFiles] Failed to cleanup json assets', err);
+    }
+}
+
 /**
  * Merges all individual SVG files into assets.bin and creates an index in assets.json.
  * This function reads all .svg files from the assets directory and packs them into
@@ -22,84 +43,77 @@ type SvgIndex = Record<string, SvgIndexEntry>;
  * @param assetsDir - Absolute path to the assets directory
  */
 export function mergeSvgAssets(assetsDir: string) {
-    const binName = 'assets.bin';
-    const jsonName = 'assets.json';
+    try {
+        const binName = 'assets.bin';
+        const jsonName = 'assets.json';
 
-    const binPath = path.resolve(assetsDir, binName);
-    const jsonPath = path.resolve(assetsDir, jsonName);
+        const binPath = path.resolve(assetsDir, binName);
+        const jsonPath = path.resolve(assetsDir, jsonName);
 
-    let index: SvgIndex = {};
-    let offset = 0;
+        let index: SvgIndex = {};
+        let offset = 0;
 
-    if (!fs.existsSync(assetsDir)) {
-        fs.mkdirSync(assetsDir, { recursive: true });
-    }
+        if (!fs.existsSync(assetsDir)) {
+            fs.mkdirSync(assetsDir, { recursive: true });
+        }
 
-    if (fs.existsSync(binPath) && fs.existsSync(jsonPath)) {
         try {
-            index = JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as SvgIndex;
-            offset = fs.statSync(binPath).size;
+            const jsonData = fs.readFileSync(jsonPath, 'utf8');
+            const binStats = fs.statSync(binPath);
+
+            index = JSON.parse(jsonData) as SvgIndex;
+            offset = binStats.size;
         } catch (err) {
             console.warn(
-                '[mergeSvgAssets] Failed to read index, starting fresh:',
-                err
+                '[mergeSvgAssets] Assets missing or corrupted, starting fresh'
             );
-
             index = {};
             offset = 0;
-
-            if (fs.existsSync(binPath)) {
-                fs.unlinkSync(binPath);
-            }
-            if (fs.existsSync(jsonPath)) {
-                fs.unlinkSync(jsonPath);
-            }
-        }
-    } else {
-        if (fs.existsSync(binPath)) {
-            fs.unlinkSync(binPath);
+            cleanupFiles(binPath, jsonPath);
         }
-        if (fs.existsSync(jsonPath)) {
-            fs.unlinkSync(jsonPath);
-        }
-    }
 
-    const files = fs.readdirSync(assetsDir).sort();
-    let added = 0;
+        const files = fs
+            .readdirSync(assetsDir)
+            .filter(f => f.endsWith('.svg'))
+            .sort();
 
-    for (const f of files) {
-        if (f === binName || f === jsonName) {
-            continue;
-        }
+        let added = 0;
+
+        for (const f of files) {
+            const id = path.basename(f, path.extname(f));
+            if (index[id]) {
+                continue;
+            }
 
-        const id = path.basename(f, path.extname(f));
-        if (index[id]) {
-            continue;
+            try {
+                const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
+                const buf = Buffer.from(svg, 'utf8');
+                const length = buf.length;
+
+                fs.appendFileSync(binPath, buf);
+                index[id] = { offset, length };
+                offset += length;
+                added++;
+            } catch (err) {
+                console.warn(
+                    `[SessionReplayAssetBundler] Failed to process ${f}:`,
+                    err
+                );
+            }
         }
 
-        try {
-            const svg = fs.readFileSync(path.join(assetsDir, f), 'utf8');
-            const buf = Buffer.from(svg, 'utf8');
-            const length = buf.length;
-
-            fs.appendFileSync(binPath, buf);
-            index[id] = { offset, length };
-            offset += length;
-            added++;
-        } catch (err) {
-            console.warn(
-                `[SessionReplayAggregator] Failed to process ${f}:`,
-                err
+        fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
+        if (added > 0) {
+            console.log(
+                `[SessionReplayAssetBundler] Packed ${added} new Session Replay SVG assets → total: ${
+                    Object.keys(index).length
+                }`
             );
         }
-    }
-
-    fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
-    if (added > 0) {
-        console.log(
-            `[SessionReplayAggregator] Packed ${added} new Session Replay SVG assets → total: ${
-                Object.keys(index).length
-            }`
+    } catch (err) {
+        console.error(
+            '[mergeSvgAssets] Unexpected error during asset merge',
+            err
         );
     }
 }

From 53c8ef206de313d0614752fb203fab562a691cf2 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 22:28:55 +0100
Subject: [PATCH 26/35] Improve support for SVG properties in style objects &
 Extract SVG transform properties from style objects

---
 .../react-native-svg/handlers/RNSvgHandler.ts |  8 +-
 .../react-native-svg/processing/attributes.ts | 32 +++++++-
 .../src/libraries/react-native-svg/utils.ts   | 75 ++++++++++---------
 3 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
index 7c67d12e4..d65c3cfdb 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/handlers/RNSvgHandler.ts
@@ -195,13 +195,12 @@ export class RNSvgHandler implements SvgHandler {
                 const rnAttributesHandled = handleRNSpecificAttributes(
                     t,
                     attr,
-                    attr.name.name
+                    attr.name.name,
+                    transformsArray
                 );
 
                 if (rnAttributesHandled) {
-                    if (attr.name.name !== 'style') {
-                        el.attributes.splice(index, 1);
-                    }
+                    el.attributes.splice(index, 1);
                     continue;
                 }
 
@@ -252,7 +251,6 @@ export class RNSvgHandler implements SvgHandler {
                 );
 
                 if (arrayAttributesHandled) {
-                    el.attributes.splice(index, 1);
                     continue;
                 }
 
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
index 39e20751b..7a413be11 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/processing/attributes.ts
@@ -32,21 +32,46 @@ import {
 /**
  * Handles React Native–specific attributes that are not directly supported in web SVG.
  * Currently processes the `style` attribute by converting it to a flat inline CSS string.
+ * Extracts transform properties from style objects and adds them to the transforms array.
  *
  * @param t - Babel types helper.
  * @param attr - JSX attribute node to process.
  * @param attrName - Name of the attribute (e.g., 'style').
+ * @param transformsArray - Optional array to collect transform operations from style objects.
  * @returns True if the attribute was handled (and should be removed), false otherwise.
  */
 export function handleRNSpecificAttributes(
     t: typeof Babel.types,
     attr: Babel.types.JSXAttribute,
-    attrName: string
+    attrName: string,
+    transformsArray: { name: string; value: string | number }[] = []
 ) {
     if (rnAttributeNames.has(attrName)) {
         if (attrName === 'style') {
             const styleObj = parseStyleNode(t, attr);
             if (styleObj) {
+                // Extract transform properties and add to transforms array
+                const transformProps = [
+                    'translateX',
+                    'translateY',
+                    'scaleX',
+                    'scaleY',
+                    'rotate',
+                    'skewX',
+                    'skewY'
+                ];
+
+                for (const prop of transformProps) {
+                    if (styleObj[prop] != null) {
+                        transformsArray.push({
+                            name: prop,
+                            value: styleObj[prop]
+                        });
+                        delete styleObj[prop];
+                    }
+                }
+
+                // Convert remaining (non-transform) properties to CSS
                 const cssObj = convertStyleObjToCssObj(styleObj);
                 const styleString = Object.entries(cssObj)
                     .map(([k, v]) => `${k}:${v}`)
@@ -54,8 +79,11 @@ export function handleRNSpecificAttributes(
 
                 if (styleString) {
                     attr.value = t.stringLiteral(styleString);
-                    return true;
+                    return false; // Keep the style attribute
                 }
+
+                // If no CSS properties remain, the style should be removed
+                return true;
             }
 
             return true;
diff --git a/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts b/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts
index 9b4bef739..61fb25411 100644
--- a/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts
+++ b/packages/react-native-babel-plugin/src/libraries/react-native-svg/utils.ts
@@ -218,42 +218,8 @@ export function convertStyleObjToCssObj(
         css['column-gap'] = addPx(style.columnGap);
     }
 
-    // Transforms
-    if (Array.isArray(style.transform)) {
-        const parts: string[] = [];
-        for (const t of style.transform) {
-            const k = Object.keys(t)[0] as keyof typeof t;
-            const v: any = (t as any)[k];
-            if (k === 'translateX') {
-                parts.push(`translateX(${addPx(v)})`);
-            } else if (k === 'translateY') {
-                parts.push(`translateY(${addPx(v)})`);
-            } else if (k === 'translate') {
-                const [x = 0, y = 0] = v || [];
-                parts.push(`translate(${addPx(x)} ${addPx(y)})`);
-            } else if (k === 'scale') {
-                parts.push(`scale(${v})`);
-            } else if (k === 'scaleX') {
-                parts.push(`scaleX(${v})`);
-            } else if (k === 'scaleY') {
-                parts.push(`scaleY(${v})`);
-            } else if (k === 'rotate') {
-                parts.push(`rotate(${v})`);
-            } else if (k === 'skewX') {
-                parts.push(`skewX(${v})`);
-            } else if (k === 'skewY') {
-                parts.push(`skewY(${v})`);
-            } else if (k === 'matrix') {
-                parts.push(`matrix(${v.join(',')})`);
-            }
-        }
-        if (parts.length) {
-            css.transform = parts.join(' ');
-        }
-    }
-    if (style.transformMatrix) {
-        css.transform = `matrix(${style.transformMatrix.join(',')})`;
-    }
+    // Transform properties (translateX, scaleX, rotate, etc.) are NOT handled here as they are igonore if set on a style attribute
+    // They should be extracted separately and set as SVG transform attributes,
 
     // Shadows / elevation → box-shadow
     if (
@@ -292,6 +258,43 @@ export function convertStyleObjToCssObj(
         css['aspect-ratio'] = String(style.aspectRatio);
     }
 
+    // SVG-specific properties
+    if (style.fill) {
+        css.fill = style.fill;
+    }
+    if (style.fillOpacity != null) {
+        css['fill-opacity'] = style.fillOpacity;
+    }
+    if (style.fillRule) {
+        css['fill-rule'] = style.fillRule;
+    }
+    if (style.stroke) {
+        css.stroke = style.stroke;
+    }
+    if (style.strokeWidth != null) {
+        css['stroke-width'] = style.strokeWidth;
+    }
+    if (style.strokeOpacity != null) {
+        css['stroke-opacity'] = style.strokeOpacity;
+    }
+    if (style.strokeLinecap) {
+        css['stroke-linecap'] = style.strokeLinecap;
+    }
+    if (style.strokeLinejoin) {
+        css['stroke-linejoin'] = style.strokeLinejoin;
+    }
+    if (style.strokeDasharray) {
+        css['stroke-dasharray'] = Array.isArray(style.strokeDasharray)
+            ? style.strokeDasharray.join(',')
+            : style.strokeDasharray;
+    }
+    if (style.strokeDashoffset != null) {
+        css['stroke-dashoffset'] = style.strokeDashoffset;
+    }
+    if (style.strokeMiterlimit != null) {
+        css['stroke-miterlimit'] = style.strokeMiterlimit;
+    }
+
     return css;
 }
 

From 9d69fb839b09f6b489f1c4dce957224cbf0af3e3 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Wed, 15 Oct 2025 23:48:07 +0100
Subject: [PATCH 27/35] Add SVG conversion units tests

---
 .../react-native-babel-plugin/jest.config.js  |   3 +-
 .../test/react-native-svg.test.ts             | 746 ++++++++++++++++++
 2 files changed, 748 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-babel-plugin/test/react-native-svg.test.ts

diff --git a/packages/react-native-babel-plugin/jest.config.js b/packages/react-native-babel-plugin/jest.config.js
index dffbd51b0..ad893f9e1 100644
--- a/packages/react-native-babel-plugin/jest.config.js
+++ b/packages/react-native-babel-plugin/jest.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     transform: {
         '^.+\\.(t|j)sx?$': '@swc/jest'
-    }
+    },
+    transformIgnorePatterns: ['node_modules/(?!(uuid)/)']
 };
diff --git a/packages/react-native-babel-plugin/test/react-native-svg.test.ts b/packages/react-native-babel-plugin/test/react-native-svg.test.ts
new file mode 100644
index 000000000..e3070a95f
--- /dev/null
+++ b/packages/react-native-babel-plugin/test/react-native-svg.test.ts
@@ -0,0 +1,746 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+/* eslint quotes: ["off"] */
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import * as t from '@babel/types';
+
+import { RNSvgHandler } from '../src/libraries/react-native-svg/handlers/RNSvgHandler';
+
+/**
+ * Helper function to test SVG transformation
+ */
+function transformSvg(code: string): string | undefined {
+    const ast = parser.parse(code, {
+        sourceType: 'module',
+        plugins: ['jsx', 'typescript']
+    });
+
+    let result: string | undefined;
+
+    traverse(ast, {
+        JSXElement(path) {
+            if (t.isJSXIdentifier(path.node.openingElement.name)) {
+                const name = path.node.openingElement.name.name;
+                if (name === 'Svg') {
+                    const dimensions: Record<string, string> = {};
+                    const handler = new RNSvgHandler(t, path, name);
+                    result = handler.transformSvgNode(dimensions);
+                }
+            }
+        }
+    });
+
+    return result;
+}
+
+describe('React Native SVG Processing - RNSvgHandler', () => {
+    describe('Basic SVG Transformation', () => {
+        it('should transform a basic SVG element', () => {
+            const input =
+                '<Svg width="100" height="100"><Rect x="10" y="10" width="80" height="80" fill="red" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="80" height="80" fill="red" /></svg>"`
+            );
+        });
+
+        it('should transform SVG with self-closing elements', () => {
+            const input =
+                '<Svg width="50" height="50"><Circle cx="25" cy="25" r="20" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20" /></svg>"`
+            );
+        });
+
+        it('should transform nested SVG elements (g, rect, circle)', () => {
+            const input =
+                '<Svg width="200" height="200"><G><Rect x="0" y="0" width="100" height="100" /><Circle cx="150" cy="150" r="40" /></G></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="100" height="100" /><circle cx="150" cy="150" r="40" /></g></svg>"`
+            );
+        });
+
+        it('should transform SVG with multiple child elements', () => {
+            const input =
+                '<Svg><Path d="M10 10 L90 90" /><Line x1="10" y1="90" x2="90" y2="10" /><Ellipse cx="50" cy="50" rx="30" ry="20" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 L90 90" /><line x1="10" y1="90" x2="90" y2="10" /><ellipse cx="50" cy="50" rx="30" ry="20" /></svg>"`
+            );
+        });
+    });
+
+    describe('ViewBox Preservation', () => {
+        it('should preserve viewBox attribute on SVG element', () => {
+            const input =
+                '<Svg viewBox="0 0 100 100" width="200" height="200"><Circle cx="50" cy="50" r="40" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>"`
+            );
+        });
+
+        it('should preserve viewBox with different numeric formats (integers, decimals)', () => {
+            const input =
+                '<Svg viewBox="0 0 100.5 200.75"><Rect x="10.25" y="20.5" width="50" height="75" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg viewBox="0 0 100.5 200.75" xmlns="http://www.w3.org/2000/svg"><rect x="10.25" y="20.5" width="50" height="75" /></svg>"`
+            );
+        });
+    });
+
+    describe('Transform Attributes - Separate Properties', () => {
+        it('should handle translateX transform attribute', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" translateX={20} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(20)" /></svg>"`
+            );
+        });
+
+        it('should handle translateY transform attribute', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" translateY={30} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(0, 30)" /></svg>"`
+            );
+        });
+
+        it('should handle both translateX and translateY attributes', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" translateX={20} translateY={30} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(20, 30)" /></svg>"`
+            );
+        });
+
+        it('should handle scaleX transform attribute', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="20" scaleX={1.5} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="20" transform="scale(1.5)" /></svg>"`
+            );
+        });
+
+        it('should handle scaleY transform attribute', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="20" scaleY={2} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="20" transform="scale(1, 2)" /></svg>"`
+            );
+        });
+
+        it('should handle both scaleX and scaleY attributes', () => {
+            const input =
+                '<Svg><Ellipse cx="50" cy="50" rx="30" ry="20" scaleX={1.5} scaleY={0.8} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><ellipse cx="50" cy="50" rx="30" ry="20" transform="scale(1.5, 0.8)" /></svg>"`
+            );
+        });
+
+        it('should handle rotate transform attribute', () => {
+            const input =
+                '<Svg><Rect x="40" y="40" width="20" height="20" rotate={45} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="40" y="40" width="20" height="20" transform="rotate(45)" /></svg>"`
+            );
+        });
+
+        it('should handle skewX transform attribute', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" skewX={15} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="skewX(15)" /></svg>"`
+            );
+        });
+
+        it('should handle skewY transform attribute', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" skewY={10} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="skewY(10)" /></svg>"`
+            );
+        });
+
+        it('should handle matrix transform attribute', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" matrix={[1, 0, 0, 1, 30, 30]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="matrix(1 0 0 1 30 30)" /></svg>"`
+            );
+        });
+
+        it('should combine multiple separate transform attributes into single transform string', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" translateX={20} translateY={30} scaleX={1.2} rotate={45} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(20, 30) scale(1.2) rotate(45)" /></svg>"`
+            );
+        });
+    });
+
+    describe('Transform Attributes - Array Format', () => {
+        it('should handle transform attribute as array of objects', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" transform={[{ translateX: 20 }]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(20)" /></svg>"`
+            );
+        });
+
+        it('should handle transform array with translate operations', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="30" transform={[{ translateX: 10 }, { translateY: 20 }]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="30" transform="translate(10, 20)" /></svg>"`
+            );
+        });
+
+        it('should handle transform array with scale operations', () => {
+            const input =
+                '<Svg><Ellipse cx="50" cy="50" rx="20" ry="30" transform={[{ scaleX: 1.5 }, { scaleY: 2 }]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><ellipse cx="50" cy="50" rx="20" ry="30" transform="scale(1.5, 2)" /></svg>"`
+            );
+        });
+
+        it('should handle transform array with mixed transform operations', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="40" height="40" transform={[{ translateX: 15 }, { rotate: 30 }, { scaleX: 1.2 }]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="40" height="40" transform="translate(15) scale(1.2) rotate(30)" /></svg>"`
+            );
+        });
+
+        it('should handle transform array containing matrix', () => {
+            const input =
+                '<Svg><Path d="M10 10 L50 50" transform={[{ matrix: [1, 0, 0, 1, 10, 10] }]} stroke="black" strokeWidth="2" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 L50 50" stroke="black" stroke-width="2" transform="matrix(1 0 0 1 10 10)" /></svg>"`
+            );
+        });
+    });
+
+    describe('Transform Attributes - Style Object', () => {
+        it('should extract and process transform properties from style object', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" style={{ translateX: 20, translateY: 30 }} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" transform="translate(20, 30)" /></svg>"`
+            );
+        });
+
+        it('should handle transform in style object alongside other CSS properties', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="30" style={{ fill: "blue", opacity: 0.8, translateX: 15 }} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="30" style="opacity:0.8;fill:blue" transform="translate(15)" /></svg>"`
+            );
+        });
+
+        it('should handle multiple transform properties within style object', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="40" height="40" style={{ translateX: 10, translateY: 20, scaleX: 1.5, rotate: 45 }} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="40" height="40" transform="translate(10, 20) scale(1.5) rotate(45)" /></svg>"`
+            );
+        });
+
+        it('should convert non-transform style properties to inline CSS string', () => {
+            const input =
+                '<Svg><Path d="M10 10 L50 50" style={{ stroke: "red", strokeWidth: 2, fill: "none" }} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 L50 50" style="fill:none;stroke:red;stroke-width:2" /></svg>"`
+            );
+        });
+    });
+
+    describe('Dimension Handling - Width and Height', () => {
+        it('should extract and preserve static width and height values', () => {
+            const input =
+                '<Svg width="100" height="200"><Rect x="0" y="0" width="50" height="100" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="50" height="100" /></svg>"`
+            );
+        });
+
+        it('should handle numeric width and height without units', () => {
+            const input =
+                '<Svg width={150} height={250}><Circle cx="75" cy="125" r="50" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg"><circle cx="75" cy="125" r="50" /></svg>"`
+            );
+        });
+
+        it('should handle percentage-based width and height', () => {
+            const input =
+                '<Svg width="100%" height="50%"><Path d="M0 0 L100 100" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100%" height="50%" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 100" /></svg>"`
+            );
+        });
+
+        it('should resolve width and height from variables in component scope', () => {
+            const input =
+                'const width = 300; <Svg width={width} height={200}><Rect x="0" y="0" width="100" height="100" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" /></svg>"`
+            );
+        });
+
+        it('should remove width/height attributes when variables cannot be resolved', () => {
+            const input =
+                '<Svg width={unknownVar} height={anotherVar}><Circle cx="50" cy="50" r="40" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>"`
+            );
+        });
+
+        it('should handle SVG with only width specified', () => {
+            const input =
+                '<Svg width="100"><Rect x="10" y="10" width="80" height="80" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="80" height="80" /></svg>"`
+            );
+        });
+
+        it('should handle SVG with only height specified', () => {
+            const input =
+                '<Svg height="100"><Ellipse cx="50" cy="50" rx="30" ry="40" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg height="100" xmlns="http://www.w3.org/2000/svg"><ellipse cx="50" cy="50" rx="30" ry="40" /></svg>"`
+            );
+        });
+
+        it('should handle SVG without width or height attributes', () => {
+            const input =
+                '<Svg viewBox="0 0 100 100"><Circle cx="50" cy="50" r="40" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>"`
+            );
+        });
+    });
+
+    describe('Attribute Name Conversion', () => {
+        it('should convert camelCase attribute names to kebab-case', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" strokeWidth="2" fillOpacity="0.5" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" stroke-width="2" fill-opacity="0.5" /></svg>"`
+            );
+        });
+
+        it('should preserve attributes already in kebab-case format', () => {
+            const input =
+                '<Svg><Path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" /></svg>"`
+            );
+        });
+
+        it('should preserve special SVG attributes that are camelCase in web spec', () => {
+            const input =
+                '<Svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet"><Rect x="50" y="50" width="100" height="100" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="50" width="100" height="100" /></svg>"`
+            );
+        });
+    });
+
+    describe('Element Name Conversion', () => {
+        it('should convert Svg component to svg element', () => {
+            const input = '<Svg width="100" height="100" />';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" />"`
+            );
+        });
+
+        it('should convert Circle component to circle element', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="40" fill="blue" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="blue" /></svg>"`
+            );
+        });
+
+        it('should convert Rect component to rect element', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="80" height="60" fill="green" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="80" height="60" fill="green" /></svg>"`
+            );
+        });
+
+        it('should convert Path component to path element', () => {
+            const input =
+                '<Svg><Path d="M10 10 L90 90 L10 90 Z" fill="red" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 L90 90 L10 90 Z" fill="red" /></svg>"`
+            );
+        });
+
+        it('should convert G component to g element', () => {
+            const input =
+                '<Svg><G opacity="0.8"><Circle cx="50" cy="50" r="30" fill="pink" /></G></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><g opacity="0.8"><circle cx="50" cy="50" r="30" fill="pink" /></g></svg>"`
+            );
+        });
+
+        it('should convert Line component to line element', () => {
+            const input =
+                '<Svg><Line x1="0" y1="0" x2="100" y2="100" stroke="black" strokeWidth="2" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" /></svg>"`
+            );
+        });
+
+        it('should convert Polygon component to polygon element', () => {
+            const input =
+                '<Svg><Polygon points="50,10 90,90 10,90" fill="purple" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><polygon points="50,10 90,90 10,90" fill="purple" /></svg>"`
+            );
+        });
+
+        it('should convert Polyline component to polyline element', () => {
+            const input =
+                '<Svg><Polyline points="10,10 50,50 90,10" stroke="orange" strokeWidth="3" fill="none" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><polyline points="10,10 50,50 90,10" stroke="orange" stroke-width="3" fill="none" /></svg>"`
+            );
+        });
+
+        it('should convert Ellipse component to ellipse element', () => {
+            const input =
+                '<Svg><Ellipse cx="50" cy="50" rx="40" ry="25" fill="cyan" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><ellipse cx="50" cy="50" rx="40" ry="25" fill="cyan" /></svg>"`
+            );
+        });
+
+        it('should convert Text component to text element', () => {
+            const input =
+                '<Svg><Text x="10" y="50" fontSize="20" fill="black">Hello SVG</Text></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><text x="10" y="50" font-size="20" fill="black">Hello SVG</text></svg>"`
+            );
+        });
+
+        it('should convert ClipPath component to clipPath element', () => {
+            const input =
+                '<Svg><Defs><ClipPath id="clip"><Circle cx="50" cy="50" r="40" /></ClipPath></Defs><Rect width="100" height="100" fill="blue" clipPath="url(#clip)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clip"><circle cx="50" cy="50" r="40" /></clipPath></defs><rect width="100" height="100" fill="blue" clip-path="url(#clip)" /></svg>"`
+            );
+        });
+
+        it('should convert Defs component to defs element', () => {
+            const input =
+                '<Svg><Defs><Circle id="myCircle" cx="50" cy="50" r="40" /></Defs><Use href="#myCircle" fill="lightgreen" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><circle id="myCircle" cx="50" cy="50" r="40" /></defs><use href="#myCircle" fill="lightgreen" /></svg>"`
+            );
+        });
+
+        it('should convert LinearGradient component to linearGradient element', () => {
+            const input =
+                '<Svg><Defs><LinearGradient id="grad1"><Stop offset="0%" stopColor="red" /><Stop offset="100%" stopColor="blue" /></LinearGradient></Defs><Rect width="100" height="100" fill="url(#grad1)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad1"><stop offset="0%" stop-color="red" /><stop offset="100%" stop-color="blue" /></linearGradient></defs><rect width="100" height="100" fill="url(#grad1)" /></svg>"`
+            );
+        });
+
+        it('should convert RadialGradient component to radialGradient element', () => {
+            const input =
+                '<Svg><Defs><RadialGradient id="grad2"><Stop offset="0%" stopColor="white" /><Stop offset="100%" stopColor="black" /></RadialGradient></Defs><Circle cx="50" cy="50" r="50" fill="url(#grad2)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="grad2"><stop offset="0%" stop-color="white" /><stop offset="100%" stop-color="black" /></radialGradient></defs><circle cx="50" cy="50" r="50" fill="url(#grad2)" /></svg>"`
+            );
+        });
+
+        it('should convert Stop component to stop element', () => {
+            const input =
+                '<Svg><Defs><LinearGradient id="grad"><Stop offset="0%" stopColor="yellow" stopOpacity="1" /><Stop offset="100%" stopColor="orange" stopOpacity="1" /></LinearGradient></Defs><Rect width="100" height="100" fill="url(#grad)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad"><stop offset="0%" stop-color="yellow" stop-opacity="1" /><stop offset="100%" stop-color="orange" stop-opacity="1" /></linearGradient></defs><rect width="100" height="100" fill="url(#grad)" /></svg>"`
+            );
+        });
+    });
+
+    describe('Array Attributes', () => {
+        it('should convert points array to space-separated string', () => {
+            const input =
+                '<Svg><Polygon points={[50, 10, 90, 90, 10, 90]} fill="red" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><polygon points="50 10 90 90 10 90" fill="red" /></svg>"`
+            );
+        });
+
+        it('should convert strokeDasharray array to comma-separated string', () => {
+            const input =
+                '<Svg><Line x1="0" y1="50" x2="100" y2="50" stroke="black" strokeDasharray={[5, 10, 15]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-dasharray="5 10 15" /></svg>"`
+            );
+        });
+
+        it('should convert gradientTransform array to proper format', () => {
+            const input =
+                '<Svg width="200" height="200"><Defs><LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><Stop offset="0%" stopColor="blue" /><Stop offset="100%" stopColor="lightblue" /></LinearGradient></Defs><Rect width="200" height="200" fill="url(#grad)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="blue" /><stop offset="100%" stop-color="lightblue" /></linearGradient></defs><rect width="200" height="200" fill="url(#grad)" /></svg>"`
+            );
+        });
+
+        it('should convert stdDeviation array to space-separated string', () => {
+            const input =
+                '<Svg><Defs><Filter id="blur"><FeGaussianBlur stdDeviation={[2, 4]} /></Filter></Defs><Rect width="200" height="200" fill="tomato" filter="url(#blur)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="blur"><feGaussianBlur stdDeviation="2 4" /></filter></defs><rect width="200" height="200" fill="tomato" filter="url(#blur)" /></svg>"`
+            );
+        });
+
+        it('should convert values array to proper format', () => {
+            const input =
+                '<Svg><Defs><Filter id="matrix"><FeColorMatrix type="matrix" values={[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]} /></Filter></Defs><Rect width="200" height="200" fill="tomato" filter="url(#matrix)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="matrix"><feColorMatrix type="matrix" values="1;0;0;0;0;0;1;0;0;0;0;0;1;0;0;0;0;0;1;0" /></filter></defs><rect width="200" height="200" fill="tomato" filter="url(#matrix)" /></svg>"`
+            );
+        });
+    });
+
+    describe('React Native Specific Attributes', () => {
+        it('should remove accessibilityLabel attribute from SVG output', () => {
+            const input =
+                '<Svg accessibilityLabel="My SVG"><Circle cx="50" cy="50" r="40" accessibilityLabel="My Circle" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>"`
+            );
+        });
+
+        it('should remove accessibilityRole attribute from SVG output', () => {
+            const input =
+                '<Svg accessibilityRole="image"><Rect x="10" y="10" width="80" height="80" accessibilityRole="button" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="80" height="80" /></svg>"`
+            );
+        });
+
+        it('should convert style object to inline CSS string', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" style={{ opacity: 0.5, fill: "blue" }} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" style="opacity:0.5;fill:blue" /></svg>"`
+            );
+        });
+
+        it('should remove __self debugging attribute', () => {
+            const input =
+                '<Svg __self="this"><Circle cx="50" cy="50" r="30" __self="this" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="30" /></svg>"`
+            );
+        });
+    });
+
+    describe('Invalid and Unsupported Attributes', () => {
+        it('should remove attributes not in SVG spec', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" customProp="value" unknownAttr="test" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" /></svg>"`
+            );
+        });
+
+        it('should remove JSX spread attributes', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="40" fill="red" {...props} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" /></svg>"`
+            );
+        });
+    });
+
+    describe('Complex Scenarios', () => {
+        it('should handle SVG with dimensions, viewBox, transforms, and nested elements', () => {
+            const input =
+                '<Svg width="200" height="200" viewBox="0 0 100 100"><G translateX={10} translateY={10}><Rect x="10" y="10" width="30" height="30" fill="blue" /><Circle cx="70" cy="70" r="20" fill="red" /></G></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g transform="translate(10, 10)"><rect x="10" y="10" width="30" height="30" fill="blue" /><circle cx="70" cy="70" r="20" fill="red" /></g></svg>"`
+            );
+        });
+
+        it('should handle SVG with linearGradient, radialGradient, and filter elements', () => {
+            const input =
+                '<Svg><Filter id="blurMe"><FeGaussianBlur stdDeviation="5" /></Filter><Defs><LinearGradient id="lg"><Stop offset="0%" stopColor="red" /><Stop offset="100%" stopColor="blue" /></LinearGradient><RadialGradient id="rg"><Stop offset="0%" stopColor="white" /><Stop offset="100%" stopColor="black" /></RadialGradient></Defs><Rect width="50" height="50" fill="url(#lg)" /><Circle cx="75" cy="75" r="25" fill="url(#rg)" filter="url(#blurMe)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><filter id="blurMe"><feGaussianBlur stdDeviation="5" /></filter><defs><linearGradient id="lg"><stop offset="0%" stop-color="red" /><stop offset="100%" stop-color="blue" /></linearGradient><radialGradient id="rg"><stop offset="0%" stop-color="white" /><stop offset="100%" stop-color="black" /></radialGradient></defs><rect width="50" height="50" fill="url(#lg)" /><circle cx="75" cy="75" r="25" fill="url(#rg)" filter="url(#blurMe)" /></svg>"`
+            );
+        });
+
+        it('should handle SVG with clipPath', () => {
+            const input =
+                '<Svg><Defs><ClipPath id="clip1"><Circle cx="50" cy="50" r="40" /></ClipPath></Defs><Rect width="100" height="100" fill="green" clipPath="url(#clip1)" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clip1"><circle cx="50" cy="50" r="40" /></clipPath></defs><rect width="100" height="100" fill="green" clip-path="url(#clip1)" /></svg>"`
+            );
+        });
+
+        it('should handle SVG with text, tspan, and textPath elements', () => {
+            const input =
+                '<Svg><Text x="10" y="50" fontSize="16" fill="black">Hello <Tspan fontWeight="bold">World</Tspan></Text></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><text x="10" y="50" font-size="16" fill="black">Hello <tspan font-weight="bold">World</tspan></text></svg>"`
+            );
+        });
+
+        it('should handle deeply nested SVG element hierarchy', () => {
+            const input =
+                '<Svg><G><G><G><G><Circle cx="50" cy="50" r="10" fill="purple" /></G></G></G></G></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><g><g><g><g><circle cx="50" cy="50" r="10" fill="purple" /></g></g></g></g></svg>"`
+            );
+        });
+
+        it('should handle SVG with use elements referencing defs', () => {
+            const input =
+                '<Svg><Defs><G id="shape"><Circle cx="25" cy="25" r="20" fill="blue" /></G></Defs><Use href="#shape" x="0" y="0" /><Use href="#shape" x="50" y="50" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><defs><g id="shape"><circle cx="25" cy="25" r="20" fill="blue" /></g></defs><use href="#shape" x="0" y="0" /><use href="#shape" x="50" y="50" /></svg>"`
+            );
+        });
+    });
+
+    describe('Edge Cases', () => {
+        it('should handle empty SVG element with no children', () => {
+            const input = '<Svg width="100" height="100" />';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" />"`
+            );
+        });
+
+        it('should handle SVG with text-only content', () => {
+            const input = '<Svg><Text x="10" y="50">Plain text</Text></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><text x="10" y="50">Plain text</text></svg>"`
+            );
+        });
+
+        it('should handle or strip JSX comments in SVG', () => {
+            const input =
+                '<Svg>{/* This is a comment */}<Circle cx="50" cy="50" r="40" /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg">{/* This is a comment */}<circle cx="50" cy="50" r="40" /></svg>"`
+            );
+        });
+
+        it('should handle transform attributes with zero values', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" translateX={0} translateY={0} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" /></svg>"`
+            );
+        });
+
+        it('should handle transform attributes with negative values', () => {
+            const input =
+                '<Svg><Circle cx="50" cy="50" r="30" translateX={-10} translateY={-20} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="30" transform="translate(-10, -20)" /></svg>"`
+            );
+        });
+    });
+
+    describe('Error Handling', () => {
+        it('should throw error or warn for unsupported element names', () => {
+            const input = '<Svg><UnsupportedElement x="10" y="10" /></Svg>';
+            expect(() => transformSvg(input)).toThrow();
+        });
+
+        it('should handle malformed transform array gracefully', () => {
+            const input =
+                '<Svg><Rect x="10" y="10" width="50" height="50" transform={[null, undefined, { invalid: true }]} /></Svg>';
+            const output = transformSvg(input);
+            expect(output).toMatchInlineSnapshot(
+                `"<svg xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="50" height="50" /></svg>"`
+            );
+        });
+    });
+});

From a8dd72261606a23a9ae054f3e4f7ddd6321dc96a Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Thu, 16 Oct 2025 22:04:38 +0100
Subject: [PATCH 28/35] Fix linting issues in session replay and babel plugin
 packages

---
 .../src/cli/generate-sr-assets.ts             |  8 +++----
 .../src/types/general.ts                      |  2 +-
 .../ReactNativeInternalCallback.kt            | 23 ++++---------------
 .../sessionreplay/mappers/SvgViewMapper.kt    |  1 +
 .../sessionreplay/views/DdPrivacyView.kt      |  2 +-
 .../views/DdPrivacyViewManager.kt             |  1 +
 .../scripts/build-assets.js                   |  2 --
 .../src/metro/processing.ts                   |  2 +-
 8 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
index ff6eba945..0f3eabd48 100644
--- a/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
+++ b/packages/react-native-babel-plugin/src/cli/generate-sr-assets.ts
@@ -79,7 +79,7 @@ function mergeSvgAssets(assetsDir: string) {
         }
 
         if (added > 0) {
-            console.log(
+            console.info(
                 `\nPacked ${added} new Session Replay assets -> total: ${
                     Object.keys(index).length
                 }`
@@ -116,7 +116,7 @@ function generateSessionReplayAssets() {
         process.exit(0);
     }
 
-    console.log(`Scanning for session replay assets in ${rootDir}...`);
+    console.info(`Scanning for session replay assets in ${rootDir}...`);
 
     // Clear existing assets to ensure a fresh state
     clearAssetsDir(assetsPath);
@@ -185,12 +185,12 @@ function generateSessionReplayAssets() {
     mergeSvgAssets(assetsPath);
 
     if (errorCount > 0) {
-        console.log(
+        console.info(
             'Asset generation finished, but some files encountered errors.'
         );
     }
 
-    console.log('Your assets are now ready to be used by Session Replay.');
+    console.info('Your assets are now ready to be used by Session Replay.');
 }
 
 // TODO: Add flag support [e.g., --verbose] (RUM-12186)
diff --git a/packages/react-native-babel-plugin/src/types/general.ts b/packages/react-native-babel-plugin/src/types/general.ts
index df760cb67..e1c1a60f1 100644
--- a/packages/react-native-babel-plugin/src/types/general.ts
+++ b/packages/react-native-babel-plugin/src/types/general.ts
@@ -7,8 +7,8 @@
 import type * as Babel from '@babel/core';
 
 import type { RumAction } from '../constants';
-
 import type { ReactNativeSVG } from '../libraries/react-native-svg';
+
 export const MemoTypes = {
     USE_CALLBACK: 'useCallback',
     USE_MEMO: 'useMemo'
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
index dfbfbbe23..1372f0731 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt
@@ -24,6 +24,9 @@ class ReactNativeInternalCallback(
 ) : SessionReplayInternalCallback {
     private var resourceQueue: SessionReplayInternalResourceQueue? = null
 
+    /**
+     * Companion object containing constants used by the internal callback implementation.
+     */
     companion object {
         private const val ASSETS_JSON = "assets.json"
         private const val ASSETS_BIN = "assets.bin"
@@ -32,14 +35,6 @@ class ReactNativeInternalCallback(
 
     private val jsonObject: JSONObject? = loadAssetsJson()
 
-    /**
-     * Loads and parses the `assets.json` file from the app's assets directory.
-     * The JSON file maps unique asset keys to metadata entries containing
-     * their offset and length inside the `assets.bin` binary file.
-     *
-     * @return A [JSONObject] representing the parsed asset index, or `null` if
-     * the file could not be read or contained invalid JSON.
-     */
     private fun loadAssetsJson(): JSONObject? {
         return try {
             val jsonText = reactContext.assets.open(ASSETS_JSON)
@@ -87,23 +82,13 @@ class ReactNativeInternalCallback(
 
         return try {
             readAssetBytes(reactContext, offset, length)
-        } catch (e: Exception) {
+        } catch (e: IOException) {
             Log.w(TAG, "Failed to read entry from binary: ${e.message}")
             null
         }
     }
 
 
-    /**
-     * Reads a specific byte range from the `assets.bin` file.
-     * Skips forward to the given offset and reads `length` bytes.
-     *
-     * @param context The React context used to access the app's assets.
-     * @param offset The byte offset within `assets.bin` to start reading from.
-     * @param length The number of bytes to read.
-     * @return A [ByteArray] containing the requested portion of the binary asset.
-     * @throws IOException If the file cannot be read or skipped to the correct offset.
-     */
     private fun readAssetBytes(context: ReactContext, offset: Int, length: Int): ByteArray {
         context.assets.open(ASSETS_BIN).use { input ->
             var skipped = 0L
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
index 87a08c2f2..9bb8bf167 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt
@@ -29,6 +29,7 @@ internal open class SvgViewMapper<T: View>(
 ) {
     private val queuedResourceIds = Collections.synchronizedSet(HashSet<String>())
 
+    @Suppress("LongMethod", "ComplexMethod")
     override fun map(
         view: T,
         mappingContext: MappingContext,
diff --git a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
index 16b7c50a2..a246c8aab 100644
--- a/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
+++ b/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyView.kt
@@ -56,7 +56,7 @@ class DdPrivacyView(context: Context) : ReactViewGroup(context) {
     var nativeID: String? = null
 
     /**
-     * Defines a set of attributes used for transformations
+     * Defines a set of attributes used for transformations.
      */
     var attributes: Map<String, String>? = null
 
diff --git a/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt b/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
index 51585bb32..7225e7ac7 100644
--- a/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
+++ b/packages/react-native-session-replay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/views/DdPrivacyViewManager.kt
@@ -6,6 +6,7 @@
 package com.datadog.reactnative.sessionreplay.views
 
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
diff --git a/packages/react-native-session-replay/scripts/build-assets.js b/packages/react-native-session-replay/scripts/build-assets.js
index 67c170543..f7f543a3b 100644
--- a/packages/react-native-session-replay/scripts/build-assets.js
+++ b/packages/react-native-session-replay/scripts/build-assets.js
@@ -19,13 +19,11 @@ function ensureAssets() {
     // Create empty .bin if missing
     if (!fs.existsSync(binPath)) {
         fs.writeFileSync(binPath, Buffer.alloc(0));
-        console.log('[build-assets] Created', binPath);
     }
 
     // Create empty .json if missing
     if (!fs.existsSync(jsonPath)) {
         fs.writeFileSync(jsonPath, JSON.stringify({}, null, 2));
-        console.log('[build-assets] Created', jsonPath);
     }
 }
 
diff --git a/packages/react-native-session-replay/src/metro/processing.ts b/packages/react-native-session-replay/src/metro/processing.ts
index 3db3e1db6..767c268c8 100644
--- a/packages/react-native-session-replay/src/metro/processing.ts
+++ b/packages/react-native-session-replay/src/metro/processing.ts
@@ -104,7 +104,7 @@ export function mergeSvgAssets(assetsDir: string) {
 
         fs.writeFileSync(jsonPath, JSON.stringify(index, null, 2));
         if (added > 0) {
-            console.log(
+            console.info(
                 `[SessionReplayAssetBundler] Packed ${added} new Session Replay SVG assets → total: ${
                     Object.keys(index).length
                 }`

From ec7f136ae912d5c46b750b4731b1599abbb54a1b Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Thu, 16 Oct 2025 22:05:10 +0100
Subject: [PATCH 29/35] Update session replay package android tests

---
 .../DdSessionReplayImplementationTest.kt      |  8 ++++++
 ...NativeSessionReplayExtensionSupportTest.kt | 26 +++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementationTest.kt b/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementationTest.kt
index 3d6a2c6d5..353c40635 100644
--- a/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementationTest.kt
+++ b/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementationTest.kt
@@ -6,6 +6,7 @@
 
 package com.datadog.reactnative.sessionreplay
 
+import android.content.res.AssetManager
 import com.datadog.android.sessionreplay.ImagePrivacy
 import com.datadog.android.sessionreplay.SessionReplayConfiguration
 import com.datadog.android.sessionreplay.SessionReplayPrivacy
@@ -20,6 +21,7 @@ import fr.xgouchet.elmyr.annotation.BoolForgery
 import fr.xgouchet.elmyr.annotation.DoubleForgery
 import fr.xgouchet.elmyr.annotation.StringForgery
 import fr.xgouchet.elmyr.junit5.ForgeExtension
+import java.io.IOException
 import org.junit.jupiter.api.AfterEach
 import org.junit.jupiter.api.BeforeEach
 import org.junit.jupiter.api.Test
@@ -31,6 +33,7 @@ import org.mockito.junit.jupiter.MockitoSettings
 import org.mockito.kotlin.any
 import org.mockito.kotlin.argumentCaptor
 import org.mockito.kotlin.doReturn
+import org.mockito.kotlin.doThrow
 import org.mockito.kotlin.verify
 import org.mockito.kotlin.whenever
 import org.mockito.quality.Strictness
@@ -56,6 +59,9 @@ internal class DdSessionReplayImplementationTest {
     @Mock
     lateinit var mockUiManagerModule: UIManagerModule
 
+    @Mock
+    lateinit var mockAssetManager: AssetManager
+
     private val imagePrivacyMap = mapOf(
         "MASK_ALL" to ImagePrivacy.MASK_ALL,
         "MASK_NON_BUNDLED_ONLY" to ImagePrivacy.MASK_LARGE_ONLY,
@@ -77,6 +83,8 @@ internal class DdSessionReplayImplementationTest {
     fun `set up`() {
         whenever(mockReactContext.getNativeModule(any<Class<NativeModule>>()))
             .doReturn(mockUiManagerModule)
+        whenever(mockReactContext.assets).doReturn(mockAssetManager)
+        whenever(mockAssetManager.open(any())).doThrow(IOException("No assets in test"))
 
         testedSessionReplay =
             DdSessionReplayImplementation(mockReactContext) { mockSessionReplay }
diff --git a/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupportTest.kt b/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupportTest.kt
index ffc144f86..7f1044042 100644
--- a/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupportTest.kt
+++ b/packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupportTest.kt
@@ -6,17 +6,20 @@
 
 package com.datadog.reactnative.sessionreplay
 
+import android.content.res.AssetManager
 import com.datadog.android.api.InternalLogger
 import com.datadog.reactnative.sessionreplay.mappers.ReactEditTextMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactNativeImageViewMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactTextMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactViewGroupMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactViewModalMapper
+import com.datadog.reactnative.sessionreplay.mappers.SvgViewMapper
 import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import fr.xgouchet.elmyr.junit5.ForgeExtension
+import java.io.IOException
 import org.assertj.core.api.Assertions.assertThat
 import org.junit.jupiter.api.BeforeEach
 import org.junit.jupiter.api.Test
@@ -27,6 +30,7 @@ import org.mockito.junit.jupiter.MockitoExtension
 import org.mockito.junit.jupiter.MockitoSettings
 import org.mockito.kotlin.any
 import org.mockito.kotlin.doReturn
+import org.mockito.kotlin.doThrow
 import org.mockito.kotlin.whenever
 import org.mockito.quality.Strictness
 
@@ -46,15 +50,24 @@ internal class ReactNativeSessionReplayExtensionSupportTest {
     @Mock
     private lateinit var mockLogger: InternalLogger
 
+    @Mock
+    private lateinit var mockAssetManager: AssetManager
+
     private lateinit var testedExtensionSupport: ReactNativeSessionReplayExtensionSupport
 
     @BeforeEach
     fun `set up`() {
         whenever(mockReactContext.getNativeModule(any<Class<NativeModule>>()))
             .doReturn(mockUiManagerModule)
+        whenever(mockReactContext.assets).doReturn(mockAssetManager)
+        whenever(mockAssetManager.open(any())).doThrow(IOException("No assets in test"))
 
+        val internalCallback = ReactNativeInternalCallback(mockReactContext)
         val textViewUtils = TextViewUtils.create(mockReactContext, mockLogger)
-        testedExtensionSupport = ReactNativeSessionReplayExtensionSupport(textViewUtils)
+        testedExtensionSupport = ReactNativeSessionReplayExtensionSupport(
+            textViewUtils,
+            internalCallback
+        )
     }
 
     @Test
@@ -63,21 +76,24 @@ internal class ReactNativeSessionReplayExtensionSupportTest {
         val customViewMappers = testedExtensionSupport.getCustomViewMappers()
 
         // Then
-        assertThat(customViewMappers).hasSize(5)
+        assertThat(customViewMappers).hasSize(6)
 
         assertThat(customViewMappers[0].getUnsafeMapper())
             .isInstanceOf(ReactNativeImageViewMapper::class.java)
 
         assertThat(customViewMappers[1].getUnsafeMapper())
-            .isInstanceOf(ReactViewGroupMapper::class.java)
+            .isInstanceOf(SvgViewMapper::class.java)
 
         assertThat(customViewMappers[2].getUnsafeMapper())
-            .isInstanceOf(ReactTextMapper::class.java)
+            .isInstanceOf(ReactViewGroupMapper::class.java)
 
         assertThat(customViewMappers[3].getUnsafeMapper())
-            .isInstanceOf(ReactEditTextMapper::class.java)
+            .isInstanceOf(ReactTextMapper::class.java)
 
         assertThat(customViewMappers[4].getUnsafeMapper())
+            .isInstanceOf(ReactEditTextMapper::class.java)
+
+        assertThat(customViewMappers[5].getUnsafeMapper())
             .isInstanceOf(ReactViewModalMapper::class.java)
     }
 }

From f289552455fa483870aa84257d15842d502d73fe Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Thu, 16 Oct 2025 22:17:39 +0100
Subject: [PATCH 30/35] Update `Podfile.lock` & `yarn.lock` files

---
 .../project.pbxproj                           | 58 ++++++++--------
 example-new-architecture/ios/Podfile.lock     | 50 +++++++-------
 example/ios/Podfile.lock                      | 66 +++++++++----------
 yarn.lock                                     | 66 +++++++++++++++++--
 4 files changed, 146 insertions(+), 94 deletions(-)

diff --git a/example-new-architecture/ios/DdSdkReactNativeExample.xcodeproj/project.pbxproj b/example-new-architecture/ios/DdSdkReactNativeExample.xcodeproj/project.pbxproj
index 2147632d7..ed252adbc 100644
--- a/example-new-architecture/ios/DdSdkReactNativeExample.xcodeproj/project.pbxproj
+++ b/example-new-architecture/ios/DdSdkReactNativeExample.xcodeproj/project.pbxproj
@@ -10,9 +10,9 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		38FDA727C2ADFB612BC59CAF /* libPods-DdSdkReactNativeExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 392B93CDAA416A9B63770F89 /* libPods-DdSdkReactNativeExample.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
 		E05973ABEC106467505BAF84 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 91A6167299744A7A5E90FD00 /* PrivacyInfo.xcprivacy */; };
+		F59778933728396AC9586AC3 /* libPods-DdSdkReactNativeExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F15FCB308661F5FE9CD1E2F0 /* libPods-DdSdkReactNativeExample.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -24,12 +24,12 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = DdSdkReactNativeExample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = DdSdkReactNativeExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = DdSdkReactNativeExample/main.m; sourceTree = "<group>"; };
-		392B93CDAA416A9B63770F89 /* libPods-DdSdkReactNativeExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-DdSdkReactNativeExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		6F4909953279AC89EEC11F97 /* Pods-DdSdkReactNativeExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DdSdkReactNativeExample.debug.xcconfig"; path = "Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample.debug.xcconfig"; sourceTree = "<group>"; };
+		4A4B8157669F7C844ABF982B /* Pods-DdSdkReactNativeExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DdSdkReactNativeExample.release.xcconfig"; path = "Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample.release.xcconfig"; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = DdSdkReactNativeExample/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		82767EEEA8B17AE9E7964826 /* Pods-DdSdkReactNativeExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DdSdkReactNativeExample.release.xcconfig"; path = "Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample.release.xcconfig"; sourceTree = "<group>"; };
 		91A6167299744A7A5E90FD00 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = DdSdkReactNativeExample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		943593C03DDD65A0F77DAD08 /* Pods-DdSdkReactNativeExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DdSdkReactNativeExample.debug.xcconfig"; path = "Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample.debug.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		F15FCB308661F5FE9CD1E2F0 /* libPods-DdSdkReactNativeExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-DdSdkReactNativeExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -37,7 +37,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				38FDA727C2ADFB612BC59CAF /* libPods-DdSdkReactNativeExample.a in Frameworks */,
+				F59778933728396AC9586AC3 /* libPods-DdSdkReactNativeExample.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -79,7 +79,7 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				392B93CDAA416A9B63770F89 /* libPods-DdSdkReactNativeExample.a */,
+				F15FCB308661F5FE9CD1E2F0 /* libPods-DdSdkReactNativeExample.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -117,8 +117,8 @@
 		BBD78D7AC51CEA395F1C20DB /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				6F4909953279AC89EEC11F97 /* Pods-DdSdkReactNativeExample.debug.xcconfig */,
-				82767EEEA8B17AE9E7964826 /* Pods-DdSdkReactNativeExample.release.xcconfig */,
+				943593C03DDD65A0F77DAD08 /* Pods-DdSdkReactNativeExample.debug.xcconfig */,
+				4A4B8157669F7C844ABF982B /* Pods-DdSdkReactNativeExample.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -130,14 +130,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "DdSdkReactNativeExample" */;
 			buildPhases = (
-				E7FEDEC891CFB376C01E3757 /* [CP] Check Pods Manifest.lock */,
+				6D376D298F855F5CC23E9ED5 /* [CP] Check Pods Manifest.lock */,
 				FD10A7F022414F080027D42C /* Start Packager */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
-				24FCB8A28DAC48C3D46EDEDA /* [CP] Embed Pods Frameworks */,
-				883B42E77DC977535F0A70C3 /* [CP] Copy Pods Resources */,
+				07743436841738907FE3FD72 /* [CP] Embed Pods Frameworks */,
+				961EBCFFF8E0F6A3F5781446 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -209,7 +209,7 @@
 			shellPath = /bin/sh;
 			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
 		};
-		24FCB8A28DAC48C3D46EDEDA /* [CP] Embed Pods Frameworks */ = {
+		07743436841738907FE3FD72 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -226,43 +226,43 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		883B42E77DC977535F0A70C3 /* [CP] Copy Pods Resources */ = {
+		6D376D298F855F5CC23E9ED5 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			name = "[CP] Copy Pods Resources";
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-DdSdkReactNativeExample-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources.sh\"\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		E7FEDEC891CFB376C01E3757 /* [CP] Check Pods Manifest.lock */ = {
+		961EBCFFF8E0F6A3F5781446 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
+			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-DdSdkReactNativeExample-checkManifestLockResult.txt",
+				"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-DdSdkReactNativeExample/Pods-DdSdkReactNativeExample-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
@@ -301,7 +301,7 @@
 /* Begin XCBuildConfiguration section */
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 6F4909953279AC89EEC11F97 /* Pods-DdSdkReactNativeExample.debug.xcconfig */;
+			baseConfigurationReference = 943593C03DDD65A0F77DAD08 /* Pods-DdSdkReactNativeExample.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -328,7 +328,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 82767EEEA8B17AE9E7964826 /* Pods-DdSdkReactNativeExample.release.xcconfig */;
+			baseConfigurationReference = 4A4B8157669F7C844ABF982B /* Pods-DdSdkReactNativeExample.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
diff --git a/example-new-architecture/ios/Podfile.lock b/example-new-architecture/ios/Podfile.lock
index 25ee5e66c..d98fdb435 100644
--- a/example-new-architecture/ios/Podfile.lock
+++ b/example-new-architecture/ios/Podfile.lock
@@ -1,22 +1,22 @@
 PODS:
   - boost (1.84.0)
-  - DatadogCore (2.30.0):
-    - DatadogInternal (= 2.30.0)
-  - DatadogCrashReporting (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogCore (2.30.2):
+    - DatadogInternal (= 2.30.2)
+  - DatadogCrashReporting (2.30.2):
+    - DatadogInternal (= 2.30.2)
     - PLCrashReporter (~> 1.12.0)
-  - DatadogInternal (2.30.0)
-  - DatadogLogs (2.30.0):
-    - DatadogInternal (= 2.30.0)
-  - DatadogRUM (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogInternal (2.30.2)
+  - DatadogLogs (2.30.2):
+    - DatadogInternal (= 2.30.2)
+  - DatadogRUM (2.30.2):
+    - DatadogInternal (= 2.30.2)
   - DatadogSDKReactNative (2.12.3):
-    - DatadogCore (= 2.30.0)
-    - DatadogCrashReporting (= 2.30.0)
-    - DatadogLogs (= 2.30.0)
-    - DatadogRUM (= 2.30.0)
-    - DatadogTrace (= 2.30.0)
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogCore (= 2.30.2)
+    - DatadogCrashReporting (= 2.30.2)
+    - DatadogLogs (= 2.30.2)
+    - DatadogRUM (= 2.30.2)
+    - DatadogTrace (= 2.30.2)
+    - DatadogWebViewTracking (= 2.30.2)
     - DoubleConversion
     - glog
     - hermes-engine
@@ -38,12 +38,12 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - DatadogSDKReactNative/Tests (2.12.3):
-    - DatadogCore (= 2.30.0)
-    - DatadogCrashReporting (= 2.30.0)
-    - DatadogLogs (= 2.30.0)
-    - DatadogRUM (= 2.30.0)
-    - DatadogTrace (= 2.30.0)
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogCore (= 2.30.2)
+    - DatadogCrashReporting (= 2.30.2)
+    - DatadogLogs (= 2.30.2)
+    - DatadogRUM (= 2.30.2)
+    - DatadogTrace (= 2.30.2)
+    - DatadogWebViewTracking (= 2.30.2)
     - DoubleConversion
     - glog
     - hermes-engine
@@ -64,11 +64,11 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - DatadogTrace (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogTrace (2.30.2):
+    - DatadogInternal (= 2.30.2)
     - OpenTelemetrySwiftApi (= 1.13.1)
-  - DatadogWebViewTracking (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogWebViewTracking (2.30.2):
+    - DatadogInternal (= 2.30.2)
   - DoubleConversion (1.1.6)
   - fast_float (6.1.4)
   - FBLazyVector (0.76.9)
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 05ca0d0de..8d2d460f8 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1,34 +1,34 @@
 PODS:
   - boost (1.84.0)
-  - DatadogCore (2.30.0):
-    - DatadogInternal (= 2.30.0)
-  - DatadogCrashReporting (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogCore (2.30.2):
+    - DatadogInternal (= 2.30.2)
+  - DatadogCrashReporting (2.30.2):
+    - DatadogInternal (= 2.30.2)
     - PLCrashReporter (~> 1.12.0)
-  - DatadogInternal (2.30.0)
-  - DatadogLogs (2.30.0):
-    - DatadogInternal (= 2.30.0)
-  - DatadogRUM (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogInternal (2.30.2)
+  - DatadogLogs (2.30.2):
+    - DatadogInternal (= 2.30.2)
+  - DatadogRUM (2.30.2):
+    - DatadogInternal (= 2.30.2)
   - DatadogSDKReactNative (2.12.3):
-    - DatadogCore (= 2.30.0)
-    - DatadogCrashReporting (= 2.30.0)
-    - DatadogLogs (= 2.30.0)
-    - DatadogRUM (= 2.30.0)
-    - DatadogTrace (= 2.30.0)
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogCore (= 2.30.2)
+    - DatadogCrashReporting (= 2.30.2)
+    - DatadogLogs (= 2.30.2)
+    - DatadogRUM (= 2.30.2)
+    - DatadogTrace (= 2.30.2)
+    - DatadogWebViewTracking (= 2.30.2)
     - React-Core
   - DatadogSDKReactNative/Tests (2.12.3):
-    - DatadogCore (= 2.30.0)
-    - DatadogCrashReporting (= 2.30.0)
-    - DatadogLogs (= 2.30.0)
-    - DatadogRUM (= 2.30.0)
-    - DatadogTrace (= 2.30.0)
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogCore (= 2.30.2)
+    - DatadogCrashReporting (= 2.30.2)
+    - DatadogLogs (= 2.30.2)
+    - DatadogRUM (= 2.30.2)
+    - DatadogTrace (= 2.30.2)
+    - DatadogWebViewTracking (= 2.30.2)
     - React-Core
   - DatadogSDKReactNativeSessionReplay (2.12.3):
     - DatadogSDKReactNative
-    - DatadogSessionReplay (= 2.30.0)
+    - DatadogSessionReplay (= 2.30.2)
     - DoubleConversion
     - glog
     - hermes-engine
@@ -51,7 +51,7 @@ PODS:
     - Yoga
   - DatadogSDKReactNativeSessionReplay/Tests (2.12.3):
     - DatadogSDKReactNative
-    - DatadogSessionReplay (= 2.30.0)
+    - DatadogSessionReplay (= 2.30.2)
     - DoubleConversion
     - glog
     - hermes-engine
@@ -74,24 +74,24 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - DatadogSDKReactNativeWebView (2.12.3):
-    - DatadogInternal (= 2.30.0)
+    - DatadogInternal (= 2.30.2)
     - DatadogSDKReactNative
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogWebViewTracking (= 2.30.2)
     - React-Core
   - DatadogSDKReactNativeWebView/Tests (2.12.3):
-    - DatadogInternal (= 2.30.0)
+    - DatadogInternal (= 2.30.2)
     - DatadogSDKReactNative
-    - DatadogWebViewTracking (= 2.30.0)
+    - DatadogWebViewTracking (= 2.30.2)
     - React-Core
     - react-native-webview
     - React-RCTText
-  - DatadogSessionReplay (2.30.0):
-    - DatadogInternal (= 2.30.0)
-  - DatadogTrace (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogSessionReplay (2.30.2):
+    - DatadogInternal (= 2.30.2)
+  - DatadogTrace (2.30.2):
+    - DatadogInternal (= 2.30.2)
     - OpenTelemetrySwiftApi (= 1.13.1)
-  - DatadogWebViewTracking (2.30.0):
-    - DatadogInternal (= 2.30.0)
+  - DatadogWebViewTracking (2.30.2):
+    - DatadogInternal (= 2.30.2)
   - DoubleConversion (1.1.6)
   - fast_float (6.1.4)
   - FBLazyVector (0.76.9)
diff --git a/yarn.lock b/yarn.lock
index 492dbfed5..f747a9a64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1751,6 +1751,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/generator@npm:7.28.3"
+  dependencies:
+    "@babel/parser": ^7.28.3
+    "@babel/types": ^7.28.2
+    "@jridgewell/gen-mapping": ^0.3.12
+    "@jridgewell/trace-mapping": ^0.3.28
+    jsesc: ^3.0.2
+  checksum: e2202bf2b9c8a94f7e7a0a049fda0ee037d055c46922e85afa3bbc53309113f859b8193894f991045d7865226028b8f4f06152ed315ab414451932016dba5e42
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.27.1, @babel/helper-annotate-as-pure@npm:^7.27.3":
   version: 7.27.3
   resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
@@ -1999,6 +2012,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/parser@npm:7.28.4"
+  dependencies:
+    "@babel/types": ^7.28.4
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: d95e283fe1153039b396926ef567ca1ab114afb5c732a23bbcbbd0465ac59971aeb6a63f37593ce7671a52d34ec52b23008c999d68241b42d26928c540464063
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.3, @babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.27.1"
@@ -3550,6 +3574,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/traverse@npm:7.28.4"
+  dependencies:
+    "@babel/code-frame": ^7.27.1
+    "@babel/generator": ^7.28.3
+    "@babel/helper-globals": ^7.28.0
+    "@babel/parser": ^7.28.4
+    "@babel/template": ^7.27.2
+    "@babel/types": ^7.28.4
+    debug: ^4.3.1
+  checksum: d603b8ce4e55ba4fc7b28d3362cc2b1b20bc887e471c8a59fe87b2578c26803c9ef8fcd118081dd8283ea78e0e9a6df9d88c8520033c6aaf81eec30d2a669151
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.2, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.27.6
   resolution: "@babel/types@npm:7.27.6"
@@ -3570,6 +3609,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/types@npm:7.28.4"
+  dependencies:
+    "@babel/helper-string-parser": ^7.27.1
+    "@babel/helper-validator-identifier": ^7.27.1
+  checksum: a369b4fb73415a2ed902a15576b49696ae9777ddee394a7a904c62e6fbb31f43906b0147ae0b8f03ac17f20c248eac093df349e33c65c94617b12e524b759694
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -3727,19 +3776,22 @@ __metadata:
     "@babel/core": ^7.27.1
     "@babel/generator": ^7.28.0
     "@babel/helper-plugin-utils": ^7.27.1
+    "@babel/parser": ^7.28.4
     "@babel/preset-env": ^7.27.2
     "@babel/preset-react": ^7.27.1
     "@babel/preset-typescript": ^7.27.1
+    "@babel/traverse": ^7.28.4
     "@babel/types": ^7.27.1
     "@swc/core": ^1.11.31
     "@swc/jest": ^0.2.38
     "@types/jest": ^29.5.14
+    fast-glob: ^3.3.3
     jest: ^29.7.0
     react-native-builder-bob: 0.26.0
     svgo: ^4.0.0
     tsc-alias: ^1.8.16
     typescript: 5.0.4
-    uuid: ^11.1.0
+    uuid: ^13.0.0
   peerDependencies:
     react: ">=16.13.1"
     react-native: ">=0.63.4 <1.0"
@@ -11892,7 +11944,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -21101,12 +21153,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^11.1.0":
-  version: 11.1.0
-  resolution: "uuid@npm:11.1.0"
+"uuid@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "uuid@npm:13.0.0"
   bin:
-    uuid: dist/esm/bin/uuid
-  checksum: 840f19758543c4631e58a29439e51b5b669d5f34b4dd2700b6a1d15c5708c7a6e0c3e2c8c4a2eae761a3a7caa7e9884d00c86c02622ba91137bd3deade6b4b4a
+    uuid: dist-node/bin/uuid
+  checksum: 7510ee1ab371be5339ef26ff8cabc2f4a2c60640ff880652968f758072f53bd4f4af1c8b0e671a8c9bb29ef926a24dec3ef0e3861d78183b39291a85743a9f96
   languageName: node
   linkType: hard
 

From 507b67ceb9839ab849d468e6cde8654729a6e503 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Thu, 16 Oct 2025 22:18:06 +0100
Subject: [PATCH 31/35] Update Session Replay README.md with SVG support
 section

---
 .../react-native-session-replay/README.md     | 91 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-session-replay/README.md b/packages/react-native-session-replay/README.md
index 34853a684..308cf3c0c 100644
--- a/packages/react-native-session-replay/README.md
+++ b/packages/react-native-session-replay/README.md
@@ -51,4 +51,93 @@ SessionReplay.startRecording();
 SessionReplay.stopRecording();
 ```
 
-[1]: https://www.npmjs.com/package/@datadog/mobile-react-native
\ No newline at end of file
+## SVG Support
+
+Session Replay provides enhanced support for capturing SVG images in your React Native application. To enable SVG tracking, you need to set up the Datadog Babel plugin and Metro plugin.
+
+### Prerequisites
+
+Install the Datadog Babel plugin:
+
+```sh
+npm install @datadog/mobile-react-native-babel-plugin
+```
+
+or with Yarn:
+
+```sh
+yarn add @datadog/mobile-react-native-babel-plugin
+```
+
+### Setup Babel Plugin
+
+Configure the Babel plugin in your `babel.config.js` to enable SVG tracking:
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      '@datadog/mobile-react-native-babel-plugin',
+      {
+        sessionReplay: {
+          // SVG tracking is enabled by default
+          // Set to false to disable SVG asset extraction
+          svgTracking: true
+        }
+      }
+    ]
+  ]
+};
+```
+
+### Setup Metro Plugin
+
+Configure the Metro plugin in your `metro.config.js` to enable automatic SVG asset bundling:
+
+```js
+const { withSessionReplayAssetBundler } = require('@datadog/mobile-react-native-session-replay/metro');
+
+module.exports = withSessionReplayAssetBundler({
+  /* your existing Metro config */
+});
+```
+
+The Metro plugin automatically monitors and bundles SVG assets during development and production builds.
+
+### Installation Workflow
+
+When setting up your project or after installing new dependencies, follow this workflow to ensure SVG assets are properly generated for native builds:
+
+```sh
+# 1. Install dependencies
+yarn install
+
+# 2. Generate Session Replay SVG assets
+npx datadog-generate-sr-assets
+
+# 3. Install iOS pods (if building for iOS)
+cd ios && pod install && cd ..
+
+# 4. Run your app
+yarn ios
+# or
+yarn android
+```
+
+The `datadog-generate-sr-assets` CLI utility scans your codebase for SVG elements and pre-generates optimized assets that will be included in your native builds.
+
+**Note for CI/CD**: If you use continuous integration for your builds, make sure to include these steps in your CI pipeline. The workflow should be: `yarn install` → `npx datadog-generate-sr-assets` → `pod install` (for iOS) → build your app. This ensures SVG assets are properly generated before the native build process.
+
+### Development Workflow
+
+During development, the Metro plugin automatically handles SVG assets created by the Babel plugin:
+
+1. Write your components with SVG elements from `react-native-svg`
+2. The Babel plugin extracts and transforms SVG nodes during the build process
+3. The Metro plugin detects new SVG assets and automatically bundles them
+4. SVG images are seamlessly captured in Session Replay recordings
+
+No manual asset management is required during development.
+
+[1]: https://www.npmjs.com/package/@datadog/mobile-react-native

From c135941b2dcd4d42e678c85b98a246df0e09e143 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 17 Oct 2025 14:16:56 +0100
Subject: [PATCH 32/35] Improvements to iOS SVG view recorder

---
 .../DdSessionReplayImplementation.swift       |  14 +-
 .../ios/Sources/SvgViewRecorder.swift         | 219 ++++++++++--------
 2 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
index ab563585a..95e683343 100644
--- a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
+++ b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
@@ -10,7 +10,7 @@ import DatadogInternal
 import DatadogSDKReactNative
 import React
 
-struct SVGData: Codable {
+internal struct SVGData: Codable {
     let offset: Int
     let length: Int
 }
@@ -31,7 +31,7 @@ public class DdSessionReplayImplementation: NSObject {
         self.uiManager = uiManager
         self.fabricWrapper = fabricWrapper
     }
-
+    
     @objc
     public convenience init(bridge: RCTBridge) {
         self.init(
@@ -40,7 +40,7 @@ public class DdSessionReplayImplementation: NSObject {
             fabricWrapper: RCTFabricWrapper()
         )
     }
-
+    
     @objc
     public func enable(
         replaySampleRate: Double,
@@ -56,7 +56,7 @@ public class DdSessionReplayImplementation: NSObject {
         if (customEndpoint != "") {
             customEndpointURL = URL(string: "\(customEndpoint)/api/v2/replay" as String)
         }
-
+        
         var sessionReplayConfiguration = SessionReplay.Configuration(
             replaySampleRate: Float(replaySampleRate),
             textAndInputPrivacyLevel: convertTextAndInputPrivacy(textAndInputPrivacyLevel),
@@ -75,7 +75,7 @@ public class DdSessionReplayImplementation: NSObject {
                 let decoder = JSONDecoder()
                 svgMap = try decoder.decode([String: SVGData].self, from: data)
             } catch {
-                consolePrint("Failed to load or decode assets.json", .debug)
+                consolePrint("Failed to load or decode assets.json: \(error)", .debug)
             }
         }
         
@@ -90,7 +90,7 @@ public class DdSessionReplayImplementation: NSObject {
                 fabricWrapper: fabricWrapper
             )
         ])
-
+        
         if let core = DatadogSDKWrapper.shared.getCoreInstance() {
             sessionReplay.enable(
                 with: sessionReplayConfiguration,
@@ -99,7 +99,7 @@ public class DdSessionReplayImplementation: NSObject {
         } else {
             consolePrint("Core instance was not found when initializing Session Replay.", .critical)
         }
-        
+
         resolve(nil)
     }
     
diff --git a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
index 689a12005..5800c914a 100644
--- a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
+++ b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
@@ -13,20 +13,29 @@ import UIKit
 import React
 
 
+private enum SVGConstants {
+    static let attributes = "attributes"
+    static let width = "width"
+    static let height = "height"
+    static let hash = "hash"
+    static let type = "type"
+    static let svgTypeValue = "svg"
+}
+
 internal struct ReactNativeSVGResource: SessionReplayResource {
     let identifier: String
     let svgContent: String
     let mimeType: String = "image/svg+xml"
-
+    
     init(id: String, svgContent: String) {
         self.identifier = id
         self.svgContent = svgContent
     }
-
+    
     func calculateIdentifier() -> String {
         return identifier
     }
-
+    
     func calculateData() -> Data {
         return svgContent.data(using: .utf8) ?? Data()
     }
@@ -35,11 +44,11 @@ internal struct ReactNativeSVGResource: SessionReplayResource {
 
 internal class SvgViewRecorder: SessionReplayNodeRecorder {
     internal var identifier = UUID()
-
+    
     internal let uiManager: RCTUIManager
     internal let fabricWrapper: RCTFabricWrapper
     internal let svgMap: [String: SVGData]
-
+    
     internal init(uiManager: RCTUIManager, fabricWrapper: RCTFabricWrapper, svgMap: [String: SVGData]) {
         self.uiManager = uiManager
         self.fabricWrapper = fabricWrapper
@@ -52,102 +61,122 @@ internal class SvgViewRecorder: SessionReplayNodeRecorder {
         in context: SessionReplayViewTreeRecordingContext
     ) -> SessionReplayNodeSemantics? {
         
-        if (view.accessibilityIdentifier != nil) {
-            let viewId = context.ids.nodeID(view: view, nodeRecorder: self)
-            let subView = view.subviews[0]
+        guard view.accessibilityIdentifier != nil else {
+            return nil
+        }
+        
+        guard let attrs = view.value(forKey: SVGConstants.attributes) as? [String: String] else {
+            return nil
+        }
+        
+        guard let type = attrs[SVGConstants.type], type == "svg" else {
+            return nil
+        }
+        
+        guard let hash = attrs[SVGConstants.hash] else {
+            return nil
+        }
+        
+        let bundle = Bundle(for: SvgViewRecorder.self)
+        guard let url = bundle.url(forResource: "assets", withExtension: "bin") else {
+            return nil
+        }
+        
+        guard let subView = view.subviews.first else {
+            return nil
+        }
+        
+        
+        let viewId = context.ids.nodeID(view: view, nodeRecorder: self)
+        let svgId = context.ids.nodeID(view: subView, nodeRecorder: self)
+        
+        do {
+            guard let svgInfo = svgMap[hash] else {
+                return nil
+            }
             
-            if let attrs = view.value(forKey: "attributes") as? [String: String] {
-                let svgId = context.ids.nodeID(view: subView, nodeRecorder: self)
-                let type = attrs["type"]
-                let width = attrs["width"]
-                let height = attrs["height"]
-
-                guard let hash = attrs["hash"] else {
-                    return nil
-                }
-                
-                if (type != "svg") {
-                    return nil
-                }
-                
-                let bundle = Bundle(for: SvgViewRecorder.self)
-                if let url = bundle.url(forResource: "assets", withExtension: "bin") {
-                    do {
-                        let fileHandle = try FileHandle(forReadingFrom: url)
-                        defer { try? fileHandle.close() }
-                        
-                        guard let svgInfo = svgMap[hash] else {
-                            return nil
-                        }
-                        
-                        try fileHandle.seek(toOffset: UInt64(svgInfo.offset))
-                        let svgDataChunk = try fileHandle.read(upToCount: svgInfo.length)
-                        
-                        guard let svgDataChunk = svgDataChunk,
-                              var svgData = String(data: svgDataChunk, encoding: .utf8) else {
-                            return nil
-                        }
-                        
-                        var svgAttributes: [String] = []
-                        
-                        if (width == "") {
-                            svgAttributes.append(#"width="\#(Int(subView.bounds.width))""#)
-                        }
-                        
-                        if (height == "") {
-                            svgAttributes.append(#"height="\#(Int(subView.bounds.height))""#)
-                        }
-                        
-                        if !svgAttributes.isEmpty {
-                            // Here we update the svg content but keep the original hash without these values
-                            // The goal is to save some time, as it won't matter since the hash is used as an identifier
-                            var svg = svgData
-                            
-                            if let svgStart = svg.range(of: "<svg"),
-                               let tagEnd = svg.range(of: ">", range: svgStart.upperBound..<svg.endIndex) {
-
-                                let dimensions = " " + svgAttributes.joined(separator: " ")
-                                svg.replaceSubrange(tagEnd, with: dimensions + ">")
-                                svgData = svg
-                            }
-                        }
-                        
-                        let svgResource = ReactNativeSVGResource(
-                            id: hash,
-                            svgContent: svgData
-                         )
-
-                        let contentFrame = CGRect(
-                            origin: attributes.frame.origin,
-                            size: CGSize(width: subView.bounds.width,
-                                         height: subView.bounds.height)
-                        )
-                        
-                        let builder = SvgViewWireframesBuilder(
-                            wireframeID: viewId,
-                            imageWireframeID: svgId,
-                            attributes: attributes,
-                            contentFrame: contentFrame,
-                            svgResource: svgResource,
-                            imagePrivacyLevel: context.recorder.imagePrivacy
-                        )
-                        
-                        let element = SessionReplaySpecificElement(subtreeStrategy: .ignore, nodes: [
-                            SessionReplayNode(viewAttributes: attributes, wireframesBuilder: builder)
-                        ])
-                        
-                        return element
-                    } catch {
-                        return nil
-                    }
-                }
+            let fileHandle = try FileHandle(forReadingFrom: url)
+            defer { try? fileHandle.close() }
+            
+            try fileHandle.seek(toOffset: UInt64(svgInfo.offset))
+            let svgDataChunk = try fileHandle.read(upToCount: svgInfo.length)
+            
+            guard let svgDataChunk = svgDataChunk,
+                  var svgData = String(data: svgDataChunk, encoding: .utf8) else {
+                return nil
+            }
+            
+            if let updatedSvgData = handleDynamicSvgDimensions(view: subView, svgData: svgData, attrs: attrs) {
+                svgData = updatedSvgData
             }
+            
+            let svgResource = ReactNativeSVGResource(
+                id: hash,
+                svgContent: svgData
+            )
+            
+            let contentFrame = CGRect(
+                origin: attributes.frame.origin,
+                size: CGSize(width: subView.bounds.width,
+                             height: subView.bounds.height)
+            )
+            
+            let builder = SvgViewWireframesBuilder(
+                wireframeID: viewId,
+                imageWireframeID: svgId,
+                attributes: attributes,
+                contentFrame: contentFrame,
+                svgResource: svgResource,
+                imagePrivacyLevel: context.recorder.imagePrivacy
+            )
+            
+            // Children are ignored because they were already processed and converted by the babel plugin
+            let element = SessionReplaySpecificElement(subtreeStrategy: .ignore, nodes: [
+                SessionReplayNode(viewAttributes: attributes, wireframesBuilder: builder)
+            ])
+            
+            return element
+        } catch {
+            return nil
         }
+    }
+}
 
-        return nil
+func handleDynamicSvgDimensions(view: UIView, svgData: String, attrs: [String: String]) -> String? {
+    let width = attrs[SVGConstants.width] ?? ""
+    let height = attrs[SVGConstants.height] ?? ""
+    
+    var svgAttributes: [String] = []
+    
+    if width.isEmpty {
+        svgAttributes.append(#"width="\#(Int(view.bounds.width))""#)
+    }
+    
+    if height.isEmpty {
+        svgAttributes.append(#"height="\#(Int(view.bounds.height))""#)
+    }
+    
+    if !svgAttributes.isEmpty {
+        // Here we update the svg content but keep the original hash without these values
+        // The goal is to save some time, as it won't matter since the hash is used as an identifier
+        var svg = svgData
+        let pattern = #"<svg[^>]*>"#
+        
+        if let match = svg.range(of: pattern, options: .regularExpression) {
+            let dimensions = " " + svgAttributes.joined(separator: " ")
+            
+            if let closingBracketRange = svg.range(of: ">", range: match.lowerBound..<match.upperBound) {
+                svg.replaceSubrange(closingBracketRange, with: dimensions + ">")
+                return svg
+            }
+        }
+        
     }
+    
+    return nil
 }
 
+
 internal struct SvgViewWireframesBuilder: SessionReplayNodeWireframesBuilder {
     let wireframeID: WireframeID
     
@@ -189,7 +218,7 @@ internal struct SvgViewWireframesBuilder: SessionReplayNodeWireframesBuilder {
                 )
             )
         }
-
+        
         return wireframes
     }
 }

From 35a0b45a8533c7d8656c528e3f63da3c5527f732 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 17 Oct 2025 17:31:26 +0100
Subject: [PATCH 33/35] Improve encapsulation and lookup of Session Replay
 assets on iOS

---
 ...DatadogSDKReactNativeSessionReplay.podspec |  6 ++++--
 .../DdSessionReplayImplementation.swift       |  6 ++++--
 .../ios/Sources/SvgViewRecorder.swift         |  5 ++---
 .../Sources/Utils/Bundle+SessionReplay.swift  | 21 +++++++++++++++++++
 4 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-native-session-replay/ios/Sources/Utils/Bundle+SessionReplay.swift

diff --git a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
index a89f6cce4..915fc4129 100644
--- a/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
+++ b/packages/react-native-session-replay/DatadogSDKReactNativeSessionReplay.podspec
@@ -14,9 +14,11 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => "12.0", :tvos => "12.0" }
   s.source       = { :git => "https://github.com/DataDog/dd-sdk-reactnative.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/Sources/*.{h,m,mm,swift}"
+  s.source_files = "ios/Sources/**/*.{h,m,mm,swift}"
 
-  s.resources = ['assets/assets.json', 'assets/assets.bin']
+  s.resource_bundles = {
+    'DDSessionReplay' => ['assets/assets.json', 'assets/assets.bin']
+  }
 
   s.dependency "React-Core"
 
diff --git a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
index 95e683343..45cfc2582 100644
--- a/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
+++ b/packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
@@ -66,10 +66,12 @@ public class DdSessionReplayImplementation: NSObject {
             customEndpoint: customEndpointURL
         )
         
-        let bundle = Bundle(for: DdSessionReplayImplementation.self)
+//        let bundle = Bundle(for: DdSessionReplayImplementation.self)
+
         var svgMap: [String: SVGData] = [:]
         
-        if let url = bundle.url(forResource: "assets", withExtension: "json") {
+        if let bundle = Bundle.ddSessionReplayResources,
+           let url = bundle.url(forResource: "assets", withExtension: "json") {
             do {
                 let data = try Data(contentsOf: url)
                 let decoder = JSONDecoder()
diff --git a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
index 5800c914a..0c131c61a 100644
--- a/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
+++ b/packages/react-native-session-replay/ios/Sources/SvgViewRecorder.swift
@@ -77,8 +77,8 @@ internal class SvgViewRecorder: SessionReplayNodeRecorder {
             return nil
         }
         
-        let bundle = Bundle(for: SvgViewRecorder.self)
-        guard let url = bundle.url(forResource: "assets", withExtension: "bin") else {
+        let bundle = Bundle.ddSessionReplayResources
+        guard let url = bundle?.url(forResource: "assets", withExtension: "bin") else {
             return nil
         }
         
@@ -86,7 +86,6 @@ internal class SvgViewRecorder: SessionReplayNodeRecorder {
             return nil
         }
         
-        
         let viewId = context.ids.nodeID(view: view, nodeRecorder: self)
         let svgId = context.ids.nodeID(view: subView, nodeRecorder: self)
         
diff --git a/packages/react-native-session-replay/ios/Sources/Utils/Bundle+SessionReplay.swift b/packages/react-native-session-replay/ios/Sources/Utils/Bundle+SessionReplay.swift
new file mode 100644
index 000000000..17e6f2d10
--- /dev/null
+++ b/packages/react-native-session-replay/ios/Sources/Utils/Bundle+SessionReplay.swift
@@ -0,0 +1,21 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import Foundation
+
+internal class BundleFinder {}
+
+extension Bundle {
+    static var ddSessionReplayResources: Bundle? {
+        let bundle = Bundle(for: BundleFinder.self)
+        if let resourceURL = bundle.url(forResource: "DDSessionReplay", withExtension: "bundle"),
+           let resourceBundle = Bundle(url: resourceURL) {
+            return resourceBundle
+        }
+
+        return nil
+    }
+}

From a7943e0309b839e1c577043849483a82fd41e7ac Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 17 Oct 2025 17:51:26 +0100
Subject: [PATCH 34/35] Update `LICENSE-3rdparty.csv` dependencies

---
 LICENSE-3rdparty.csv | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/LICENSE-3rdparty.csv b/LICENSE-3rdparty.csv
index 85afa7e26..2d12ca9ea 100644
--- a/LICENSE-3rdparty.csv
+++ b/LICENSE-3rdparty.csv
@@ -32,3 +32,7 @@ dev,react-native-webview,MIT,"Copyright (c) 2015-present, Facebook, Inc."
 dev,react-test-renderer,MIT,"Copyright (c) Facebook, Inc. and its affiliates."
 dev,typescript,Apache-2.0,"Copyright Microsoft Corporation"
 dev,genversion,MIT,"Copyright (c) 2021 Akseli Palén"
+prod,chokidar,MIT,"Copyright (c) 2012 Paul Miller (https://paulmillr.com), Elan Shanker"
+prod,fast-glob,MIT,"Copyright (c) Denis Malinochkin"
+prod,svgo,MIT,"Copyright (c) Kir Belevich"
+prod,uuid,MIT,"Copyright (c) 2010-2020 Robert Kieffer and other contributors"

From f207438b44b320973eb798762c3c63d8e1fe4fc1 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Fri, 17 Oct 2025 19:11:05 +0100
Subject: [PATCH 35/35] Update `build-assets` script in Session Replay package

- Ensure assets directory in Session Replay package is cleaned up when
`yarn prepare` is ran so no unwanted files get packed
---
 .../scripts/build-assets.js                       | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-session-replay/scripts/build-assets.js b/packages/react-native-session-replay/scripts/build-assets.js
index f7f543a3b..6721879e4 100644
--- a/packages/react-native-session-replay/scripts/build-assets.js
+++ b/packages/react-native-session-replay/scripts/build-assets.js
@@ -12,18 +12,19 @@ const binPath = path.join(assetsDir, 'assets.bin');
 const jsonPath = path.join(assetsDir, 'assets.json');
 
 function ensureAssets() {
-    if (!fs.existsSync(assetsDir)) {
+    try {
+        if (fs.existsSync(assetsDir)) {
+            fs.rmSync(assetsDir, { recursive: true, force: true });
+        }
+
         fs.mkdirSync(assetsDir, { recursive: true });
-    }
 
-    // Create empty .bin if missing
-    if (!fs.existsSync(binPath)) {
         fs.writeFileSync(binPath, Buffer.alloc(0));
-    }
 
-    // Create empty .json if missing
-    if (!fs.existsSync(jsonPath)) {
         fs.writeFileSync(jsonPath, JSON.stringify({}, null, 2));
+    } catch (error) {
+        console.error('Error creating assets:', error.message);
+        process.exit(1);
     }
 }