baodz-network-logger-debug-controller 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# baodz-network-logger-debug-controller
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React Native controller for [`react-native-network-logger`](https://www.npmjs.com/package/react-native-network-logger). It starts request capture, shows a native floating `LOG` button, toggles the button with a device shake, and opens a full-screen request viewer.
+
+## Install
+
+```sh
+npm install baodz-network-logger-debug-controller react-native-network-logger react-native-safe-area-context
+cd ios && pod install
+```
+
+The package autolinks its iOS and Android native modules. It requires React Native 0.73 or later and React 18 or later.
+The native module uses React Native's classic bridge; the two IVIE projects currently have the New Architecture disabled.
+
+## Use
+
+Mount one controller under `SafeAreaProvider`, near the app root:
+
+```jsx
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { NetworkLoggerDebugController } from 'baodz-network-logger-debug-controller';
+
+function App() {
+  return (
+    <SafeAreaProvider>
+      <NetworkLoggerDebugController enabled={__DEV__} />
+      {/* The rest of the app */}
+    </SafeAreaProvider>
+  );
+}
+```
+
+The controller starts request capture when enabled. To start capture earlier from the app entry point, call `startNetworkLogger` directly; it is safe to call more than once:
+
+```js
+import { startNetworkLogger } from 'baodz-network-logger-debug-controller';
+
+startNetworkLogger({ enabled: __DEV__, maxRequests: 200 });
+```
+
+On Android, the floating button uses the system “Display over other apps” permission. Request it from a user action before mounting the controller:
+
+```js
+import { requestOverlayPermission } from 'baodz-network-logger-debug-controller';
+
+await requestOverlayPermission();
+```
+
+The library manifest declares `SYSTEM_ALERT_WINDOW`; the user still needs to grant the special permission in Android Settings. iOS does not require this permission.
+
+## API
+
+- `NetworkLoggerDebugController`: props `enabled` (default `true`), `maxRequests` (default `200`), and `maxRows` (default `200`).
+- `startNetworkLogger({ enabled, maxRequests })`: starts capture once and returns whether it started.
+- `stopNetworkLogger()`: stops capture and returns whether it stopped.
+- `hasOverlayPermission()`: checks Android overlay access; resolves `true` on iOS.
+- `requestOverlayPermission()`: opens the Android overlay permission settings; resolves `true` on iOS.
+
+## Publish
+
+From the package directory, authenticate to the intended npm registry and publish the version in `package.json`:
+
+```sh
+npm login
+npm publish
+```
+
+The package name is unscoped, so the registry must allow publishing `baodz-network-logger-debug-controller`. The podspec is intended for React Native autolinking from the installed npm package; add a repository `s.source` if you later want to distribute this as a standalone CocoaPods pod.
+
+The package metadata is marked `UNLICENSED` because no distribution license was specified. Set the intended license before publishing it to a public registry.

package/android/build.gradle

@@ -0,0 +1,41 @@
+buildscript {
+  if (project == rootProject) {
+    repositories {
+      google()
+      mavenCentral()
+    }
+
+    dependencies {
+      classpath 'com.android.tools.build:gradle:8.2.1'
+    }
+  }
+}
+
+apply plugin: 'com.android.library'
+
+def safeExtGet(name, fallback) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : fallback
+}
+
+android {
+  namespace 'com.baodz.networkloggerdebugcontroller'
+  compileSdkVersion safeExtGet('compileSdkVersion', 34)
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 21)
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation 'com.facebook.react:react-android'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+</manifest>

package/android/src/main/java/com/baodz/networkloggerdebugcontroller/BaodzNetworkLoggerDebugControllerModule.java

