@datadog/mobile-react-native-session-replay 2.0.2-alpha.0

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

@@ -0,0 +1,22 @@
+/*
+ *
+ *  * 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.
+ *
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.widget.TextView
+import com.datadog.android.sessionreplay.model.MobileSegment
+
+internal class NoopTextPropertiesResolver: TextPropertiesResolver {
+    override fun addReactNativeProperties(
+        originalWireframe: MobileSegment.Wireframe.TextWireframe,
+        view: TextView,
+        pixelDensity: Float
+    ): MobileSegment.Wireframe.TextWireframe {
+        return originalWireframe
+    }
+}

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

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.view.View
+import androidx.annotation.VisibleForTesting
+import com.datadog.android.api.InternalLogger
+import com.datadog.android.sessionreplay.ExtensionSupport
+import com.datadog.android.sessionreplay.SessionReplayPrivacy
+import com.datadog.android.sessionreplay.internal.recorder.OptionSelectorDetector
+import com.datadog.android.sessionreplay.internal.recorder.mapper.WireframeMapper
+import com.datadog.reactnative.sessionreplay.mappers.ReactMaskInputTextMapper
+import com.datadog.reactnative.sessionreplay.mappers.ReactMaskTextMapper
+import com.datadog.reactnative.sessionreplay.mappers.ReactTextMapper
+import com.datadog.reactnative.sessionreplay.mappers.ReactViewGroupMapper
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.views.text.ReactTextView
+import com.facebook.react.views.textinput.ReactEditText
+import com.facebook.react.views.view.ReactViewGroup
+
+internal class ReactNativeSessionReplayExtensionSupport(
+    private val reactContext: ReactContext,
+    private val logger: InternalLogger
+) : ExtensionSupport {
+
+    override fun getCustomViewMappers(): Map<SessionReplayPrivacy, Map<Class<*>, WireframeMapper<View, *>>> {
+        val uiManagerModule = getUiManagerModule()
+
+        return mapOf(
+            SessionReplayPrivacy.ALLOW to mapOf(
+                ReactViewGroup::class.java to ReactViewGroupMapper(),
+                ReactTextView::class.java to ReactTextMapper(reactContext, uiManagerModule),
+                ReactEditText::class.java to ReactTextMapper(reactContext, uiManagerModule)
+            ),
+            SessionReplayPrivacy.MASK to mapOf(
+                ReactViewGroup::class.java to ReactViewGroupMapper(),
+                ReactTextView::class.java to ReactMaskTextMapper(reactContext, uiManagerModule),
+                ReactEditText::class.java to ReactMaskTextMapper(reactContext, uiManagerModule)
+            ),
+            SessionReplayPrivacy.MASK_USER_INPUT to mapOf(
+                ReactViewGroup::class.java to ReactViewGroupMapper(),
+                ReactTextView::class.java to ReactMaskInputTextMapper(reactContext, uiManagerModule),
+                ReactEditText::class.java to ReactMaskInputTextMapper(reactContext, uiManagerModule)
+            )
+        ).mapValues {
+            it.value as Map<Class<*>, WireframeMapper<View, *>>
+        }
+    }
+
+    override fun getOptionSelectorDetectors(): List<OptionSelectorDetector> {
+        return listOf()
+    }
+
+    @VisibleForTesting
+    internal fun getUiManagerModule(): UIManagerModule? {
+        return try {
+            reactContext.getNativeModule(UIManagerModule::class.java)
+        } catch (e: IllegalStateException) {
+            logger.log(
+                level = InternalLogger.Level.WARN,
+                targets = listOf(InternalLogger.Target.MAINTAINER, InternalLogger.Target.TELEMETRY),
+                messageBuilder = { RESOLVE_UIMANAGERMODULE_ERROR },
+                throwable = e
+            )
+            return null
+        }
+    }
+
+    internal companion object {
+        internal const val RESOLVE_UIMANAGERMODULE_ERROR = "Unable to resolve UIManagerModule"
+    }
+}

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

@@ -0,0 +1,196 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.view.Gravity
+import android.widget.TextView
+import androidx.annotation.VisibleForTesting
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.extensions.convertToDensityNormalized
+import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
+import com.datadog.reactnative.sessionreplay.utils.ReactViewBackgroundDrawableUtils
+import com.datadog.reactnative.sessionreplay.utils.ReflectionUtils
+import com.datadog.reactnative.sessionreplay.utils.formatAsRgba
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.views.text.TextAttributes
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import java.util.Locale
+
+internal class ReactTextPropertiesResolver(
+    private val reactContext: ReactContext,
+    private val uiManagerModule: UIManagerModule,
+    private val reflectionUtils: ReflectionUtils = ReflectionUtils(),
+    private val reactViewBackgroundDrawableUtils: ReactViewBackgroundDrawableUtils =
+        ReactViewBackgroundDrawableUtils(),
+    private val drawableUtils: DrawableUtils = DrawableUtils()
+): TextPropertiesResolver {
+    override fun addReactNativeProperties(
+        originalWireframe: MobileSegment.Wireframe.TextWireframe,
+        view: TextView,
+        pixelDensity: Float,
+    ): MobileSegment.Wireframe.TextWireframe {
+        val (shapeStyle, border) = resolveShapeStyleAndBorder(view, pixelDensity)
+            ?: (originalWireframe.shapeStyle to originalWireframe.border)
+
+        val (textStyle, textPosition) = resolveTextStyleAndPosition(
+            originalWireframe,
+            view,
+            pixelDensity
+        ) ?: (originalWireframe.textStyle to originalWireframe.textPosition)
+
+        // nothing changed, return the original wireframe
+        @Suppress("ComplexCondition")
+        if (shapeStyle == originalWireframe.shapeStyle
+            && border == originalWireframe.border
+            && textStyle == originalWireframe.textStyle
+            && textPosition == originalWireframe.textPosition
+        ) {
+            return originalWireframe
+        }
+
+        return originalWireframe.copy(
+            shapeStyle = shapeStyle,
+            border = border,
+            textStyle = textStyle,
+            textPosition = textPosition
+        )
+    }
+
+    private fun resolveTextStyleAndPosition(
+        originalWireframe: MobileSegment.Wireframe.TextWireframe,
+        view: TextView,
+        pixelDensity: Float,
+    ):
+            Pair<MobileSegment.TextStyle, MobileSegment.TextPosition>? {
+        val shadowNodeWrapper: ShadowNodeWrapper =
+            ShadowNodeWrapper.getShadowNodeWrapper(
+                reactContext = reactContext,
+                uiManagerModule = uiManagerModule,
+                reflectionUtils = reflectionUtils,
+                viewId = view.id) ?: return null
+
+        val textStyle = resolveTextStyle(originalWireframe, pixelDensity, shadowNodeWrapper)
+        val alignment = resolveTextAlignment(view, originalWireframe)
+
+        val textPosition = MobileSegment.TextPosition(
+            alignment = alignment,
+            padding = originalWireframe.textPosition?.padding
+        )
+
+        return textStyle to textPosition
+    }
+
+    private fun resolveShapeStyleAndBorder(
+        view: TextView,
+        pixelDensity: Float,
+    ): Pair<MobileSegment.ShapeStyle?, MobileSegment.ShapeBorder?>? {
+        val backgroundDrawable: ReactViewBackgroundDrawable =
+            drawableUtils.getReactBackgroundFromDrawable(view.background) ?: return null
+
+        // view.alpha is the value of the opacity prop on the js side
+        val opacity = view.alpha
+
+        val (shapeStyle, border) =
+            reactViewBackgroundDrawableUtils
+                .resolveShapeAndBorder(backgroundDrawable, opacity, pixelDensity)
+
+        return shapeStyle to border
+    }
+
+    private fun resolveTextAlignment(
+        view: TextView,
+        textWireframe: MobileSegment.Wireframe.TextWireframe
+    ): MobileSegment.Alignment {
+        val gravity = view.gravity
+        val horizontal = textWireframe.textPosition?.alignment?.horizontal
+        val vertical =
+            when (gravity.and(Gravity.VERTICAL_GRAVITY_MASK)) {
+                Gravity.TOP -> MobileSegment.Vertical.TOP
+                Gravity.CENTER_VERTICAL,
+                Gravity.CENTER -> MobileSegment.Vertical.CENTER
+                Gravity.BOTTOM -> MobileSegment.Vertical.BOTTOM
+                else -> MobileSegment.Vertical.TOP
+            }
+
+        return MobileSegment.Alignment(
+            horizontal = horizontal,
+            vertical = vertical
+        )
+    }
+
+    private fun resolveTextStyle(
+        textWireframe: MobileSegment.Wireframe.TextWireframe,
+        pixelsDensity: Float,
+        shadowNodeWrapper: ShadowNodeWrapper
+    ): MobileSegment.TextStyle {
+        val fontFamily = getFontFamily(shadowNodeWrapper)
+            ?: textWireframe.textStyle.family
+        val fontSize = getFontSize(shadowNodeWrapper)
+            ?.convertToDensityNormalized(pixelsDensity)
+            ?: textWireframe.textStyle.size
+        val fontColor = getTextColor(shadowNodeWrapper)
+            ?: textWireframe.textStyle.color
+
+        return MobileSegment.TextStyle(
+            family = fontFamily,
+            size = fontSize,
+            color = fontColor
+        )
+    }
+
+    private fun getTextColor(shadowNodeWrapper: ShadowNodeWrapper): String? {
+        val resolvedColor = shadowNodeWrapper
+            .getDeclaredShadowNodeField(COLOR_FIELD_NAME) as Int?
+        if (resolvedColor != null) {
+            return formatAsRgba(resolvedColor)
+        }
+
+        return null
+    }
+
+    private fun getFontSize(shadowNodeWrapper: ShadowNodeWrapper): Long? {
+        val textAttributes = shadowNodeWrapper
+            .getDeclaredShadowNodeField(TEXT_ATTRIBUTES_FIELD_NAME) as? TextAttributes?
+        if (textAttributes != null) {
+            return textAttributes.effectiveFontSize.toLong()
+        }
+
+        return null
+    }
+
+    private fun getFontFamily(shadowNodeWrapper: ShadowNodeWrapper): String? {
+        val fontFamily = shadowNodeWrapper
+            .getDeclaredShadowNodeField(FONT_FAMILY_FIELD_NAME) as? String
+
+        if (fontFamily != null) {
+            return resolveFontFamily(fontFamily.lowercase(Locale.US))
+        }
+
+        return null
+    }
+
+    private fun resolveFontFamily(typefaceName: String): String =
+        when (typefaceName) {
+            ROBOTO_TYPEFACE_NAME -> SANS_SERIF_FAMILY_NAME
+            MONOSPACE_FAMILY_NAME -> MONOSPACE_FAMILY_NAME
+            SERIF_FAMILY_NAME -> SERIF_FAMILY_NAME
+            else -> SANS_SERIF_FAMILY_NAME
+        }
+
+    @VisibleForTesting
+    internal companion object {
+        internal const val TEXT_ATTRIBUTES_FIELD_NAME = "mTextAttributes"
+        internal const val FONT_FAMILY_FIELD_NAME = "mFontFamily"
+        internal const val COLOR_FIELD_NAME = "mColor"
+
+        private const val ROBOTO_TYPEFACE_NAME = "roboto"
+        private const val SERIF_FAMILY_NAME = "serif"
+        private const val SANS_SERIF_FAMILY_NAME = "roboto, sans-serif"
+        internal const val MONOSPACE_FAMILY_NAME = "monospace"
+    }
+}

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

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import com.datadog.android.sessionreplay.SessionReplay
+import com.datadog.android.sessionreplay.SessionReplayConfiguration
+
+internal class SessionReplaySDKWrapper : SessionReplayWrapper {
+    /**
+     * Enables a SessionReplay feature based on the configuration provided.
+     * @param sessionReplayConfiguration Configuration to use for the feature.
+     */
+    override fun enable(
+        sessionReplayConfiguration: SessionReplayConfiguration,
+    ) {
+        SessionReplay.enable(
+            sessionReplayConfiguration,
+        )
+    }
+}

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

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import com.datadog.android.sessionreplay.SessionReplayConfiguration
+
+/**
+ * Wrapper around [SessionReplay].
+ */
+interface SessionReplayWrapper {
+    /**
+     * Enables a SessionReplay feature based on the configuration provided.
+     * @param sessionReplayConfiguration Configuration to use for the feature.
+     */
+    fun enable(
+        sessionReplayConfiguration: SessionReplayConfiguration,
+    )
+}

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

