react-native-inapp-inspector 1.1.13 → 1.1.14

package/dist/esm/styles/index.d.ts

@@ -305,6 +305,25 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         color: string;
         fontSize: number;
     };
+    fabGreenDot: {
+        position: string;
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
     statBox: {
         flex: number;
         alignItems: string;
@@ -1670,15 +1689,22 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         marginTop: number;
     };
     analyticsCardRow: {};
-    analyticsTopEventsCard: {
-        marginHorizontal: number;
-        marginBottom: number;
+    analyticsIconCircle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+    };
+    analyticsHeaderCard: {
         backgroundColor: string;
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
-        paddingHorizontal: number;
-        paddingVertical: number;
+        padding: number;
+        marginHorizontal: number;
+        marginTop: number;
+        marginBottom: number;
         shadowColor: string;
         shadowOpacity: number;
         shadowRadius: number;
@@ -1688,61 +1714,94 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         };
         elevation: number;
     };
-    analyticsTopEventsHeaderRow: {
+    analyticsHeaderTop: {
         flexDirection: string;
-        alignItems: string;
         justifyContent: string;
+        alignItems: string;
         marginBottom: number;
     };
-    analyticsTopEventsTitle: {
+    analyticsHeaderTitle: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        letterSpacing: number;
-        textTransform: string;
     };
-    analyticsTopEventsSubtitle: {
+    statusDot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    analyticsHeaderSubtitle: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        letterSpacing: number;
+        marginTop: number;
     };
-    analyticsTopEventRow: {
-        flexDirection: string;
-        alignItems: string;
-        marginBottom: number;
-        gap: number;
+    analyticsHeaderToggle: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
-    analyticsTopEventName: {
+    analyticsHeaderToggleText: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        flex: number;
     };
-    analyticsTopEventBarWrap: {
+    analyticsStatsRow: {
+        flexDirection: string;
+        gap: number;
+        borderTopWidth: number;
+        borderTopColor: string;
+        paddingTop: number;
+    };
+    analyticsStatBox: {
         flex: number;
-        height: number;
         backgroundColor: string;
         borderRadius: number;
-        overflow: string;
+        paddingVertical: number;
+        alignItems: string;
     };
-    analyticsTopEventBar: {
-        height: string;
-        borderRadius: number;
+    analyticsStatValue: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
     };
-    analyticsTopEventCount: {
+    analyticsStatLabel: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        width: number;
-        textAlign: string;
+        marginTop: number;
     };
-    analyticsIconCircle: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        alignItems: string;
+    analyticsHeaderDetails: {
+        borderTopWidth: number;
+        borderTopColor: string;
+        paddingTop: number;
+        marginTop: number;
+    };
+    detailsGroupTitle: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+        marginBottom: number;
+    };
+    detailsRow: {
+        flexDirection: string;
         justifyContent: string;
+        paddingVertical: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    detailsKey: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
+    detailsValue: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
     };
 };
 declare const styles: any;

package/dist/esm/styles/index.js

@@ -261,6 +261,22 @@ export const getRawStyles = (colors) => ({
         color: colors.primaryLight,
         fontSize: 11,
     },
+    fabGreenDot: {
+        position: 'absolute',
+        top: 2,
+        right: 2,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: '#00E676',
+        borderWidth: 2,
+        borderColor: colors.primaryLight,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1.5,
+        elevation: 2,
+    },
     statBox: {
         flex: 1,
         alignItems: 'center',
@@ -1525,76 +1541,116 @@ export const getRawStyles = (colors) => ({
         marginTop: 2,
     },
     analyticsCardRow: {},
-    analyticsTopEventsCard: {
-        marginHorizontal: 16,
-        marginBottom: 12,
+    analyticsIconCircle: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    analyticsHeaderCard: {
         backgroundColor: colors.primaryLight,
         borderRadius: 12,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
+        padding: 14,
+        marginHorizontal: 12,
+        marginTop: 8,
+        marginBottom: 8,
+        shadowColor: '#000000',
+        shadowOpacity: 0.03,
         shadowRadius: 4,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
     },
-    analyticsTopEventsHeaderRow: {
+    analyticsHeaderTop: {
         flexDirection: 'row',
-        alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 12,
+        alignItems: 'center',
+        marginBottom: 10,
     },
-    analyticsTopEventsTitle: {
+    analyticsHeaderTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.8,
-        textTransform: 'uppercase',
+        fontSize: 14,
+        color: colors.primaryBlack,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
     },
-    analyticsTopEventsSubtitle: {
+    analyticsHeaderSubtitle: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 9,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.4,
+        fontSize: 11,
+        color: colors.grayText,
+        marginTop: 2,
+    },
+    analyticsHeaderToggle: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        backgroundColor: colors.grayBackground,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+    },
+    analyticsHeaderToggleText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: colors.purple,
     },
-    analyticsTopEventRow: {
+    analyticsStatsRow: {
         flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 8,
         gap: 8,
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
     },
-    analyticsTopEventName: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: colors.primaryBlack,
+    analyticsStatBox: {
         flex: 1,
-    },
-    analyticsTopEventBarWrap: {
-        flex: 0.8,
-        height: 3,
         backgroundColor: colors.grayBackground,
-        borderRadius: 2,
-        overflow: 'hidden',
+        borderRadius: 6,
+        paddingVertical: 6,
+        alignItems: 'center',
     },
-    analyticsTopEventBar: {
-        height: '100%',
-        borderRadius: 2,
+    analyticsStatValue: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: colors.primaryBlack,
     },
-    analyticsTopEventCount: {
+    analyticsStatLabel: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 9,
+        color: colors.grayText,
+        marginTop: 1,
+    },
+    analyticsHeaderDetails: {
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
+        marginTop: 10,
+    },
+    detailsGroupTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 11,
-        color: colors.grayText,
-        width: 24,
-        textAlign: 'right',
+        color: colors.purple,
+        marginBottom: 6,
     },
-    analyticsIconCircle: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
+    detailsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 4,
+        borderBottomWidth: 0.5,
+        borderBottomColor: colors.dividerColor,
+    },
+    detailsKey: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: colors.primaryBlack,
+    },
+    detailsValue: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: colors.grayText,
     },
 });
 const styles = {};