@@ -0,0 +1,377 @@
+package com.baodz.networkloggerdebugcontroller;
+
+import android.app.Activity;
+import android.content.Context;
+import android.content.Intent;
+import android.graphics.Color;
+import android.graphics.PixelFormat;
+import android.graphics.Rect;
+import android.graphics.drawable.GradientDrawable;
+import android.hardware.Sensor;
+import android.hardware.SensorEvent;
+import android.hardware.SensorEventListener;
+import android.hardware.SensorManager;
+import android.net.Uri;
+import android.os.Build;
+import android.os.Handler;
+import android.os.Looper;
+import android.provider.Settings;
+import android.view.Gravity;
+import android.view.MotionEvent;
+import android.view.View;
+import android.view.ViewConfiguration;
+import android.view.WindowManager;
+import android.util.DisplayMetrics;
+import android.widget.TextView;
+
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+public class BaodzNetworkLoggerDebugControllerModule extends ReactContextBaseJavaModule
+    implements SensorEventListener {
+  private static final String EVENT_BUTTON_PRESS = "NetworkLoggerButtonPress";
+  private static final int OVERLAY_PERMISSION_REQUEST_CODE = 5678;
+  private static final int BUTTON_SIZE_DP = 52;
+  private static final float SHAKE_THRESHOLD_G = 2.7f;
+  private static final long SHAKE_DEBOUNCE_MS = 900L;
+
+  private final ReactApplicationContext reactContext;
+  private final Handler mainHandler = new Handler(Looper.getMainLooper());
+  private final SensorManager sensorManager;
+  private final Sensor accelerometer;
+  private final WindowManager windowManager;
+  private TextView button;
+  private WindowManager.LayoutParams buttonLayoutParams;
+  private int buttonX;
+  private int buttonY;
+  private boolean buttonVisible;
+  private boolean shakeToggleStarted;
+  private long lastShakeAt;
+  private Promise overlayPermissionPromise;
+
+  private final ActivityEventListener activityEventListener = new BaseActivityEventListener() {
+    @Override
+    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
+      if (requestCode != OVERLAY_PERMISSION_REQUEST_CODE || overlayPermissionPromise == null) {
+        return;
+      }
+
+      overlayPermissionPromise.resolve(canDrawOverlays());
+      overlayPermissionPromise = null;
+    }
+  };
+
+  BaodzNetworkLoggerDebugControllerModule(ReactApplicationContext context) {
+    super(context);
+    reactContext = context;
+    sensorManager = (SensorManager) context.getSystemService(Context.SENSOR_SERVICE);
+    accelerometer = sensorManager == null
+        ? null
+        : sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
+    windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+    buttonX = dp(16);
+    buttonY = dp(144);
+    context.addActivityEventListener(activityEventListener);
+  }
+
+  @Override
+  public String getName() {
+    return "BaodzNetworkLoggerDebugController";
+  }
+
+  private int dp(int value) {
+    return Math.round(value * reactContext.getResources().getDisplayMetrics().density);
+  }
+
+  private boolean canDrawOverlays() {
+    return Build.VERSION.SDK_INT < Build.VERSION_CODES.M || Settings.canDrawOverlays(reactContext);
+  }
+
+  private int getOverlayWindowType() {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      return WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
+    }
+    return WindowManager.LayoutParams.TYPE_PHONE;
+  }
+
+  private WindowManager.LayoutParams createButtonLayoutParams() {
+    WindowManager.LayoutParams params = new WindowManager.LayoutParams(
+        dp(BUTTON_SIZE_DP),
+        dp(BUTTON_SIZE_DP),
+        getOverlayWindowType(),
+        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
+            | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL,
+        PixelFormat.TRANSLUCENT);
+    params.gravity = Gravity.TOP | Gravity.START;
+    params.x = buttonX;
+    params.y = buttonY;
+    return params;
+  }
+
+  private int[] getScreenSize() {
+    if (windowManager == null) {
+      return new int[] {0, 0};
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+      Rect bounds = windowManager.getCurrentWindowMetrics().getBounds();
+      return new int[] {bounds.width(), bounds.height()};
+    }
+
+    DisplayMetrics metrics = new DisplayMetrics();
+    windowManager.getDefaultDisplay().getRealMetrics(metrics);
+    return new int[] {metrics.widthPixels, metrics.heightPixels};
+  }
+
+  private int[] clampButtonPosition(int requestedX, int requestedY) {
+    int[] screenSize = getScreenSize();
+    int buttonSize = dp(BUTTON_SIZE_DP);
+    int maxX = Math.max(0, screenSize[0] - buttonSize);
+    int maxY = Math.max(0, screenSize[1] - buttonSize);
+    return new int[] {
+        Math.max(0, Math.min(requestedX, maxX)),
+        Math.max(0, Math.min(requestedY, maxY))
+    };
+  }
+
+  private TextView createButton() {
+    TextView view = new TextView(reactContext);
+    view.setText("LOG");
+    view.setTextColor(Color.WHITE);
+    view.setTextSize(10);
+    view.setGravity(Gravity.CENTER);
+    view.setElevation(dp(8));
+
+    GradientDrawable background = new GradientDrawable();
+    background.setColor(Color.rgb(17, 24, 39));
+    background.setShape(GradientDrawable.OVAL);
+    background.setCornerRadius(dp(BUTTON_SIZE_DP) / 2f);
+    background.setStroke(dp(1), Color.rgb(52, 211, 153));
+    view.setBackground(background);
+    view.setTypeface(view.getTypeface(), android.graphics.Typeface.BOLD);
+    view.setOnClickListener(clickedView -> emitButtonPress());
+    enableDragging(view);
+    return view;
+  }
+
+  private void enableDragging(TextView view) {
+    view.setOnTouchListener(new View.OnTouchListener() {
+      private float startRawX;
+      private float startRawY;
+      private int startX;
+      private int startY;
+      private boolean dragged;
+      private final int touchSlop = ViewConfiguration.get(reactContext).getScaledTouchSlop();
+
+      @Override
+      public boolean onTouch(View touchedView, MotionEvent event) {
+        switch (event.getActionMasked()) {
+          case MotionEvent.ACTION_DOWN:
+            startRawX = event.getRawX();
+            startRawY = event.getRawY();
+            startX = buttonX;
+            startY = buttonY;
+            dragged = false;
+            return true;
+          case MotionEvent.ACTION_MOVE:
+            float deltaX = event.getRawX() - startRawX;
+            float deltaY = event.getRawY() - startRawY;
+            if (Math.hypot(deltaX, deltaY) >= touchSlop) {
+              dragged = true;
+            }
+            if (dragged) {
+              updateButtonPosition(startX + Math.round(deltaX), startY + Math.round(deltaY));
+            }
+            return true;
+          case MotionEvent.ACTION_UP:
+            if (!dragged) {
+              touchedView.performClick();
+            }
+            return true;
+          case MotionEvent.ACTION_CANCEL:
+            return true;
+          default:
+            return false;
+        }
+      }
+    });
+  }
+
+  private void updateButtonPosition(int x, int y) {
+    if (windowManager == null || button == null || buttonLayoutParams == null) {
+      return;
+    }
+
+    int[] position = clampButtonPosition(x, y);
+    buttonX = position[0];
+    buttonY = position[1];
+    buttonLayoutParams.x = buttonX;
+    buttonLayoutParams.y = buttonY;
+    try {
+      windowManager.updateViewLayout(button, buttonLayoutParams);
+    } catch (IllegalArgumentException | SecurityException ignored) {
+      hideNetworkLoggerButtonOnMain();
+    }
+  }
+
+  private void showNetworkLoggerButtonOnMain() {
+    if (!canDrawOverlays() || windowManager == null || buttonVisible) {
+      return;
+    }
+
+    button = createButton();
+    buttonLayoutParams = createButtonLayoutParams();
+    try {
+      windowManager.addView(button, buttonLayoutParams);
+      buttonVisible = true;
+    } catch (IllegalArgumentException | SecurityException ignored) {
+      button = null;
+      buttonLayoutParams = null;
+      buttonVisible = false;
+    }
+  }
+
+  private void hideNetworkLoggerButtonOnMain() {
+    if (windowManager != null && button != null) {
+      try {
+        windowManager.removeView(button);
+      } catch (IllegalArgumentException | SecurityException ignored) {
+        // The system can remove an application overlay when permission changes.
+      }
+    }
+    button = null;
+    buttonLayoutParams = null;
+    buttonVisible = false;
+  }
+
+  private void toggleNetworkLoggerButton() {
+    mainHandler.post(() -> {
+      if (buttonVisible) {
+        hideNetworkLoggerButtonOnMain();
+      } else {
+        showNetworkLoggerButtonOnMain();
+      }
+    });
+  }
+
+  private void emitButtonPress() {
+    if (!reactContext.hasActiveCatalystInstance()) {
+      return;
+    }
+    reactContext
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+        .emit(EVENT_BUTTON_PRESS, null);
+  }
+
+  @ReactMethod
+  public void showNetworkLoggerButton() {
+    mainHandler.post(this::showNetworkLoggerButtonOnMain);
+  }
+
+  @ReactMethod
+  public void hideNetworkLoggerButton() {
+    mainHandler.post(this::hideNetworkLoggerButtonOnMain);
+  }
+
+  @ReactMethod
+  public void startNetworkLoggerShakeToggle(boolean initiallyVisible) {
+    mainHandler.post(() -> {
+      if (initiallyVisible) {
+        showNetworkLoggerButtonOnMain();
+      } else {
+        hideNetworkLoggerButtonOnMain();
+      }
+    });
+
+    if (sensorManager != null && accelerometer != null && !shakeToggleStarted) {
+      sensorManager.registerListener(this, accelerometer, SensorManager.SENSOR_DELAY_UI);
+      shakeToggleStarted = true;
+    }
+  }
+
+  @ReactMethod
+  public void stopNetworkLoggerShakeToggle() {
+    if (sensorManager != null && shakeToggleStarted) {
+      sensorManager.unregisterListener(this);
+    }
+    shakeToggleStarted = false;
+    mainHandler.post(this::hideNetworkLoggerButtonOnMain);
+  }
+
+  @ReactMethod
+  public void addListener(String eventName) {
+    // Required by NativeEventEmitter on Android.
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+    // Required by NativeEventEmitter on Android.
+  }
+
+  @ReactMethod
+  public void hasOverlayPermission(Promise promise) {
+    promise.resolve(canDrawOverlays());
+  }
+
+  @ReactMethod
+  public void requestOverlayPermission(Promise promise) {
+    if (canDrawOverlays()) {
+      promise.resolve(true);
+      return;
+    }
+
+    Activity activity = getCurrentActivity();
+    if (activity == null) {
+      promise.resolve(false);
+      return;
+    }
+
+    if (overlayPermissionPromise != null) {
+      overlayPermissionPromise.reject("E_OVERLAY_PERMISSION", "A permission request is already active.");
+    }
+    overlayPermissionPromise = promise;
+
+    Intent intent = new Intent(
+        Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+        Uri.parse("package:" + reactContext.getPackageName()));
+    try {
+      activity.startActivityForResult(intent, OVERLAY_PERMISSION_REQUEST_CODE);
+    } catch (RuntimeException error) {
+      overlayPermissionPromise = null;
+      promise.reject("E_OVERLAY_PERMISSION", error);
+    }
+  }
+
+  @Override
+  public void onSensorChanged(SensorEvent event) {
+    if (event.sensor.getType() != Sensor.TYPE_ACCELEROMETER) {
+      return;
+    }
+
+    float gx = event.values[0] / SensorManager.GRAVITY_EARTH;
+    float gy = event.values[1] / SensorManager.GRAVITY_EARTH;
+    float gz = event.values[2] / SensorManager.GRAVITY_EARTH;
+    double gForce = Math.sqrt(gx * gx + gy * gy + gz * gz);
+    if (gForce < SHAKE_THRESHOLD_G) {
+      return;
+    }
+
+    long now = System.currentTimeMillis();
+    if (now - lastShakeAt < SHAKE_DEBOUNCE_MS) {
+      return;
+    }
+
+    lastShakeAt = now;
+    toggleNetworkLoggerButton();
+  }
+
+  @Override
+  public void onAccuracyChanged(Sensor sensor, int accuracy) {
+    // No accuracy adjustment is needed for shake detection.
+  }
+}