@@ -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.
+ *
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import androidx.annotation.VisibleForTesting
+import com.datadog.reactnative.sessionreplay.utils.ReflectionUtils
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.UIImplementation
+import com.facebook.react.uimanager.UIManagerModule
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
+
+internal class ShadowNodeWrapper(
+    private val shadowNode: ReactShadowNode<out ReactShadowNode<*>>?,
+    private val reflectionUtils: ReflectionUtils = ReflectionUtils()
+) {
+    internal fun getDeclaredShadowNodeField(fieldName: String): Any? {
+        return shadowNode?.let {
+            reflectionUtils.getDeclaredField(
+                shadowNode,
+                fieldName
+            )
+        }
+    }
+
+    internal companion object {
+        internal fun getShadowNodeWrapper(
+            reactContext: ReactContext,
+            uiManagerModule: UIManagerModule,
+            reflectionUtils: ReflectionUtils,
+            viewId: Int
+        ): ShadowNodeWrapper? {
+            val countDownLatch = CountDownLatch(1)
+            var target: ReactShadowNode<out ReactShadowNode<*>>? = null
+
+            val shadowNodeRunnable = Runnable {
+                val node = resolveShadowNode(reflectionUtils, uiManagerModule, viewId)
+                if (node != null) {
+                    target = node
+                }
+
+                countDownLatch.countDown()
+            }
+
+            reactContext.runOnNativeModulesQueueThread(shadowNodeRunnable)
+            countDownLatch.await(5, TimeUnit.SECONDS)
+
+            if (target == null) {
+                return null
+            }
+
+            return ShadowNodeWrapper(reflectionUtils = reflectionUtils, shadowNode = target)
+        }
+
+        private fun resolveShadowNode(reflectionUtils: ReflectionUtils, uiManagerModule: UIManagerModule, tag: Int): ReactShadowNode<out ReactShadowNode<*>>? {
+            val uiManagerImplementation = reflectionUtils.getDeclaredField(uiManagerModule, UI_IMPLEMENTATION_FIELD_NAME) as UIImplementation?
+            return uiManagerImplementation?.resolveShadowNode(tag)
+        }
+
+        @VisibleForTesting
+        internal const val UI_IMPLEMENTATION_FIELD_NAME = "mUIImplementation"
+    }
+}

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

