Session Replay: Unresolved reference: fullBorderRadius #740

rmerchant-IAGL · 2024-11-20T23:52:26Z

Describe the issue

After upgrading React Native to version 0.75.4. Session replay fails to compile for Android.

I get the following message

e: file:///Users/rmerchant/Projects/Avios/IAGLoyaltyMobile/node_modules/@datadog/mobile-react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/utils/ReactViewBackgroundDrawableUtils.kt:31:22 Unresolved reference: fullBorderRadius

..

FAILURE: Build failed with an exception. * What went wrong:
Execution failed for task ':datadog_mobile-react-native-session-replay:compileDebugKotlin'.

Reproduction steps

install @datadog/mobile-react-native-session-replay 2.4.4-alpha.0
React Native 0.75.4
Run npx react-native run-android

SDK logs

No response

Device Information

No response

SDK version

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

Integration Methods

NPM

React Native Version

0.75.4

Package.json Contents

{
  "name": "mobileapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "android:release": "npx react-native run-android --mode release",
    "android:build": "npx react-native bundle --platform android --dev false --entry-file index.js --assets-dest android/app/src/main/res --bundle-output ./android/app/src/main/assets/index.android.bundle --sourcemap-output ./android/app/src/main/assets/index.android.bundle.map",
    "ios": "npx react-native run-ios --simulator iPhone 15 Pro",
    "ios:release": "npx react-native run-ios --simulator iPhone 15 Pro --mode Release",
    "ios:build": "npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ./ios/main.jsbundle --sourcemap-output ./ios/main.jsbundle.map",
    "ios:latest": "npx react-native run-ios --simulator iPhone 15 Pro",
    "ios:small": "npx react-native run-ios --simulator iPhone 12 mini",
    "e2e-ios": "bash scripts/e2e_tests.sh",
    "e2e-android": "PLATFORM=Android npx ts-node e2e-tests/loginTest.tsx",
    "test:unit": "npm run test -- --selectProjects unit",
    "test:component": "npm run test -- --selectProjects component",
    "test:integration": "npm run test -- --selectProjects integration",
    "test:contract": "graphql-inspector diff ./graphql/client.cached.schema.graphql ./graphql/server.cached.schema.graphql --rule ./graphql/graphql-inspector-diff-rule.js",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "npm run lint -- --fix",
    "lint:report": "npm run lint -- -f json -o reports/eslint-report.json",
    "check-env-vars": "ts-node --project tsconfig.node.json scripts/check_vars.ts",
    "check-types": "tsc",
    "check-format": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
    "clean-android": "cd android && ./gradlew clean",
    "clean-ios": "cd ios && xcodebuild clean",
    "clean-node": "rm -rf ./node_modules",
    "clean-pods": "rm -rf ./ios/Pods",
    "clean": "react-native clean-project",
    "clean:auto": "react-native clean-project-auto",
    "refresh-pods": "cd ios && bundle exec pod install",
  },
  "dependencies": {
    "@datadog/mobile-react-native": "^2.4.4",
    "@datadog/mobile-react-native-session-replay": "^2.4.4-alpha.0",
    "@datadog/mobile-react-navigation": "^2.4.4",
    "@devcycle/react-native-client-sdk": "^2.4.3",
    "@expo/react-native-action-sheet": "^4.1.0",
    "@graphql-codegen/introspection": "^4.0.3",
    "@graphql-typed-document-node/core": "^3.2.0",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-clipboard/clipboard": "^1.14.0",
    "@react-native-community/geolocation": "^3.2.1",
    "@react-native-community/netinfo": "^11.3.1",
    "@react-native-community/push-notification-ios": "^1.11.0",
    "@react-native-cookies/cookies": "^6.0.11",
    "@react-native-firebase/analytics": "21.1.0",
    "@react-native-firebase/app": "21.1.0",
    "@react-native-firebase/crashlytics": "21.1.0",
    "@react-native-firebase/messaging": "21.1.0",
    "@react-native-masked-view/masked-view": "^0.3.0",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/material-top-tabs": "^6.5.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.9.12",
    "@reduxjs/toolkit": "1.8.6",
    "@rtk-query/graphql-request-base-query": "^2.2.0",
    "@shopify/flash-list": "^1.6.3",
    "date-fns": "^2.29.3",
    "fidel-react-native": "^2.2.0",
    "graphql": "^16.8.1",
    "html-entities": "^2.5.2",
    "jail-monkey": "^2.8.0",
    "jwt-decode": "^3.1.2",
    "lottie-react-native": "^7.0.0",
    "patch-package": "^8.0.0",
    "react": "^18.2.0",
    "react-hook-form": "^7.45.4",
    "react-native": "^0.75.0",
    "react-native-auth0": "^3.1.0",
    "react-native-calendars": "1.1301.0",
    "react-native-color-matrix-image-filters": "^7.0.1",
    "react-native-config": "^1.4.5",
    "react-native-device-info": "^10.12.0",
    "react-native-dropdown-picker": "^5.4.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-get-random-values": "^1.10.0",
    "react-native-inappbrowser-reborn": "^3.7.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-localization": "^2.2.0",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "1.18.1",
    "react-native-markdown-view": "^1.1.4",
    "react-native-marketingcloudsdk": "^8.1.0",
    "react-native-onetrust-cmp": "^202404.1.0",
    "react-native-pager-view": "^6.2.3",
    "react-native-performance-limiter": "^0.1.1",
    "react-native-permissions": "^3.3.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-rate": "^1.2.10",
    "react-native-reanimated": "^3.15.0",
    "react-native-render-html": "^6.1.0",
    "react-native-rsa-native": "^2.0.5",
    "react-native-safe-area-context": "^4.10.5",
    "react-native-screens": "^3.34.0",
    "react-native-sha256": "^1.4.9",
    "react-native-skeleton-placeholder": "^5.2.4",
    "react-native-svg": "^15.6.0",
    "react-native-tab-view": "^3.3.4",
    "react-native-toast-notifications": "^3.3.1",
    "react-native-tracking-transparency": "^0.1.2",
    "react-native-userleap": "^2.16.2",
    "react-native-webview": "^13.10.5",
    "react-native-windows": "^0.75.0",
    "react-redux": "^8.0.4",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@commitlint/cli": "^17.5.1",
    "@commitlint/config-conventional": "^17.4.4",
    "@datadog/datadog-ci": "^2.43.0",
    "@faker-js/faker": "^8.0.2",
    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
    "@graphql-codegen/typescript": "^4.0.6",
    "@graphql-codegen/typescript-operations": "^4.2.0",
    "@graphql-codegen/typescript-resolvers": "^4.0.6",
    "@graphql-codegen/typescript-rtk-query": "^3.1.1",
    "@graphql-inspector/cli": "^5.0.6",
    "@react-native-community/cli": "^14.0.0",
    "@react-native-community/cli-platform-android": "^14.0.0",
    "@react-native-community/cli-platform-ios": "^14.0.0",
    "@react-native/babel-preset": "^0.75.0",
    "@react-native/eslint-config": "^0.75.4",
    "@react-native/metro-config": "^0.75.0",
    "@react-native/typescript-config": "^0.75.4",
    "@rnx-kit/align-deps": "^3.0.0",
    "@rtk-query/codegen-openapi": "^1.0.0",
    "@swc/core": "^1.7.28",
    "@swc/jest": "^0.2.36",
    "@testing-library/jest-native": "^5.4.2",
    "@testing-library/react-native": "^12.7.2",
    "@types/jest": "^27.4.0",
    "@types/metro-config": "^0.76.3",
    "@types/node": "^20.8.2",
    "@types/node-rsa": "^1.1.1",
    "@types/react": "^18.2.6",
    "@types/react-native-calendars": "^1.1264.3",
    "@types/react-native-push-notification": "^8.1.4",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^7.10.0",
    "babel-jest": "^29.6.3",
    "cross-fetch": "^3.1.6",
    "detox": "^20.1.2",
    "dotenv": "^16.0.3",
    "eslint": "^8.19.0",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-react-native-a11y": "^3.3.0",
    "eslint-plugin-testing-library": "^6.3.0",
    "iagl-prune-schema-preset": "file:graphql/iagl-prune-schema-preset",
    "jest": "^29.2.1",
    "jest-junit": "^16.0.0",
    "jest-sonar": "^0.2.16",
    "lefthook": "^1.3.8",
    "msw": "^2.4.9",
    "prettier": "2.8.8",
    "react-native-clean-project": "^4.0.1",
    "react-test-renderer": "^18.2.0",
    "ts-node": "^10.9.1",
    "typescript": "5.0.4"
  },
  "overrides": {
    "react-native-skeleton-placeholder": {
      "@react-native-masked-view/masked-view": "$@react-native-masked-view/masked-view"
    },
    "react-native-markdown-view": {
      "simple-markdown": "^0.7.3"
    }
  },
  "engines": {
    "node": ">=18"
  },
  "rnx-kit": {
    "kitType": "app",
    "alignDeps": {
      "requirements": [
        "react-native@^0.75"
      ],
      "capabilities": [
        "animation",
        "babel-preset-react-native",
        "clipboard",
        "core",
        "core-android",
        "core-ios",
        "core-windows",
        "gestures",
        "html",
        "jest",
        "masked-view",
        "navigation/native",
        "netinfo",
        "react",
        "react-test-renderer",
        "safe-area",
        "screens",
        "storage",
        "svg",
        "webview"
      ]
    }
  }
}

