react-native-debug-toolkit 0.3.1 → 0.4.1

package/README.md

@@ -10,6 +10,24 @@ npm install react-native-debug-toolkit
 yarn add react-native-debug-toolkit
 ```
 
+### iOS Additional Setup
+
+This toolkit uses FLEX and DoraemonKit for iOS debugging features. To properly integrate:
+
+1. Make sure CocoaPods is installed in your project
+2. Add these dependencies to your Podfile:
+
+```ruby
+pod 'FLEX', :configurations => ['Debug']
+pod 'DoraemonKit/Core', :configurations => ['Debug']
+```
+
+3. Run pod install in your iOS directory:
+
+```bash
+cd ios && pod install
+```
+
 ## Basic Usage
 
 ```javascript

package/android/build.gradle

@@ -0,0 +1,30 @@
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion rootProject.ext.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 30
+    buildToolsVersion rootProject.ext.hasProperty('buildToolsVersion') ? rootProject.ext.buildToolsVersion : "30.0.3"
+
+    defaultConfig {
+        minSdkVersion rootProject.ext.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 21
+        targetSdkVersion rootProject.ext.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 30
+        versionCode 1
+        versionName "1.0"
+    }
+    
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+}
+
+repositories {
+    mavenCentral()
+    maven { url "https://jitpack.io" }
+    google()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-native:+"
+    implementation 'io.github.didi.dokit:dokitx:3.7.1'
+    implementation 'com.android.volley:volley:1.2.0'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.reactnative.debuglibs">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+
+</manifest> 

package/android/src/main/java/com/debugtoolkit/BuildTypeModule.java

@@ -4,7 +4,6 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.Callback;
 
 import java.util.HashMap;
 import java.util.Map;
@@ -25,36 +24,13 @@ public class BuildTypeModule extends ReactContextBaseJavaModule {
     @Override
     public Map<String, Object> getConstants() {
         final Map<String, Object> constants = new HashMap<>();
-        constants.put("isDebug", BuildConfig.DEBUG);
+        constants.put("buildType", BuildConfig.DEBUG ? "debug" : "release");
         return constants;
     }
 
-    @ReactMethod
-    public void isDebugMode(Promise promise) {
-        try {
-            promise.resolve(BuildConfig.DEBUG);
-        } catch (Exception e) {
-            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
-        }
-    }
-
-    @ReactMethod
-    public void isReleaseMode(Promise promise) {
-        try {
-            promise.resolve(!BuildConfig.DEBUG);
-        } catch (Exception e) {
-            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
-        }
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public Boolean isDebugModeSync() {
-        return BuildConfig.DEBUG;
-    }
-
     @ReactMethod(isBlockingSynchronousMethod = true)
-    public Boolean isReleaseModeSync() {
-        return !BuildConfig.DEBUG;
+    public String getBuildTypeSync() {
+        return BuildConfig.DEBUG ? "debug" : "release";
     }
 
     @ReactMethod

package/android/src/main/java/com/reactnative/debuglibs/RNDebugLibsModule.java

@@ -0,0 +1,68 @@
+package com.reactnative.debuglibs;
+
+import android.app.Application;
+import android.widget.Toast;
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import io.github.didi.dokit.DoKit;
+import io.github.didi.dokit.kit.AbstractKit;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class RNDebugLibsModule extends ReactContextBaseJavaModule {
+    private final ReactApplicationContext reactContext;
+
+    public RNDebugLibsModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "RNDebugLibs";
+    }
+
+    @ReactMethod
+    public void showExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void hideExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void toggleExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void installDoraemonKit(String productId) {
+        Application app = (Application) reactContext.getApplicationContext();
+        List<AbstractKit> kits = new ArrayList<>();
+        // Initialize DoKit with custom kits if needed
+        DoKit.Builder(app)
+                .productId(productId)
+                .customKits(kits)
+                .build();
+    }
+
+    @ReactMethod
+    public void showDoraemonKit() {
+        Toast.makeText(reactContext, "showDoraemonKit被调用", Toast.LENGTH_SHORT).show();
+        DoKit.showToolPanel();
+    }
+
+    @ReactMethod
+    public void hideDoraemonKit() {
+        Toast.makeText(reactContext, "hideDoraemonKit被调用", Toast.LENGTH_SHORT).show();
+        DoKit.hideToolPanel();
+    }
+} 

package/android/src/main/java/com/reactnative/debuglibs/RNDebugLibsPackage.java

@@ -0,0 +1,28 @@
+package com.reactnative.debuglibs;
+
+import androidx.annotation.NonNull;
+
+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 RNDebugLibsPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new RNDebugLibsModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+} 

package/ios/BuildTypeModule.h

@@ -1,4 +1,9 @@
 #import <React/RCTBridgeModule.h>
 
+/**
+ * BuildTypeModule
+ * Native module that provides information about the current build type (debug or release)
+ * Used to conditionally enable debugging tools only in debug builds
+ */
 @interface BuildTypeModule : NSObject <RCTBridgeModule>
 @end 

package/ios/BuildTypeModule.m

@@ -12,49 +12,20 @@ RCT_EXPORT_MODULE();
 - (NSDictionary *)constantsToExport
 {
 #ifdef DEBUG
-  BOOL isDebug = YES;
+  NSString *buildType = @"debug";
 #else
-  BOOL isDebug = NO;
+  NSString *buildType = @"release";
 #endif
   
-  return @{ @"isDebug": @(isDebug) };
+  return @{ @"buildType": buildType };
 }
 
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isDebugModeSync)
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getBuildTypeSync)
 {
 #ifdef DEBUG
-  return @(YES);
+  return @"debug";
 #else
-  return @(NO);
-#endif
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isReleaseModeSync)
-{
-#ifdef DEBUG
-  return @(NO);
-#else
-  return @(YES);
-#endif
-}
-
-RCT_EXPORT_METHOD(isDebugMode:(RCTPromiseResolveBlock)resolve
-                  rejecter:(RCTPromiseRejectBlock)reject)
-{
-#ifdef DEBUG
-  resolve(@(YES));
-#else
-  resolve(@(NO));
-#endif
-}
-
-RCT_EXPORT_METHOD(isReleaseMode:(RCTPromiseResolveBlock)resolve
-                  rejecter:(RCTPromiseRejectBlock)reject)
-{
-#ifdef DEBUG
-  resolve(@(NO));
-#else
-  resolve(@(YES));
+  return @"release";
 #endif
 }
 