package/android/src/main/java/com/baodz/networkloggerdebugcontroller/BaodzNetworkLoggerDebugControllerPackage.java

@@ -0,0 +1,24 @@
+package com.baodz.networkloggerdebugcontroller;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class BaodzNetworkLoggerDebugControllerPackage implements ReactPackage {
+  @Override
+  public List<NativeModule> createNativeModules(ReactApplicationContext context) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new BaodzNetworkLoggerDebugControllerModule(context));
+    return modules;
+  }
+
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext context) {
+    return Collections.emptyList();
+  }
+}

package/baodz-network-logger-debug-controller.podspec

@@ -0,0 +1,16 @@
+Pod::Spec.new do |s|
+  s.name         = 'BaodzNetworkLoggerDebugController'
+  s.version      = '0.1.0'
+  s.summary      = 'React Native network logger debug controller.'
+  s.description  = 'A React Native debug controller with native shake-toggle floating buttons.'
+  s.homepage     = 'https://www.npmjs.com/package/baodz-network-logger-debug-controller'
+  s.license      = { :type => 'UNLICENSED' }
+  s.author       = 'baodz'
+  # React Native autolinking consumes this podspec from the installed npm package path.
+  s.platforms    = { :ios => '12.0' }
+  s.source_files = 'ios/**/*.{h,m,mm}'
+  s.requires_arc = true
+
+  s.frameworks = 'CoreMotion', 'UIKit'
+  s.dependency 'React-Core'
+end