iOS Setup

No response

Android Setup

androd/build.gradle

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.24"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        classpath("com.google.gms:google-services:4.4.2")
        classpath("com.google.firebase:firebase-crashlytics-gradle:3.0.2")
    }
}

allprojects {
    tasks.withType(JavaCompile) {
        options.compilerArgs << "-Xlint:unchecked"
    }
}

subprojects {
    ext {
        compileSdk = rootProject.ext.compileSdkVersion
        minSdk = rootProject.ext.minSdkVersion
        targetSdk = rootProject.ext.targetSdkVersion
    }

    afterEvaluate { subproject ->
        if (subproject.getName().equals('react-native-auth0')) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion
                defaultConfig {
                    minSdkVersion rootProject.ext.minSdkVersion
                    targetSdkVersion rootProject.ext.targetSdkVersion
                    missingDimensionStrategy 'react-native-webview', 'general'
                }
            }
        }
    }
}

apply plugin: "com.facebook.react.rootproject"

android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

// React-Native-Config https://www.npmjs.com/package/react-native-config#extra-step-for-android
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

// Custom plugins

// Firebase
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
    // root = file("../../")
    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
    // reactNativeDir = file("../../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
    // codegenDir = file("../../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
    // cliFile = file("../../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]

    /* Autolinking */
    autolinkLibrariesWithApp()
}