package/ios/RNDebugLibs.h

@@ -0,0 +1,10 @@
+#import <React/RCTBridgeModule.h>
+
+/**
+ * RNDebugLibs
+ * Native module that provides access to FLEX and DoraemonKit debugging tools
+ * Note: These debugging tools are only available in DEBUG builds
+ */
+@interface RNDebugLibs : NSObject <RCTBridgeModule>
+
+@end

package/ios/RNDebugLibs.m

@@ -0,0 +1,79 @@
+#import "RNDebugLibs.h"
+
+#ifdef DEBUG
+#import "FLEXManager.h"
+#import <DoraemonKit/DoraemonManager.h>
+#endif
+
+@implementation RNDebugLibs
+
+// Export the module
+RCT_EXPORT_MODULE();
+
+RCT_EXPORT_METHOD(showExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] showExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] showExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(hideExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] hideExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] hideExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(toggleExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] toggleExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] toggleExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(installDoraemonKit:(NSString *)productId)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] installWithPid:productId];
+    });
+#else
+    NSLog(@"[RNDebugLibs] installDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(showDoraemonKit)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] showDoraemon];
+    });
+#else
+    NSLog(@"[RNDebugLibs] showDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(hideDoraemonKit)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] hiddenDoraemon];
+    });
+#else
+    NSLog(@"[RNDebugLibs] hideDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+@end 

package/lib/NativeDebugLibs.js

@@ -0,0 +1,55 @@
+import { NativeModules, Platform } from 'react-native'
+
+// 添加调试日志，查看是否正确获取了RNDebugLibs模块
+const { RNDebugLibs } = NativeModules
+console.log('Available Native Modules:', Object.keys(NativeModules))
+console.log('RNDebugLibs module loaded:', !!RNDebugLibs)
+
+export default class NativeDebugLibs {
+  // FLEX methods (iOS only)
+  static showExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.showExplorer()
+    }
+  }
+
+  static hideExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.hideExplorer()
+    }
+  }
+
+  static toggleExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.toggleExplorer()
+    }
+  }
+
+  // DoraemonKit/DoKit methods
+  static installDoraemonKit(productId) {
+    console.log('Calling installDoraemonKit with:', productId)
+    if (RNDebugLibs) {
+      RNDebugLibs.installDoraemonKit(productId)
+    } else {
+      console.warn('RNDebugLibs module not available')
+    }
+  }
+
+  static showDoraemonKit() {
+    console.log('Calling showDoraemonKit')
+    if (RNDebugLibs) {
+      RNDebugLibs.showDoraemonKit()
+    } else {
+      console.warn('RNDebugLibs module not available')
+    }
+  }
+
+  static hideDoraemonKit() {
+    console.log('Calling hideDoraemonKit')
+    if (RNDebugLibs) {
+      RNDebugLibs.hideDoraemonKit()
+    } else {
+      console.warn('RNDebugLibs module not available')
+    }
+  }
+} 