package/ios/BaodzNetworkLoggerDebugController.h

@@ -0,0 +1,5 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+@interface BaodzNetworkLoggerDebugController : RCTEventEmitter <RCTBridgeModule>
+@end

package/ios/BaodzNetworkLoggerDebugController.m

@@ -0,0 +1,234 @@
+#import "BaodzNetworkLoggerDebugController.h"
+
+#import <CoreMotion/CoreMotion.h>
+#import <UIKit/UIKit.h>
+#import <math.h>
+
+static NSString *const NetworkLoggerButtonPressEvent = @"NetworkLoggerButtonPress";
+static NSTimeInterval const ShakeDebounceSeconds = 0.9;
+static double const ShakeThresholdG = 2.7;
+static CGFloat const NetworkLoggerButtonSize = 52.0;
+
+@interface BaodzNetworkLoggerDebugController ()
+@property (nonatomic, strong) CMMotionManager *motionManager;
+@property (nonatomic, strong) UIWindow *networkLoggerWindow;
+@property (nonatomic, assign) BOOL networkLoggerButtonVisible;
+@property (nonatomic, assign) NSTimeInterval lastShakeAt;
+@end
+
+@implementation BaodzNetworkLoggerDebugController
+
+RCT_EXPORT_MODULE(BaodzNetworkLoggerDebugController);
+
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
+- (NSArray<NSString *> *)supportedEvents
+{
+  return @[NetworkLoggerButtonPressEvent];
+}
+
+- (instancetype)init
+{
+  self = [super init];
+  if (self) {
+    _motionManager = [CMMotionManager new];
+    _motionManager.accelerometerUpdateInterval = 0.12;
+  }
+  return self;
+}
+
+- (UIWindowScene *)activeWindowScene
+{
+  if (@available(iOS 13.0, *)) {
+    for (UIScene *scene in UIApplication.sharedApplication.connectedScenes) {
+      if (scene.activationState == UISceneActivationStateForegroundActive &&
+          [scene isKindOfClass:UIWindowScene.class]) {
+        return (UIWindowScene *)scene;
+      }
+    }
+  }
+  return nil;
+}
+
+- (UIWindow *)makeNetworkLoggerWindow
+{
+  CGRect frame = CGRectMake(16, 144, NetworkLoggerButtonSize, NetworkLoggerButtonSize);
+  UIWindow *window;
+  if (@available(iOS 13.0, *)) {
+    UIWindowScene *windowScene = [self activeWindowScene];
+    if (windowScene != nil) {
+      window = [[UIWindow alloc] initWithWindowScene:windowScene];
+      window.frame = frame;
+    } else {
+      window = [[UIWindow alloc] initWithFrame:frame];
+    }
+  } else {
+    window = [[UIWindow alloc] initWithFrame:frame];
+  }
+
+  window.windowLevel = UIWindowLevelAlert + 2;
+  window.backgroundColor = UIColor.clearColor;
+  window.hidden = YES;
+
+  UIViewController *viewController = [UIViewController new];
+  viewController.view.backgroundColor = UIColor.clearColor;
+
+  UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
+  button.frame = CGRectMake(0, 0, NetworkLoggerButtonSize, NetworkLoggerButtonSize);
+  button.backgroundColor = [UIColor colorWithRed:17.0 / 255.0 green:24.0 / 255.0 blue:39.0 / 255.0 alpha:1.0];
+  button.layer.cornerRadius = NetworkLoggerButtonSize / 2.0;
+  button.layer.borderColor = [UIColor colorWithRed:52.0 / 255.0 green:211.0 / 255.0 blue:153.0 / 255.0 alpha:1.0].CGColor;
+  button.layer.borderWidth = 1;
+  button.titleLabel.font = [UIFont boldSystemFontOfSize:10];
+  [button setTitle:@"LOG" forState:UIControlStateNormal];
+  [button setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
+  [button addTarget:self action:@selector(onNetworkLoggerButtonPress) forControlEvents:UIControlEventTouchUpInside];
+
+  UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self
+                                                                               action:@selector(handleNetworkLoggerPan:)];
+  [button addGestureRecognizer:panGesture];
+  [viewController.view addSubview:button];
+
+  window.rootViewController = viewController;
+  return window;
+}
+
+- (void)ensureNetworkLoggerWindow
+{
+  if (self.networkLoggerWindow == nil) {
+    self.networkLoggerWindow = [self makeNetworkLoggerWindow];
+  }
+}
+
+- (void)showNetworkLoggerButtonOnMain
+{
+  [self ensureNetworkLoggerWindow];
+  self.networkLoggerWindow.hidden = NO;
+  self.networkLoggerButtonVisible = YES;
+}
+
+- (void)hideNetworkLoggerButtonOnMain
+{
+  self.networkLoggerWindow.hidden = YES;
+  self.networkLoggerButtonVisible = NO;
+}
+
+- (void)toggleNetworkLoggerButton
+{
+  if (self.networkLoggerButtonVisible) {
+    [self hideNetworkLoggerButtonOnMain];
+  } else {
+    [self showNetworkLoggerButtonOnMain];
+  }
+}
+
+- (CGRect)networkLoggerMovementBounds
+{
+  if (@available(iOS 13.0, *)) {
+    UIWindowScene *windowScene = self.networkLoggerWindow.windowScene ?: [self activeWindowScene];
+    if (windowScene != nil) {
+      return windowScene.coordinateSpace.bounds;
+    }
+  }
+  return UIScreen.mainScreen.bounds;
+}
+
+- (CGRect)clampedNetworkLoggerFrame:(CGRect)frame
+{
+  CGRect bounds = [self networkLoggerMovementBounds];
+  CGFloat maxX = MAX(CGRectGetMinX(bounds), CGRectGetMaxX(bounds) - CGRectGetWidth(frame));
+  CGFloat maxY = MAX(CGRectGetMinY(bounds), CGRectGetMaxY(bounds) - CGRectGetHeight(frame));
+  frame.origin.x = MIN(MAX(CGRectGetMinX(bounds), frame.origin.x), maxX);
+  frame.origin.y = MIN(MAX(CGRectGetMinY(bounds), frame.origin.y), maxY);
+  return frame;
+}
+
+- (void)handleNetworkLoggerPan:(UIPanGestureRecognizer *)gesture
+{
+  if (self.networkLoggerWindow == nil) {
+    return;
+  }
+
+  CGPoint translation = [gesture translationInView:nil];
+  CGRect frame = CGRectOffset(self.networkLoggerWindow.frame, translation.x, translation.y);
+  self.networkLoggerWindow.frame = [self clampedNetworkLoggerFrame:frame];
+  [gesture setTranslation:CGPointZero inView:nil];
+}
+
+- (void)onNetworkLoggerButtonPress
+{
+  [self sendEventWithName:NetworkLoggerButtonPressEvent body:nil];
+}
+
+RCT_EXPORT_METHOD(showNetworkLoggerButton)
+{
+  [self showNetworkLoggerButtonOnMain];
+}
+
+RCT_EXPORT_METHOD(hideNetworkLoggerButton)
+{
+  [self hideNetworkLoggerButtonOnMain];
+}
+
+RCT_EXPORT_METHOD(startNetworkLoggerShakeToggle:(BOOL)initiallyVisible)
+{
+  if (initiallyVisible) {
+    [self showNetworkLoggerButtonOnMain];
+  } else {
+    [self hideNetworkLoggerButtonOnMain];
+  }
+
+  if (!self.motionManager.accelerometerAvailable || self.motionManager.accelerometerActive) {
+    return;
+  }
+
+  __weak BaodzNetworkLoggerDebugController *weakSelf = self;
+  [self.motionManager startAccelerometerUpdatesToQueue:[NSOperationQueue mainQueue]
+                                           withHandler:^(CMAccelerometerData *data, NSError *error) {
+    BaodzNetworkLoggerDebugController *strongSelf = weakSelf;
+    if (strongSelf == nil || data == nil || error != nil) {
+      return;
+    }
+
+    double x = data.acceleration.x;
+    double y = data.acceleration.y;
+    double z = data.acceleration.z;
+    double gForce = sqrt(x * x + y * y + z * z);
+    if (gForce < ShakeThresholdG) {
+      return;
+    }
+
+    NSTimeInterval now = NSDate.date.timeIntervalSince1970;
+    if (now - strongSelf.lastShakeAt < ShakeDebounceSeconds) {
+      return;
+    }
+
+    strongSelf.lastShakeAt = now;
+    [strongSelf toggleNetworkLoggerButton];
+  }];
+}
+
+RCT_EXPORT_METHOD(stopNetworkLoggerShakeToggle)
+{
+  if (self.motionManager.accelerometerActive) {
+    [self.motionManager stopAccelerometerUpdates];
+  }
+  [self hideNetworkLoggerButtonOnMain];
+}
+
+RCT_EXPORT_METHOD(hasOverlayPermission:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+  resolve(@YES);
+}
+
+RCT_EXPORT_METHOD(requestOverlayPermission:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+  resolve(@YES);
+}
+
+@end

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "baodz-network-logger-debug-controller",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React Native network logger debug controller with a shake-toggle floating button.",
+  "main": "src/index.js",
+  "react-native": "src/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "android/",
+    "ios/",
+    "src/",
+    "types/",
+    "*.podspec",
+    "react-native.config.js",
+    "README.md"
+  ],
+  "scripts": {
+    "pack:check": "npm pack --dry-run"
+  },
+  "keywords": [
+    "react-native",
+    "network-logger",
+    "debug"
+  ],
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.73.0",
+    "react-native-network-logger": ">=3.0.0 <4.0.0",
+    "react-native-safe-area-context": ">=4.10.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "UNLICENSED"
+}

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        packageImportPath:
+          'import com.baodz.networkloggerdebugcontroller.BaodzNetworkLoggerDebugControllerPackage;',
+        packageInstance:
+          'new BaodzNetworkLoggerDebugControllerPackage()',
+      },
+      ios: {},
+    },
+  },
+};