repositories{
    google()
    mavenCentral()
    maven { url "https://salesforce-marketingcloud.github.io/MarketingCloudSDK-Android/repository" }
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    namespace "com.iagloyaltymobile"
    defaultConfig {
        // applicationId "com.iagloyaltymobile"
        applicationId project.hasProperty("applicationId") ? project.property("applicationId") : "com.iagloyaltymobile"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode project.hasProperty("versionCode") ? project.property("versionCode") as int : 909090
        versionName project.hasProperty("versionName") ? project.property("versionName") : "9.9.9"

        //----- Add Custom config below with the package name that uses it. -----//

        // React-Native-Config https://www.npmjs.com/package/react-native-config#advanced-android-setup
        resValue "string", "build_config_package", "com.iagloyaltymobile"

        // Auth0
        manifestPlaceholders = [auth0Domain: project.env.get("AUTH0_DOMAIN"), auth0Scheme: "${applicationId}"]

        // multiDexEnabled true @TODO I turned of multidex because I'm not sure what it's needed
    }


    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }

        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig project.hasProperty('MYAPP_UPLOAD_STORE_FILE') ? signingConfigs.release : signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"

            /* Add the firebaseCrashlytics extension (by default,
            * it's disabled to improve build speeds) and set
            * nativeSymbolUploadEnabled to true along with a pointer to native libs. */
            firebaseCrashlytics {
                nativeSymbolUploadEnabled true
                unstrippedNativeLibsDir "build/intermediates/merged_native_libs/release/out/lib"
            }
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

Other relevant information

ReactViewBackgroundDrawableUtils is calling fullBorderRadius from com.facebook.react.views.view.ReactViewBackgroundDrawable

dd-sdk-reactnative/packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/utils/ReactViewBackgroundDrawableUtils.kt

Line 31 in 7e201e3

drawable.fullBorderRadius.toLong().convertToDensityNormalized(pixelDensity)

com.facebook.react.views.view.ReactViewBackgroundDrawable is now deprecated and CSSBackgroundDrawable should be used instead.

https://github.com/facebook/react-native/blob/6e06a810f0ab1002f1d10351bc878babde36b1f1/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java

The text was updated successfully, but these errors were encountered:

rmerchant-IAGL · 2024-11-25T09:25:35Z

@marco-saia-datadog Sorry to tag you in this issue, but it's currently blocking us from upgrading to RN 0.75 which this library says its supports. Is anyone looking at this?

marco-saia-datadog · 2024-11-29T15:34:09Z

Hi @rmerchant-IAGL! I apologise for the delay.

We currently have some blockers that we need to solve in order to grant full support for RN 0.75.

In the meantime, you could apply this PR with patch-package, to unblock your progress, and we will keep you posted as soon as an official fix will be released.

Does that sound good to you?

compwron · 2024-12-09T03:57:38Z

Thank you, this patch fixed my team's problem :)

rmerchant-IAGL added the setup label Nov 20, 2024

rmerchant-IAGL changed the title ~~Unresolved reference: fullBorderRadius~~ Session Replay: Unresolved reference: fullBorderRadius Nov 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Session Replay: Unresolved reference: fullBorderRadius #740

Session Replay: Unresolved reference: fullBorderRadius #740

rmerchant-IAGL commented Nov 20, 2024 •

edited

Loading

rmerchant-IAGL commented Nov 25, 2024

marco-saia-datadog commented Nov 29, 2024

compwron commented Dec 9, 2024

Session Replay: Unresolved reference: fullBorderRadius #740

Session Replay: Unresolved reference: fullBorderRadius #740

Comments

rmerchant-IAGL commented Nov 20, 2024 • edited Loading

Describe the issue

Reproduction steps

SDK logs

Device Information

SDK version

Integration Methods

React Native Version

Package.json Contents

iOS Setup

Android Setup

androd/build.gradle

android/app/build.gradle

Other relevant information

rmerchant-IAGL commented Nov 25, 2024

marco-saia-datadog commented Nov 29, 2024

compwron commented Dec 9, 2024

rmerchant-IAGL commented Nov 20, 2024 •

edited

Loading