react-native-clarity 2.3.0 → 3.0.0

package/README.md

@@ -1,121 +1,127 @@
-# react-native-clarity
-
-A ReactNative plugin that allows integrating Clarity with your application.
-
-## Installation
-
-```sh
-npm install react-native-clarity
-```
-
-**Note**: The Clarity package depends on native code to run, therefore you have to ship a new build after integrating the package.
-
-## Usage
-
-```js
-import { LogLevel, initialize, setCustomUserId,  setCustomSessionId, setCustomTag, setCurrentScreenName, getCurrentSessionId } from 'react-native-clarity';
-
-// Initialize Clarity.
-const clarityConfig = {
-  logLevel: LogLevel.Verbose,
-  allowMeteredNetworkUsage: true
-};
-
-initialize('<ProjectId>', clarityConfig);
-
-// Pause Clarity capturing.
-pause();
-
-// Resume Clarity capturing if paused.
-resume();
-
-// Returns true if clarity was paused.
-isPaused().then((paused) => {...});
-
-// Set custom user id.
-setCustomUserId("<CustomUserId>");
-
-// Set custom session id.
-setCustomSessionId("<CustomSessionId>");
-
-// Set custom tag.
-setCustomTag("key", "value");
-
-// Setting the current screen name when using React Navigation
-import { NavigationContainer useNavigationContainerRef } from '@react-navigation/native';
-
-const HomeScreen = ({...}) => {
-  const navigationRef = useNavigationContainerRef();
-  const routeNameRef = React.useRef();
-
-  return (
-    <NavigationContainer
-      ref={navigationRef}
-      onReady={() => {
-        routeNameRef.current = navigationRef.getCurrentRoute().name;
-        setCurrentScreenName(routeNameRef.current);
-      }}
-      onStateChange={() => {
-        const previousRouteName = routeNameRef.current;
-        const currentRouteName = navigationRef.getCurrentRoute().name;
-
-        if (previousRouteName !== currentRouteName) {
-          routeNameRef.current = currentRouteName;
-          setCurrentScreenName(currentRouteName);
-        }
-      }}
-    >
-      {/* ... */}
-    </NavigationContainer>
-  );
-};
-
-// Get current session id to correlate with other tools.
-getCurrentSessionId().then((id) => {...});
-
-// Get current session url to correlate with other tools.
-getCurrentSessionUrl().then((url) => {...});
-```
-
-### Initialization arguments
-
-```ts
-/**
- * Initializes the Clarity SDK if the API level is supported.
- *
- * @param projectId     [REQUIRED] The Clarity project id to send data to.
- * @param config     [OPTIONAL] The clarity config, if not provided default values are used.
-*/
-function initialize(projectId: string, config?: ClarityConfig)
-
-/**
- * The configuration that will be used to customize the Clarity behaviour.
- *
- * @param userId        [OPTIONAL default = null] A custom identifier for the current user. If passed as null, the user id
- *                      will be auto generated. The user id in general is sticky across sessions.
- *                      The provided user id must follow these conditions:
- *                          1. Cannot be an empty string.
- *                          2. Should be base36 and smaller than "1Z141Z4".
- * @param logLevel      [OPTIONAL default = LogLevel.None] The level of logging to show in the device logcat stream.
- * @param allowMeteredNetworkUsage  [OPTIONAL default = false] Allows uploading session data to the servers on device metered network.
- * @param enableWebViewCapture    [OPTIONAL default = true] Allows Clarity to capture the web views DOM content.
- * @param allowedDomains    [OPTIONAL default = ["*"]] The whitelisted domains to allow Clarity to capture their DOM content.
- *                          If it contains "*" as an element, all domains will be captured.
- * @param disableOnLowEndDevices [OPTIONAL default = false] Disable Clarity on low-end devices.
- * @param maximumDailyNetworkUsageInMB [OPTIONAL default = null] Maximum daily network usage for Clarity (null = No limit). When the limit is reached, Clarity will turn on lean mode.
- */
-
-interface ClarityConfig {
-  userId?: string | null;
-  logLevel?: LogLevel;
-  allowMeteredNetworkUsage?: boolean;
-  enableWebViewCapture?: boolean;
-  allowedDomains?: string[];
-  disableOnLowEndDevices?: Boolean;
-  maximumDailyNetworkUsageInMB?: number;
-}
-```
-
-## License
-
-MIT
+# react-native-clarity
+
+A ReactNative plugin that allows integrating Clarity with your application.
+
+## Installation
+
+```sh
+npm install react-native-clarity
+```
+
+### Notes
+
+- The Clarity package depends on native code to run, therefore you have to ship a new build after integrating the package.
+- **For `react-native-svg` Users**: Clarity is currently incompatible with `react-native-svg` version 13.x due to a known bug that causes user interaction and playback issues. To ensure proper functionality, please upgrade to `react-native-svg` version 14 or later.
+
+## Usage
+
+```js
+import { LogLevel, initialize, setCustomUserId,  setCustomSessionId, setCustomTag, setCurrentScreenName, getCurrentSessionId, getCurrentSessionUrl } from 'react-native-clarity';
+
+// Initialize Clarity.
+const clarityConfig = {
+  logLevel: LogLevel.Verbose,
+  allowMeteredNetworkUsage: true
+};
+
+initialize('<ProjectId>', clarityConfig);
+
+// Pause Clarity capturing.
+pause();
+
+// Resume Clarity capturing if paused.
+resume();
+
+// Returns true if clarity was paused.
+isPaused().then((paused) => {...});
+
+// Set custom user id.
+setCustomUserId("<CustomUserId>");
+
+// Set custom session id.
+setCustomSessionId("<CustomSessionId>");
+
+// Set custom tag.
+setCustomTag("key", "value");
+
+// Setting the current screen name when using React Navigation
+import { NavigationContainer useNavigationContainerRef } from '@react-navigation/native';
+
+const HomeScreen = ({...}) => {
+  const navigationRef = useNavigationContainerRef();
+  const routeNameRef = React.useRef();
+
+  return (
+    <NavigationContainer
+      ref={navigationRef}
+      onReady={() => {
+        routeNameRef.current = navigationRef.getCurrentRoute().name;
+        setCurrentScreenName(routeNameRef.current);
+      }}
+      onStateChange={() => {
+        const previousRouteName = routeNameRef.current;
+        const currentRouteName = navigationRef.getCurrentRoute().name;
+
+        if (previousRouteName !== currentRouteName) {
+          routeNameRef.current = currentRouteName;
+          setCurrentScreenName(currentRouteName);
+        }
+      }}
+    >
+      {/* ... */}
+    </NavigationContainer>
+  );
+};
+
+// Get current session id to correlate with other tools.
+getCurrentSessionId().then((id) => {...});
+
+// Get current session url to correlate with other tools.
+getCurrentSessionUrl().then((url) => {...});
+```
+
+### Initialization arguments
+
+```ts
+/**
+ * Initializes the Clarity SDK if the API level is supported.
+ *
+ * @param projectId     [REQUIRED] The Clarity project id to send data to.
+ * @param config     [OPTIONAL] The clarity config, if not provided default values are used.
+*/
+function initialize(projectId: string, config?: ClarityConfig)
+
+/**
+ * The configuration that will be used to customize the Clarity behaviour.
+ *
+ * @param userId        [OPTIONAL default = null] A custom identifier for the current user. If passed as null, the user id
+ *                      will be auto generated. The user id in general is sticky across sessions.
+ *                      The provided user id must follow these conditions:
+ *                          1. Cannot be an empty string.
+ *                          2. Should be base36 and smaller than "1Z141Z4".
+ * @param logLevel      [OPTIONAL default = LogLevel.None] The level of logging to show in the device logcat stream.
+ * @param allowMeteredNetworkUsage  [OPTIONAL default = false] Allows uploading session data to the servers on device metered network.
+ * @param enableWebViewCapture    [OPTIONAL default = true] Allows Clarity to capture the web views DOM content.
+ * @param allowedDomains    [OPTIONAL default = ["*"]] The whitelisted domains to allow Clarity to capture their DOM content.
+ *                          If it contains "*" as an element, all domains will be captured.
+ *                          Note: iOS currently does not support allowedDomains feature.
+ * @param disableOnLowEndDevices [OPTIONAL default = false] Disable Clarity on low-end devices.
+ * @param maximumDailyNetworkUsageInMB [OPTIONAL default = null] Maximum daily network usage for Clarity (null = No limit). When the limit is reached, Clarity will turn on lean mode.
+ *                                      Note: iOS currently does not support limiting network usage.
+ * @param enableIOS_experimental [OPTIONAL default = false] Experimental flag to enable Clarity on iOS platform.
+ */
+interface ClarityConfig {
+  userId?: string | null;
+  logLevel?: LogLevel;
+  allowMeteredNetworkUsage?: boolean;
+  enableWebViewCapture?: boolean;
+  allowedDomains?: string[];
+  disableOnLowEndDevices?: Boolean;
+  maximumDailyNetworkUsageInMB?: number;
+  enableIOS_experimental?: boolean;
+}
+```
+
+## License
+
+MIT