package/lib/features/ThirdPartyLibsFeature.js

@@ -0,0 +1,65 @@
+import { Platform } from 'react-native';
+import NativeDebugLibs from '../NativeDebugLibs';
+
+// Define available third-party debug libraries
+const availableLibs = [
+  {
+    id: 'flex',
+    name: 'FLEX',
+    description: 'In-app debugging and exploration tool for iOS',
+    platform: 'ios',
+    icon: 'tools',
+    actions: [
+      { id: 'showExplorer', label: 'Show Explorer', method: NativeDebugLibs.showExplorer },
+      { id: 'hideExplorer', label: 'Hide Explorer', method: NativeDebugLibs.hideExplorer },
+    ]
+  },
+  {
+    id: 'doraemonkit',
+    name: 'DoraemonKit',
+    description: 'A full-featured iOS & Android development assistant',
+    platform: 'both',
+    icon: 'box',
+    actions: [
+      { id: 'showDoraemonKit', label: 'Show DoraemonKit', method: NativeDebugLibs.showDoraemonKit },
+      { id: 'hideDoraemonKit', label: 'Hide DoraemonKit', method: NativeDebugLibs.hideDoraemonKit },
+    ]
+  }
+];
+
+// Get libraries available for current platform
+const getPlatformLibs = () => {
+  const currentPlatform = Platform.OS;
+  return availableLibs.filter(lib => 
+    lib.platform === 'both' || lib.platform === currentPlatform
+  );
+};
+
+// Setup function is minimal since we're just presenting UI options
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // No additional setup needed beyond initialization
+};
+
+// Get data - return available libraries for this platform
+const getData = () => {
+  return getPlatformLibs();
+};
+
+// Cleanup function (if needed)
+const cleanup = () => {
+  // Nothing specific to clean up
+};
+
+// Export the feature factory function
+export const createThirdPartyLibsFeature = () => {
+  return {
+    name: 'thirdPartyLibs',
+    label: 'Debug Libraries',
+    setup,
+    getData,
+    cleanup
+  };
+}; 

package/lib/index.js

@@ -4,6 +4,8 @@ import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
 import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