@@ -0,0 +1,20 @@
+/*
+ *
+ *  * 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.
+ *
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.widget.TextView
+import com.datadog.android.sessionreplay.model.MobileSegment
+
+internal interface TextPropertiesResolver {
+    fun addReactNativeProperties(
+        originalWireframe: MobileSegment.Wireframe.TextWireframe,
+        view: TextView,
+        pixelDensity: Float,
+    ): MobileSegment.Wireframe.TextWireframe
+}

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

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay.extensions
+
+internal fun Long.convertToDensityNormalized(density: Float): Long {
+    return if (density == 0f) {
+        this
+    } else {
+        (this / density).toLong()
+    }
+}

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

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay.mappers
+
+import android.widget.TextView
+import com.datadog.android.sessionreplay.internal.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.internal.recorder.MappingContext
+import com.datadog.android.sessionreplay.internal.recorder.mapper.MaskInputTextViewMapper
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.NoopTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.ReactTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.utils.TextViewUtils
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+
+internal class ReactMaskInputTextMapper(
+    private val reactTextPropertiesResolver: TextPropertiesResolver,
+    private val textViewUtils: TextViewUtils = TextViewUtils()
+): MaskInputTextViewMapper() {
+
+    internal constructor(
+        reactContext: ReactContext,
+        uiManagerModule: UIManagerModule?
+    ): this(
+        reactTextPropertiesResolver = if (uiManagerModule == null) {
+            NoopTextPropertiesResolver()
+        } else {
+            ReactTextPropertiesResolver(
+                reactContext = reactContext,
+                uiManagerModule = uiManagerModule
+            )
+        }
+    )
+
+    override fun map(
+        view: TextView,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback
+    ): List<MobileSegment.Wireframe> {
+        val wireframes = super.map(view, mappingContext, asyncJobStatusCallback)
+        return textViewUtils.mapTextViewToWireframes(
+            wireframes = wireframes,
+            view = view,
+            mappingContext = mappingContext,
+            reactTextPropertiesResolver = reactTextPropertiesResolver
+        )
+    }
+}
+

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

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay.mappers
+
+import android.widget.TextView
+import com.datadog.android.sessionreplay.internal.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.internal.recorder.MappingContext
+import com.datadog.android.sessionreplay.internal.recorder.mapper.MaskTextViewMapper
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.NoopTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.ReactTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.utils.TextViewUtils
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+
+internal class ReactMaskTextMapper(
+    private val reactTextPropertiesResolver: TextPropertiesResolver =
+        NoopTextPropertiesResolver(),
+    private val textViewUtils: TextViewUtils = TextViewUtils()
+): MaskTextViewMapper() {
+
+    internal constructor(
+        reactContext: ReactContext,
+        uiManagerModule: UIManagerModule?
+    ): this(
+        reactTextPropertiesResolver = if (uiManagerModule == null) {
+            NoopTextPropertiesResolver()
+        } else {
+            ReactTextPropertiesResolver(
+                reactContext = reactContext,
+                uiManagerModule = uiManagerModule
+            )
+        }
+    )
+
+    override fun map(
+        view: TextView,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback
+    ): List<MobileSegment.Wireframe> {
+        val wireframes = super.map(view, mappingContext, asyncJobStatusCallback)
+        return textViewUtils.mapTextViewToWireframes(
+            wireframes = wireframes,
+            view = view,
+            mappingContext = mappingContext,
+            reactTextPropertiesResolver = reactTextPropertiesResolver
+        )
+    }
+}
+

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

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay.mappers
+
+import android.widget.TextView
+import com.datadog.android.sessionreplay.internal.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.internal.recorder.MappingContext
+import com.datadog.android.sessionreplay.internal.recorder.mapper.TextViewMapper
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.NoopTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.ReactTextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
+import com.datadog.reactnative.sessionreplay.utils.TextViewUtils
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+
+internal class ReactTextMapper(
+    private val reactTextPropertiesResolver: TextPropertiesResolver =
+        NoopTextPropertiesResolver(),
+    private val textViewUtils: TextViewUtils = TextViewUtils()
+): TextViewMapper() {
+
+    internal constructor(
+        reactContext: ReactContext,
+        uiManagerModule: UIManagerModule?
+    ): this(
+        reactTextPropertiesResolver = if (uiManagerModule == null) {
+            NoopTextPropertiesResolver()
+        } else {
+            ReactTextPropertiesResolver(
+                reactContext = reactContext,
+                uiManagerModule = uiManagerModule
+            )
+        }
+    )
+
+    override fun map(
+        view: TextView,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback
+    ): List<MobileSegment.Wireframe> {
+        val wireframes = super.map(view, mappingContext, asyncJobStatusCallback)
+        return textViewUtils.mapTextViewToWireframes(
+            wireframes = wireframes,
+            view = view,
+            mappingContext = mappingContext,
+            reactTextPropertiesResolver = reactTextPropertiesResolver
+        )
+    }
+}

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

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+package com.datadog.reactnative.sessionreplay.mappers
+
+import com.datadog.android.sessionreplay.internal.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.internal.recorder.MappingContext
+import com.datadog.android.sessionreplay.internal.recorder.mapper.BaseWireframeMapper
+import com.datadog.android.sessionreplay.internal.recorder.mapper.TraverseAllChildrenMapper
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
+import com.datadog.reactnative.sessionreplay.utils.ReactViewBackgroundDrawableUtils
+import com.facebook.react.views.view.ReactViewGroup
+
+internal class ReactViewGroupMapper(
+    private val reactViewBackgroundDrawableUtils: ReactViewBackgroundDrawableUtils =
+        ReactViewBackgroundDrawableUtils(),
+    private val drawableUtils: DrawableUtils = DrawableUtils()
+) :
+    BaseWireframeMapper<ReactViewGroup, MobileSegment.Wireframe>(),
+    TraverseAllChildrenMapper<ReactViewGroup, MobileSegment.Wireframe> {
+
+    override fun map(
+        view: ReactViewGroup,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback
+    ): List<MobileSegment.Wireframe> {
+        val pixelDensity = mappingContext.systemInformation.screenDensity
+        val viewGlobalBounds = resolveViewGlobalBounds(view, pixelDensity)
+        val backgroundDrawable = drawableUtils.getReactBackgroundFromDrawable(view.background)
+
+        // view.alpha is the value of the opacity prop on the js side
+        val opacity = view.alpha
+
+        val (shapeStyle, border) =
+            if (backgroundDrawable != null) {
+                reactViewBackgroundDrawableUtils
+                    .resolveShapeAndBorder(backgroundDrawable, opacity, pixelDensity)
+            } else {
+                null to null
+            }
+
+        return listOf(
+            MobileSegment.Wireframe.ShapeWireframe(
+                resolveViewId(view),
+                viewGlobalBounds.x,
+                viewGlobalBounds.y,
+                viewGlobalBounds.width,
+                viewGlobalBounds.height,
+                shapeStyle = shapeStyle,
+                border = border
+            )
+        )
+    }
+}