@datadog/mobile-react-native-session-replay 2.12.4 → 2.13.0

package/DatadogSDKReactNativeSessionReplay.podspec

@@ -14,12 +14,16 @@ 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.resource_bundles = {
+    'DDSessionReplay' => ['assets/assets.json', 'assets/assets.bin']
+  }
 
   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|

package/README.md

@@ -51,4 +51,93 @@ SessionReplay.startRecording();
 SessionReplay.stopRecording();
 ```
 
-[1]: https://www.npmjs.com/package/@datadog/mobile-react-native
+## 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 disabled by default
+          // Set to true to enable 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

package/android/build.gradle

@@ -158,6 +158,7 @@ android {
         java.srcDirs += ['src/rnpre74/kotlin']
       }
 
+      assets.srcDirs += ['../assets']
     }
     test {
       java.srcDir("src/test/kotlin")
@@ -213,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"

package/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)
     }
 

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeInternalCallback.kt

@@ -7,8 +7,13 @@
 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
+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 +22,123 @@ import com.facebook.react.bridge.ReactContext
 class ReactNativeInternalCallback(
     private val reactContext: ReactContext,
 ) : 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"
+        private const val TAG = "SessionReplayInternalCallback"
+    }
+
+    private val jsonObject: JSONObject? = loadAssetsJson()
+
+    private fun loadAssetsJson(): JSONObject? {
+        return try {
+            val jsonText = reactContext.assets.open(ASSETS_JSON)
+                .bufferedReader()
+                .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
+        }
+    }
+
+    /**
+     * 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: IOException) {
+            Log.w(TAG, "Failed to read entry from binary: ${e.message}")
+            null
+        }
+    }
+
+
+    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
+    }
 }

package/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)),

package/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
 

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/SvgViewMapper.kt

@@ -0,0 +1,145 @@
+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>())
+
+    @Suppress("LongMethod", "ComplexMethod")
+    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 width = view.attributes?.get("width")
+            val height = view.attributes?.get("height")
+
+            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),
+                    viewGlobalBounds.x,
+                    viewGlobalBounds.y,
+                    viewGlobalBounds.width,
+                    viewGlobalBounds.height,
+                    shapeStyle = shapeStyle,
+                    border = border
+                ))
+
+            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
+    }
+
+    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()
+    }
+}

package/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)

package/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() ?: ""
+        }
+    }
 }

package/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
@@ -40,4 +41,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() ?: ""
+        }
+    }
 }

package/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 }

package/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)
     }
 }

package/assets/assets.json

@@ -0,0 +1 @@
+{}