package/example/android/app/build.gradle

@@ -1,3 +1,30 @@
+import java.net.NetworkInterface
+import java.net.Inet4Address
+
+def getLocalIpAddress() {
+    def ip = "10.0.2.2"
+    try {
+        def interfaces = NetworkInterface.getNetworkInterfaces()
+        while (interfaces.hasMoreElements()) {
+            def iface = interfaces.nextElement()
+            if (iface.isLoopback() || !iface.isUp()) continue
+            def addresses = iface.getInetAddresses()
+            while (addresses.hasMoreElements()) {
+                def addr = addresses.nextElement()
+                if (addr instanceof Inet4Address) {
+                    def host = addr.getHostAddress()
+                    if (host.startsWith("192.168.") || host.startsWith("10.") || host.startsWith("172.")) {
+                        return host
+                    }
+                }
+            }
+        }
+    } catch (Exception e) {
+        // ignore
+    }
+    return ip
+}
+
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
@@ -25,7 +52,7 @@ react {
 
     /* Bundling */
     //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
+    nodeExecutableAndArgs = [rootProject.ext.has("NODE_EXECUTABLE") ? rootProject.ext.get("NODE_EXECUTABLE") : "node"]
     //
     //   The command to run when bundling. By default is 'bundle'
     // bundleCommand = "ram-bundle"
@@ -84,6 +111,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        resValue "string", "developer_ip_address", getLocalIpAddress()
     }
     signingConfigs {
         debug {

package/example/android/app/src/main/java/com/example/MainApplication.kt

@@ -23,5 +23,30 @@ class MainApplication : Application(), ReactApplication {
   override fun onCreate() {
     super.onCreate()
     loadReactNative(this)
+
+    if (BuildConfig.DEBUG) {
+      val isEmulator = android.os.Build.FINGERPRINT.startsWith("generic")
+              || android.os.Build.FINGERPRINT.startsWith("unknown")
+              || android.os.Build.MODEL.contains("google_sdk")
+              || android.os.Build.MODEL.contains("Emulator")
+              || android.os.Build.MODEL.contains("Android SDK built for x86")
+              || android.os.Build.MANUFACTURER.contains("Genymotion")
+              || android.os.Build.HARDWARE.contains("goldfish")
+              || android.os.Build.HARDWARE.contains("ranchu")
+      if (!isEmulator) {
+        try {
+          val ipResId = resources.getIdentifier("developer_ip_address", "string", packageName)
+          if (ipResId != 0) {
+            val ip = getString(ipResId)
+            if (ip.isNotEmpty() && ip != "10.0.2.2") {
+              val preferences = getSharedPreferences("${packageName}_preferences", MODE_PRIVATE)
+              preferences.edit().putString("debug_http_host", "$ip:8081").apply()
+            }
+          }
+        } catch (e: Exception) {
+          e.printStackTrace()
+        }
+      }
+    }
   }
 }

package/example/android/build.gradle

@@ -1,21 +1,48 @@
 buildscript {
     ext {
-        buildToolsVersion = "36.0.0"
+        buildToolsVersion = "35.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 36
-        targetSdkVersion = 36
+        compileSdkVersion = 35
+        targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.1.20"
+        REACT_NATIVE_NODE_MODULES_DIR = new File(rootDir, "../node_modules/react-native")
+
+        def findNodeBin = { ->
+            def nvmDir = System.getenv("NVM_DIR") ?: (System.getProperty("user.home") + "/.nvm")
+            def nvmVersionsDir = new File(nvmDir, "versions/node")
+            if (nvmVersionsDir.exists()) {
+                def versions = nvmVersionsDir.listFiles()?.findAll { it.isDirectory() }?.sort { it.name }?.reverse()
+                for (v in versions) {
+                    def candidate = new File(v, "bin/node")
+                    if (candidate.exists() && candidate.canExecute()) {
+                        return candidate.absolutePath
+                    }
+                }
+            }
+            return "node"
+        }
+        NODE_EXECUTABLE = findNodeBin()
     }
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle")
+        classpath("com.android.tools.build:gradle:8.7.3")
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
     }
 }
 
 apply plugin: "com.facebook.react.rootproject"
+
+allprojects {
+    configurations.all {
+        resolutionStrategy {
+            force 'androidx.core:core:1.13.1'
+            force 'androidx.core:core-ktx:1.13.1'
+        }
+    }
+}
+

package/example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package/example/android/gradle.properties

@@ -42,3 +42,4 @@ hermesEnabled=true
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
 edgeToEdgeEnabled=false
+

package/example/android/settings.gradle

@@ -1,6 +1,25 @@
 pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+
+def findNodeBinDir() {
+    def nvmDir = System.getenv("NVM_DIR") ?: (System.getProperty("user.home") + "/.nvm")
+    def nvmVersionsDir = new File(nvmDir, "versions/node")
+    if (nvmVersionsDir.exists()) {
+        def versions = nvmVersionsDir.listFiles()?.findAll { it.isDirectory() }?.sort { it.name }?.reverse()
+        for (v in versions) {
+            def candidate = new File(v, "bin/node")
+            if (candidate.exists() && candidate.canExecute()) {
+                return new File(v, "bin").absolutePath
+            }
+        }
+    }
+    return null
+}
+
+def nodeBinDir = findNodeBinDir()
+def npxPath = nodeBinDir ? nodeBinDir + "/npx" : "npx"
+
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand([npxPath, "@react-native-community/cli", "config"]) }
 rootProject.name = 'example'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')

package/example/package-lock.json

@@ -47,7 +47,7 @@
       }
     },
     "..": {
-      "version": "1.1.11",
+      "version": "1.1.13",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",