+import { createThirdPartyLibsFeature } from './features/ThirdPartyLibsFeature'
+import NativeDebugLibs from './NativeDebugLibs'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
@@ -12,24 +14,31 @@ const featureRegistry = {
   performance: createPerformanceFeature,
   zustand: createZustandLogFeature,
   navigation: createNavigationLogFeature,
+  thirdPartyLibs: createThirdPartyLibsFeature,
   // Add other built-in features here
   // 'storage': createStorageFeature,
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console', 'zustand', 'navigation']
+const defaultFeatures = ['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']
 
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
  * Only runs in development mode (__DEV__ === true).
  * Features can be specified as strings (e.g., 'network') or creator functions.
  * @param {Array<string|Function>} features - Array of feature names (strings) or creator functions. Defaults to standard features.
+ * @param {Object} options - Additional options like doraemonProductId for third-party debug libraries
  */
-export function initializeDebugToolkit(features = defaultFeatures) {
+export function initializeDebugToolkit(features = defaultFeatures, options = {}) {
 
   try {
     const debugToolKit = new DebugToolKit();
 
+    // Initialize third-party debug libraries if configured
+    if (options.doraemonProductId) {
+      NativeDebugLibs.installDoraemonKit(options.doraemonProductId);
+    }
+
     features.forEach(featureIdentifier => {
       let feature = null;
       let featureCreator = null;
@@ -84,6 +93,7 @@ export {
   createConsoleLogFeature, 
   createZustandLogFeature,
   createNavigationLogFeature,
+  createThirdPartyLibsFeature,
   addNavigationLog,
   zustandLogMiddleware,  // Export middleware for use in Zustand stores
   featureRegistry 

package/lib/views/FloatPanelView.js

@@ -20,6 +20,7 @@ import SubViewPerformance from './SubViewPerformance'
 import SubViewConsoleLogs from './SubViewConsoleLogs'
 import SubViewZustandLogs from './SubViewZustandLogs'
 import SubViewNavigationLogs from './SubViewNavigationLogs'
+import SubViewThirdPartyLibs from './SubViewThirdPartyLibs'
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
 export default class FloatPanelView extends Component {
@@ -319,6 +320,10 @@ export default class FloatPanelView extends Component {
     if (feature.name === 'navigation') {
       return <SubViewNavigationLogs logs={data} />
     }
+    
+    if (feature.name === 'thirdPartyLibs') {
+      return <SubViewThirdPartyLibs libraries={data} />
+    }
 
     // Generic fallback for other feature types
     return (

package/lib/views/SubViewThirdPartyLibs.js

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+  Platform,
+} from 'react-native';
+
+const SubViewThirdPartyLibs = ({ libraries = [] }) => {
+  const [expandedLibs, setExpandedLibs] = useState(new Set());
+  const [actionParams, setActionParams] = useState({});
+
+  // Set all libraries to expanded by default and set default product ID
+  useEffect(() => {
+    // Create a set of all library IDs to set them as expanded
+    const allLibIds = new Set(libraries.map(lib => lib.id));
+    setExpandedLibs(allLibIds);
+    
+    // Initialize default product ID for all actions that might need it
+    const defaultParams = {};
+    libraries.forEach(lib => {
+      lib.actions.forEach(action => {
+        if (action.hasParam) {
+          defaultParams[`${lib.id}_${action.id}`] = 'default';
+        }
+      });
+    });
+    setActionParams(defaultParams);
+  }, [libraries]);
+
+  // Handle lib expansion/collapse
+  const toggleLibExpand = (libId) => {
+    setExpandedLibs(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(libId)) {
+        newSet.delete(libId);
+      } else {
+        newSet.add(libId);
+      }
+      return newSet;
+    });
+  };
+
+  // Execute library action
+  const executeAction = (action, libId) => {
+    try {
+      if (action.hasParam) {
+        // Get parameter value (if needed)
+        const paramValue = actionParams[`${libId}_${action.id}`] || 'default';
+        action.method(paramValue);
+      } else {
+        action.method();
+      }
+      // No alerts shown as per requirement
+    } catch (error) {
+      // Silent error handling as per requirement
+      console.error(`Failed to execute ${action.label}:`, error);
+    }
+  };
+
+  // Handle param input change
+  const handleParamChange = (libId, actionId, value) => {
+    setActionParams({
+      ...actionParams,
+      [`${libId}_${actionId}`]: value,
+    });
+  };
+
+  // Render a single library card
+  const renderLibraryItem = ({ item }) => {
+    const isExpanded = expandedLibs.has(item.id);
+    const isPlatformSupported = item.platform === 'both' || 
+                                item.platform === Platform.OS;
+    
+    if (!isPlatformSupported) return null;
+
+    return (
+      <View style={styles.libraryCard}>
+        <TouchableOpacity
+          style={styles.libraryHeader}
+          onPress={() => toggleLibExpand(item.id)}>
+          <View style={styles.libraryTitle}>
+            <Text style={styles.libraryName}>{item.name}</Text>
+            <Text style={styles.platformBadge}>
+              {item.platform === 'both' ? 'iOS & Android' : item.platform}
+            </Text>
+          </View>
+          <Text style={styles.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+        </TouchableOpacity>
+
+        <Text style={styles.libraryDescription}>{item.description}</Text>
+
+        {isExpanded && (
+          <View style={styles.actionsContainer}>
+            {item.actions.map((action) => (
+              <View key={action.id} style={styles.actionItem}>
+                {action.hasParam && (
+                  <TextInput
+                    style={styles.paramInput}
+                    placeholder={action.paramPlaceholder || 'Parameter'}
+                    value={actionParams[`${item.id}_${action.id}`] || 'default'}
+                    onChangeText={(text) => 
+                      handleParamChange(item.id, action.id, text)
+                    }
+                  />
+                )}
+                <TouchableOpacity
+                  style={styles.actionButton}
+                  onPress={() => executeAction(action, item.id)}>
+                  <Text style={styles.actionButtonText}>{action.label}</Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  // Filter platform-supported libraries
+  const supportedLibraries = libraries.filter(
+    lib => lib.platform === 'both' || lib.platform === Platform.OS
+  );
+
+  return (
+    <View style={styles.container}>
+      {supportedLibraries.length === 0 ? (
+        <Text style={styles.emptyText}>
+          No debug libraries available for this platform
+        </Text>
+      ) : (
+        <FlatList
+          data={supportedLibraries}
+          renderItem={renderLibraryItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={styles.listContent}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  listContent: {
+    padding: 12,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+    fontSize: 16,
+  },
+  libraryCard: {
+    backgroundColor: '#f8f9fa',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+    marginBottom: 16,
+    padding: 12,
+    elevation: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  libraryHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  libraryTitle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  libraryName: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+    marginRight: 8,
+  },
+  platformBadge: {
+    fontSize: 12,
+    color: '#666',
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  libraryDescription: {
+    marginTop: 8,
+    marginBottom: 12,
+    color: '#666',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  actionsContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    paddingTop: 12,
+  },
+  actionItem: {
+    marginBottom: 8,
+  },
+  paramInput: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 8,
+    fontSize: 14,
+  },
+  actionButton: {
+    backgroundColor: '#0D96F2',
+    padding: 10,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  actionButtonText: {
+    color: '#fff',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+});
+
+export default SubViewThirdPartyLibs; 

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
+  "podspec": "react-native-debug-toolkit.podspec",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "bundle": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output dist/main.jsbundle --assets-dest dist"

package/react-native-debug-toolkit.podspec

@@ -0,0 +1,25 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-debug-toolkit"
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['repository']['url']
+  s.license      = package['license']
+  s.author       = package['author']
+  s.platform     = :ios, "11.0"
+  s.source       = { :git => package['repository']['url'], :tag => "#{s.version}" }
+  s.source_files = "ios/**/*.{h,m}"
+  
+  s.dependency "React-Core"
+  
+  # FLEX is only needed for debug builds
+  s.dependency "FLEX", "~> 5.0"
+  
+  # DoraemonKit is only needed for debug builds
+  s.dependency "DoraemonKit/Core", "~> 3.0"
+  
+  # This ensures FLEX and DoraemonKit are only included in debug builds
+  s.pod_target_xcconfig = { 'OTHER_CFLAGS' => '-DDebug=$(CONFIGURATION)' }
+end

package/react-native.config.js

@@ -2,4 +2,17 @@
 
 module.exports = {
   // Let React Native's auto-linking handle all dependencies normally
+  dependencies: {
+    "react-native-debug-toolkit": {
+      platforms: {
+        ios: {
+          podspecPath: "./react-native-debug-toolkit.podspec",
+          sourceDir: "./ios"
+        },
+        android: {
+          sourceDir: "./android"
+        }
+      }
+    }
+  }
 };