Add optional transport for native-logger

- new module allows you to turn on native support to capture all network requests the app makes rather than just ones made within react native

Author: alexbrazier

README.md

@@ -194,6 +194,25 @@ If you are running another network logging interceptor, e.g. Reactotron, the log
 startNetworkLogging({ forceEnable: true });
 ```
 
+#### Native Transport Plugin (iOS + Android)
+
+By default, requests are captured via JavaScript XHR interception (`transport: "js"`).
+To use native transport, install and register the plugin package:
+
+```bash
+yarn add react-native-network-logger-native
+```
+
+```ts
+import { startNetworkLogging } from 'react-native-network-logger';
+import { registerNativeNetworkLoggerTransport } from 'react-native-network-logger-native';
+
+registerNativeNetworkLoggerTransport();
+startNetworkLogging({ transport: 'native' });
+```
+
+The base package does not include native code, so native pods/gradle setup are only added when you install this plugin package.
+
 #### Integrate with existing navigation
 
 Use your existing back button (e.g. in your navigation header) to navigate within the network logger.
@@ -227,6 +246,23 @@ yarn example start
 
 You should then be able to open the expo server at http://localhost:3000/ and launch the app on iOS or Android.
 
+### Native Example (Expo prebuild)
+
+For the native transport example, use the separate workspace:
+
+```sh
+yarn example-native native:ios
+```
+
+For Android:
+
+```sh
+yarn example-native native:android
+```
+
+`native:ios` runs Expo prebuild for iOS, installs pods, and launches the native iOS app.  
+`native:android` runs Expo prebuild for Android and launches the native Android app.
+
 For more setup and development details, see [Contributing](#Contributing).
 
 ## Why

package.json

@@ -99,7 +99,8 @@
     }
   },
   "workspaces": [
-    "example"
+    "example",
+    "react-native-network-logger-native"
   ],
   "packageManager": "yarn@3.6.1",
   "release-it": {

react-native-network-logger-native/README.md

@@ -0,0 +1,15 @@
+# react-native-network-logger-native
+
+Native transport plugin for `react-native-network-logger`.
+
+## Usage
+
+```ts
+import { startNetworkLogging } from 'react-native-network-logger';
+import { registerNativeNetworkLoggerTransport } from 'react-native-network-logger-native';
+
+registerNativeNetworkLoggerTransport();
+startNetworkLogging({ transport: 'native' });
+```
+
+The plugin registers a `native` transport that captures native networking (iOS `NSURLSession`, Android `OkHttp` used by React Native networking).

react-native-network-logger-native/android/build.gradle

@@ -0,0 +1,49 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath("com.android.tools.build:gradle:8.6.0")
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:2.0.21")
+  }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
+
+android {
+  namespace "com.rnnetworkloggernative"
+  compileSdkVersion 35
+
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion 35
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = '17'
+  }
+
+  sourceSets {
+    main {
+      manifest.srcFile 'src/main/AndroidManifest.xml'
+    }
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib"
+  implementation "com.squareup.okhttp3:okhttp:4.12.0"
+}

react-native-network-logger-native/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  package="com.rnnetworkloggernative">
+</manifest>

react-native-network-logger-native/android/src/main/java/com/rnnetworkloggernative/RNNetworkLoggerNativeModule.kt

@@ -0,0 +1,216 @@
+package com.rnnetworkloggernative
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.network.CustomClientBuilder
+import com.facebook.react.modules.network.NetworkingModule
+import java.io.IOException
+import java.util.UUID
+import okhttp3.Interceptor
+import okhttp3.MediaType
+import okhttp3.OkHttpClient
+import okhttp3.RequestBody
+import okhttp3.Response
+import okio.Buffer
+
+class RNNetworkLoggerNativeModule(
+    private val reactContext: ReactApplicationContext,
+) : ReactContextBaseJavaModule(reactContext) {
+
+  companion object {
+    private const val MODULE_NAME = "RNNetworkLoggerNativeTransport"
+    private const val MAX_BODY_BYTES = 1024L * 64L
+
+    private var isRunning = false
+    private var interceptor: RNNetworkLoggerInterceptor? = null
+
+    private fun toUtf8Body(body: RequestBody?): String {
+      if (body == null) return ""
+      return try {
+        val buffer = Buffer()
+        body.writeTo(buffer)
+        val size = buffer.size
+        if (size > MAX_BODY_BYTES) {
+          val clipped = buffer.readUtf8(MAX_BODY_BYTES)
+          "$clipped... [truncated]"
+        } else {
+          buffer.readUtf8()
+        }
+      } catch (_: Exception) {
+        ""
+      }
+    }
+
+    private fun toUtf8ResponseBody(response: Response): String {
+      val body = response.body ?: return ""
+      return try {
+        val peeked = response.peekBody(MAX_BODY_BYTES)
+        peeked.string()
+      } catch (_: Exception) {
+        ""
+      }
+    }
+
+    private fun contentType(mediaType: MediaType?): String {
+      return mediaType?.toString() ?: ""
+    }
+
+    private fun responseHeaders(response: Response): WritableMap {
+      val map = Arguments.createMap()
+      for ((name, value) in response.headers) {
+        map.putString(name, value)
+      }
+      return map
+    }
+
+    private fun requestHeaders(chainRequest: okhttp3.Request, requestId: String) {
+      val headers = chainRequest.headers
+      for (index in 0 until headers.size) {
+        val headerName = headers.name(index)
+        val headerValue = headers.value(index)
+        emit(
+            "networkLoggerRequestHeader",
+            Arguments.createMap().apply {
+              putString("id", requestId)
+              putString("header", headerName)
+              putString("value", headerValue)
+            },
+        )
+      }
+    }
+
+    private fun emit(event: String, payload: WritableMap) {
+      val emitter = currentEmitter ?: return
+      if (!emitter.reactApplicationContext.hasActiveCatalystInstance()) return
+      emitter.reactApplicationContext
+          .getJSModule(com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+          .emit(event, payload)
+    }
+
+    private var currentEmitter: RNNetworkLoggerNativeModule? = null
+  }
+
+  private class RNNetworkLoggerInterceptor : Interceptor {
+    override fun intercept(chain: Interceptor.Chain): Response {
+      val request = chain.request()
+      val requestId = UUID.randomUUID().toString()
+
+      emit(
+          "networkLoggerRequestOpen",
+          Arguments.createMap().apply {
+            putString("id", requestId)
+            putString("method", request.method)
+            putString("url", request.url.toString())
+          },
+      )
+
+      requestHeaders(request, requestId)
+
+      emit(
+          "networkLoggerRequestSend",
+          Arguments.createMap().apply {
+            putString("id", requestId)
+            putString("body", toUtf8Body(request.body))
+          },
+      )
+
+      return try {
+        val response = chain.proceed(request)
+
+        emit(
+            "networkLoggerResponseHeaders",
+            Arguments.createMap().apply {
+              putString("id", requestId)
+              putString("contentType", contentType(response.body?.contentType()))
+              putDouble("responseSize", response.body?.contentLength()?.coerceAtLeast(0)?.toDouble() ?: 0.0)
+              putMap("responseHeaders", responseHeaders(response))
+            },
+        )
+
+        emit(
+            "networkLoggerResponse",
+            Arguments.createMap().apply {
+              putString("id", requestId)
+              putInt("status", response.code)
+              putInt("timeout", 0)
+              putString("response", toUtf8ResponseBody(response))
+              putString("responseURL", response.request.url.toString())
+              putString("responseType", "text")
+            },
+        )
+
+        response
+      } catch (error: IOException) {
+        emit(
+            "networkLoggerResponse",
+            Arguments.createMap().apply {
+              putString("id", requestId)
+              putInt("status", 0)
+              putInt("timeout", 0)
+              putString("response", error.message ?: "")
+              putString("responseURL", request.url.toString())
+              putString("responseType", "text")
+            },
+        )
+        throw error
+      }
+    }
+  }
+
+  override fun getName(): String {
+    return MODULE_NAME
+  }
+
+  override fun initialize() {
+    super.initialize()
+    currentEmitter = this
+  }
+
+  override fun invalidate() {
+    if (currentEmitter === this) {
+      currentEmitter = null
+    }
+    super.invalidate()
+  }
+
+  @ReactMethod
+  fun start() {
+    if (isRunning) return
+
+    interceptor = RNNetworkLoggerInterceptor()
+    NetworkingModule.setCustomClientBuilder(
+        CustomClientBuilder { builder: OkHttpClient.Builder ->
+          interceptor?.let { builder.addNetworkInterceptor(it) }
+        },
+    )
+    isRunning = true
+  }
+
+  @ReactMethod
+  fun stop() {
+    if (!isRunning) return
+    NetworkingModule.setCustomClientBuilder(null)
+    interceptor = null
+    isRunning = false
+  }
+
+  @ReactMethod
+  fun makeNativeTestRequest(url: String) {
+    val client = OkHttpClient()
+    val request = okhttp3.Request.Builder().url(url).build()
+    client.newCall(request).enqueue(
+        object : okhttp3.Callback {
+          override fun onFailure(call: okhttp3.Call, e: IOException) {
+            // no-op; this endpoint is only for validating interception.
+          }
+
+          override fun onResponse(call: okhttp3.Call, response: Response) {
+            response.close()
+          }
+        },
+    )
+  }
+}

react-native-network-logger-native/android/src/main/java/com/rnnetworkloggernative/RNNetworkLoggerNativePackage.kt

@@ -0,0 +1,18 @@
+package com.rnnetworkloggernative
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class RNNetworkLoggerNativePackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return listOf(RNNetworkLoggerNativeModule(reactContext))
+  }
+
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext,
+  ): List<ViewManager<*, *>> {
+    return emptyList()
+  }
+}

react-native-network-logger-native/ios/RNNetworkLoggerNativeTransport.h

@@ -0,0 +1,10 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNNetworkLoggerNativeTransport : RCTEventEmitter <RCTBridgeModule>
++ (void)emitEvent:(NSString *)name body:(NSDictionary *)body;
+@end
+
+NS_ASSUME_NONNULL_END