package/android/build.gradle

@@ -1,81 +1,81 @@
-buildscript {
-  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
-  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["Clarity_kotlinVersion"]
-
-  repositories {
-    google()
-    mavenCentral()
-  }
-
-  dependencies {
-    classpath "com.android.tools.build:gradle:7.2.1"
-    // noinspection DifferentKotlinGradleVersion
-    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-  }
-}
-
-def isNewArchitectureEnabled() {
-  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
-apply plugin: "com.android.library"
-apply plugin: "kotlin-android"
-
-if (isNewArchitectureEnabled()) {
-  apply plugin: "com.facebook.react"
-}
-
-def getExtOrDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["Clarity_" + name]
-}
-
-def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["Clarity_" + name]).toInteger()
-}
-
-android {
-  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
-
-  defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
-    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
-  }
-  buildTypes {
-    release {
-      minifyEnabled false
-    }
-  }
-
-  lintOptions {
-    disable "GradleCompatible"
-  }
-
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-  }
-
-}
-
-repositories {
-  mavenCentral()
-  google()
-  mavenLocal()
-}
-
-def kotlin_version = getExtOrDefault("kotlinVersion")
-
-dependencies {
-  implementation "com.facebook.react:react-native:+"
-  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.microsoft.clarity:clarity:2.3.0"
-}
-
-if (isNewArchitectureEnabled()) {
-  react {
-    jsRootDir = file("../src/")
-    libraryName = "Clarity"
-    codegenJavaPackageName = "com.microsoft.clarity.reactnative"
-  }
-}
+buildscript {
+  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["Clarity_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["Clarity_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["Clarity_" + name]).toInteger()
+}
+
+android {
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+  mavenLocal()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation "com.microsoft.clarity:clarity:2.4.0"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "Clarity"
+    codegenJavaPackageName = "com.microsoft.clarity.reactnative"
+  }
+}

package/android/gradle.properties

@@ -1,7 +1,7 @@
-#make sure these are acutally used
-Clarity_kotlinVersion=1.7.0
-Clarity_minSdkVersion=21
-Clarity_targetSdkVersion=34
-Clarity_compileSdkVersion=34
-Clarity_ndkversion=21.4.7075529
-android.useAndroidX=true
+#make sure these are acutally used
+Clarity_kotlinVersion=1.7.0
+Clarity_minSdkVersion=21
+Clarity_targetSdkVersion=34
+Clarity_compileSdkVersion=34
+Clarity_ndkversion=21.4.7075529
+android.useAndroidX=true