package/src/index.js

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import NetworkLogger, {
+  startNetworkLogging,
+  stopNetworkLogging,
+} from 'react-native-network-logger';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  hasOverlayPermission,
+  hideNetworkLoggerButton,
+  NETWORK_LOGGER_BUTTON_PRESS_EVENT,
+  requestOverlayPermission,
+  showNetworkLoggerButton,
+  startNetworkLoggerShakeToggle,
+  stopNetworkLoggerShakeToggle,
+  subscribeNetworkLoggerButtonPress,
+} from './native-module';
+
+export const NETWORK_LOGGER_MAX_REQUESTS = 200;
+
+let networkLoggingStarted = false;
+
+export const startNetworkLogger = ({
+  enabled = true,
+  maxRequests = NETWORK_LOGGER_MAX_REQUESTS,
+} = {}) => {
+  if (!enabled || networkLoggingStarted) return false;
+
+  startNetworkLogging({ maxRequests });
+  networkLoggingStarted = true;
+  return true;
+};
+
+export const stopNetworkLogger = () => {
+  if (!networkLoggingStarted) return false;
+
+  stopNetworkLogging();
+  networkLoggingStarted = false;
+  return true;
+};
+
+export { hasOverlayPermission, requestOverlayPermission };
+export { NETWORK_LOGGER_BUTTON_PRESS_EVENT };
+
+export const NetworkLoggerDebugController = ({
+  enabled = true,
+  maxRequests = NETWORK_LOGGER_MAX_REQUESTS,
+  maxRows = NETWORK_LOGGER_MAX_REQUESTS,
+} = {}) => {
+  const insets = useSafeAreaInsets();
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+
+    startNetworkLogger({ maxRequests });
+    startNetworkLoggerShakeToggle({ initiallyVisible: true });
+    const subscription = subscribeNetworkLoggerButtonPress(() => {
+      hideNetworkLoggerButton();
+      setVisible(true);
+    });
+
+    return () => {
+      subscription?.remove?.();
+      stopNetworkLoggerShakeToggle();
+      stopNetworkLogger();
+    };
+  }, [enabled, maxRequests]);
+
+  const closeViewer = () => {
+    setVisible(false);
+    if (enabled) showNetworkLoggerButton();
+  };
+
+  if (!enabled) return null;
+
+  return (
+    <Modal
+      animationType="slide"
+      onRequestClose={closeViewer}
+      presentationStyle="fullScreen"
+      statusBarTranslucent
+      transparent={false}
+      visible={visible}
+    >
+      <View
+        style={[
+          styles.panel,
+          { paddingBottom: insets.bottom, paddingTop: insets.top },
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>Network Logs</Text>
+          <TouchableOpacity
+            accessibilityLabel="Đóng network logs"
+            accessibilityRole="button"
+            onPress={closeViewer}
+            style={styles.closeButton}
+          >
+            <Text style={styles.closeText}>Đóng</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.logger}>
+          <NetworkLogger compact maxRows={maxRows} sort="desc" theme="dark" />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  panel: {
+    backgroundColor: '#111827',
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    borderBottomColor: '#374151',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  closeButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  closeText: {
+    color: '#34D399',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  logger: {
+    flex: 1,
+  },
+});
+
+export default NetworkLoggerDebugController;

package/src/native-module.js

@@ -0,0 +1,54 @@
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+
+const MODULE_NAME = 'BaodzNetworkLoggerDebugController';
+const nativeModule = NativeModules[MODULE_NAME];
+export const NETWORK_LOGGER_BUTTON_PRESS_EVENT = 'NetworkLoggerButtonPress';
+
+const callNative = (methodName, ...args) => {
+  const method = nativeModule?.[methodName];
+  if (typeof method !== 'function') return false;
+
+  method(...args);
+  return true;
+};
+
+export const showNetworkLoggerButton = () =>
+  callNative('showNetworkLoggerButton');
+
+export const hideNetworkLoggerButton = () =>
+  callNative('hideNetworkLoggerButton');
+
+export const startNetworkLoggerShakeToggle = ({
+  initiallyVisible = false,
+} = {}) =>
+  callNative('startNetworkLoggerShakeToggle', Boolean(initiallyVisible));
+
+export const stopNetworkLoggerShakeToggle = () =>
+  callNative('stopNetworkLoggerShakeToggle');
+
+export const subscribeNetworkLoggerButtonPress = (listener) => {
+  if (!nativeModule) return null;
+
+  return new NativeEventEmitter(nativeModule).addListener(
+    NETWORK_LOGGER_BUTTON_PRESS_EVENT,
+    listener,
+  );
+};
+
+export const hasOverlayPermission = async () => {
+  if (Platform.OS !== 'android') return true;
+
+  const method = nativeModule?.hasOverlayPermission;
+  if (typeof method !== 'function') return false;
+
+  return method();
+};
+
+export const requestOverlayPermission = async () => {
+  if (Platform.OS !== 'android') return true;
+
+  const method = nativeModule?.requestOverlayPermission;
+  if (typeof method !== 'function') return false;
+
+  return method();
+};

package/types/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType } from 'react';
+
+export interface NetworkLoggerDebugControllerProps {
+  /** Enable request capture, the floating button, and the viewer. */
+  enabled?: boolean;
+  /** Maximum number of requests retained by react-native-network-logger. */
+  maxRequests?: number;
+  /** Maximum number of request rows rendered in the viewer. */
+  maxRows?: number;
+}
+
+export declare const NETWORK_LOGGER_MAX_REQUESTS: number;
+export declare const NETWORK_LOGGER_BUTTON_PRESS_EVENT: string;
+export declare const NetworkLoggerDebugController: ComponentType<NetworkLoggerDebugControllerProps>;
+export declare const startNetworkLogger: (options?: {
+  enabled?: boolean;
+  maxRequests?: number;
+}) => boolean;
+export declare const stopNetworkLogger: () => boolean;
+export declare const hasOverlayPermission: () => Promise<boolean>;
+export declare const requestOverlayPermission: () => Promise<boolean>;
+
+export default NetworkLoggerDebugController;