react-native-debug-toolkit 0.1.4 → 0.1.6

package/.cursor/rules/react-native.mdc

@@ -0,0 +1,41 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+
+  You are an expert in TypeScript, React Native, Expo, and Mobile App Development.
+  
+  Code Style and Structure:
+  - Write concise, type-safe TypeScript code.
+  - Use functional components and hooks over class components.
+  - Ensure components are modular, reusable, and maintainable.
+  - Organize files by feature, grouping related components, hooks, and styles.
+  
+  Naming Conventions:
+  - Use camelCase for variable and function names (e.g., `isFetchingData`, `handleUserInput`).
+  - Use PascalCase for component names (e.g., `UserProfile`, `ChatScreen`).
+  
+  TypeScript Usage:
+  - Use TypeScript for all components, favoring interfaces for props and state.
+  - Enable strict typing in `tsconfig.json`.
+  - Avoid using `any`; strive for precise types.
+  - Utilize `React.FC` for defining functional components with props.
+  
+  Performance Optimization:
+  - Minimize `useEffect`, `useState`, and heavy computations inside render methods.
+  - Use `React.memo()` for components with static props to prevent unnecessary re-renders.
+  - Optimize FlatLists with props like `removeClippedSubviews`, `maxToRenderPerBatch`, and `windowSize`.
+  - Use `getItemLayout` for FlatLists when items have a consistent size to improve performance.
+  - Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders.
+  
+  UI and Styling:
+  - Use consistent styling, either through `StyleSheet.create()` or Styled Components.
+  - Ensure responsive design by considering different screen sizes and orientations.
+  - Optimize image handling using libraries designed for React Native
+  
+  Best Practices:
+  - Follow React Native's threading model to ensure smooth UI performance.
+  - Utilize CodePush Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
+  - Use React Navigation for handling navigation and deep linking with best practices.
+      

package/lib/features/NetworkFeature.js

@@ -12,6 +12,7 @@ class NetworkFeature {
     this.logs = []
     this.pendingAxiosRequests = new Map()
     this.originalFetch = null
+    this.blacklist = [] // URL patterns to exclude from logging
 
     NetworkFeature.instance = this
   }
@@ -39,6 +40,39 @@ class NetworkFeature {
     this.pendingAxiosRequests.clear()
   }
 
+  // Check if a URL matches any pattern in the blacklist
+  isUrlBlacklisted(url) {
+    if (!url) return false
+    
+    return this.blacklist.some(pattern => {
+      if (pattern instanceof RegExp) {
+        return pattern.test(url)
+      }
+      return url.includes(pattern)
+    })
+  }
+
+  // Add a URL pattern to blacklist
+  addUrlToBlacklist(pattern) {
+    if (!this.blacklist.some(p => 
+        (p instanceof RegExp && pattern instanceof RegExp) ? 
+        p.toString() === pattern.toString() : p === pattern)) {
+      this.blacklist.push(pattern)
+    }
+  }
+
+  // Remove a URL pattern from blacklist
+  removeUrlFromBlacklist(pattern) {
+    this.blacklist = this.blacklist.filter(p => 
+      (p instanceof RegExp && pattern instanceof RegExp) ? 
+      p.toString() !== pattern.toString() : p !== pattern)
+  }
+
+  // Clear all patterns from blacklist
+  clearBlacklist() {
+    this.blacklist = []
+  }
+
   setupAxiosInterceptors(axiosInstance) {
     if (!__DEV__) {
       return
@@ -94,6 +128,14 @@ class NetworkFeature {
       return
     }
 
+    const url = `${response.config.baseURL || ''}${response.config.url}`
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(url)) {
+      this.pendingAxiosRequests.delete(trackId)
+      return
+    }
+
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
@@ -105,7 +147,7 @@ class NetworkFeature {
       timestamp: pendingRequest.timestamp,
       duration: Math.round(duration),
       request: {
-        url: `${response.config.baseURL || ''}${response.config.url}`,
+        url: url,
         method: response.config.method?.toUpperCase() || 'GET',
         headers: response.config.headers,
         body: response.config.data || response.config.params,
@@ -148,6 +190,14 @@ class NetworkFeature {
     const startTime = pendingRequest
       ? pendingRequest.startTime
       : Date.now() - 100
+      
+    const url = `${error.config.baseURL || ''}${error.config.url}`
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(url)) {
+      this.pendingAxiosRequests.delete(trackId)
+      return
+    }
 
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
@@ -159,7 +209,7 @@ class NetworkFeature {
       timestamp: pendingRequest ? pendingRequest.timestamp : new Date(),
       duration: Math.round(duration),
       request: {
-        url: `${error.config.baseURL || ''}${error.config.url}`,
+        url: url,
         method: error.config.method?.toUpperCase() || 'GET',
         headers: error.config.headers,
         body: error.config.data || error.config.params,
@@ -206,12 +256,18 @@ class NetworkFeature {
   }
 
   _logFetchResponse(request, options, response, startTime) {
+    const requestUrl = typeof request === 'string' ? request : request.url
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(requestUrl)) {
+      return
+    }
+    
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
 
     const duration = Date.now() - startTime
-    const requestUrl = typeof request === 'string' ? request : request.url
 
     const commonData = {
       timestamp: new Date(),
@@ -276,6 +332,13 @@ class NetworkFeature {
   }
 
   _logFetchError(request, options, error, startTime) {
+    const requestUrl = typeof request === 'string' ? request : request.url
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(requestUrl)) {
+      return
+    }
+    
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
@@ -286,7 +349,7 @@ class NetworkFeature {
       timestamp: new Date(),
       duration: Math.round(duration),
       request: {
-        url: typeof request === 'string' ? request : request.url,
+        url: requestUrl,
         method: options.method || 'GET',
         headers: options.headers || {},
         body: options.body,
@@ -326,5 +389,10 @@ export const createNetworkFeature = () => {
     cleanup: () => feature.cleanup(),
     setupAxiosInterceptors: (axiosInstance) =>
       feature.setupAxiosInterceptors(axiosInstance),
+    // Expose blacklist management methods
+    addUrlToBlacklist: (pattern) => feature.addUrlToBlacklist(pattern),
+    removeUrlFromBlacklist: (pattern) => feature.removeUrlFromBlacklist(pattern),
+    clearBlacklist: () => feature.clearBlacklist(),
+    getBlacklist: () => feature.blacklist,
   }
 }

package/lib/views/HttpLogDetails.js

@@ -1,8 +1,28 @@
 import React, { useState, useCallback } from 'react'
 import { View, Text, StyleSheet, Clipboard, Dimensions } from 'react-native'
 import { ScrollView, Pressable } from 'react-native'
-
+import JSONTree from 'react-native-json-tree'
 const { width: SCREEN_WIDTH } = Dimensions.get('window')
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
 
 const CopyButton = ({ text, style }) => {
   const [copied, setCopied] = useState(false)
@@ -38,15 +58,18 @@ const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
 
 const LongTextContent = ({ text }) => {
   return (
-    <ScrollView 
-      style={styles.longTextContainer} 
-      contentContainerStyle={{ flexGrow: 1 }}
-      showsVerticalScrollIndicator={true}
-      nestedScrollEnabled={true}>
-      <Text style={styles.jsonString} selectable={true}>
-        {text}
-      </Text>
-    </ScrollView>
+    <View style={styles.longTextWrapper}>
+      <ScrollView 
+        style={styles.longTextContainer} 
+        contentContainerStyle={styles.longTextContent}
+        showsVerticalScrollIndicator={true}
+        nestedScrollEnabled={true}
+        bounces={false}>
+        <Text style={styles.jsonString} selectable={true}>
+          {text}
+        </Text>
+      </ScrollView>
+    </View>
   )
 }
 
@@ -283,8 +306,7 @@ const HttpLogDetails = ({ log }) => {
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={true}
       scrollEventThrottle={16}
-      keyboardShouldPersistTaps='handled'
-      nestedScrollEnabled={true}>
+      keyboardShouldPersistTaps='handled'>
       <View style={styles.header}>
         <View style={styles.headerInfo}>
           <Text style={styles.url} numberOfLines={2} selectable={true}>
@@ -299,6 +321,7 @@ const HttpLogDetails = ({ log }) => {
               {(request.method || 'GET').toUpperCase()}
             </Text>
             {status && <ApiStatus status={status} success={success} />}
+            {duration && <Text style={styles.duration}>(duration:{duration}ms)</Text>}
           </View>
         </View>
         <CopyButton text={request.url || ''} />
@@ -320,16 +343,28 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
-              <ScrollView style={styles.dataContent} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
-                <JSONValue value={requestData} maxExpandLevel={1} />
-              </ScrollView>
+              <View style={styles.dataContentWrapper}>
+                <ScrollView 
+                  style={styles.dataContent} 
+                  nestedScrollEnabled={true}
+                  bounces={false}
+                  showsVerticalScrollIndicator={true}>
+                  <JSONValue value={requestData} maxExpandLevel={1} />
+                </ScrollView>
+              </View>
             </View>
           )}
 
           <CollapsibleSection title='Headers'>
-            <ScrollView style={styles.dataContent} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
-              <JSONValue value={request.headers || {}} maxExpandLevel={0} />
-            </ScrollView>
+            <View style={styles.dataContentWrapper}>
+              <ScrollView 
+                style={styles.dataContent} 
+                nestedScrollEnabled={true}
+                bounces={false}
+                showsVerticalScrollIndicator={true}>
+                <JSONValue value={request.headers || {}} maxExpandLevel={0} />
+              </ScrollView>
+            </View>
           </CollapsibleSection>
         </View>
       </CollapsibleSection>
@@ -338,12 +373,12 @@ const HttpLogDetails = ({ log }) => {
         title={`Response ${responseSize}`}
         initiallyExpanded={true}>
         <View style={styles.content}>
-          <View style={styles.row}>
-            <Text style={styles.label}>Status:{status || (success === false ? 'Error' : 'Unknown')}
+          {/* <View style={styles.row}>
+            <Text style={styles.label}>Status: {status || (success === false ? 'Error' : 'Unknown')}
             {status && response.statusText ? ` (${response.statusText})` : ''}
-            {duration && `  Duration: (${duration}ms)`}
+            {duration && ` Duration: (${duration}ms)`}
             </Text>
-          </View>
+          </View> */}
 
           {error && (
             <View style={styles.errorSection}>
@@ -366,24 +401,28 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
+              <View style={styles.dataContentWrapper}>
+                <ScrollView 
+                  style={styles.dataContent}
+                  nestedScrollEnabled={true}
+                  bounces={false}
+                  showsVerticalScrollIndicator={true}>
+                  <JSONTree data={responseData} theme={theme} invertTheme={true} />
+                </ScrollView>
+              </View>
+            </View>
+          )}
+
+          <CollapsibleSection title='Headers'>
+            <View style={styles.dataContentWrapper}>
               <ScrollView 
                 style={styles.dataContent}
-                contentContainerStyle={{ flexGrow: 1 }}
                 nestedScrollEnabled={true}
+                bounces={false}
                 showsVerticalScrollIndicator={true}>
-                <JSONValue value={responseData} maxExpandLevel={1} />
+                <JSONValue value={response.headers || {}} maxExpandLevel={0} />
               </ScrollView>
             </View>
-          )}
-
-          <CollapsibleSection title='Headers'>
-            <ScrollView 
-              style={styles.dataContent}
-              contentContainerStyle={{ flexGrow: 1 }}
-              nestedScrollEnabled={true}
-              showsVerticalScrollIndicator={true}>
-              <JSONValue value={response.headers || {}} maxExpandLevel={0} />
-            </ScrollView>
           </CollapsibleSection>
         </View>
       </CollapsibleSection>
@@ -395,10 +434,16 @@ const HttpLogDetails = ({ log }) => {
               <Text style={styles.codeBlockLabel}>Debug with cURL</Text>
               <CopyButton text={generateCurl()} />
             </View>
-            <View style={styles.codeBlock}>
-              <Text style={styles.codeText} selectable={true}>
-                {generateCurl()}
-              </Text>
+            <View style={styles.dataContentWrapper}>
+              <ScrollView 
+                style={styles.codeBlock}
+                nestedScrollEnabled={true}
+                bounces={false}
+                showsVerticalScrollIndicator={true}>
+                <Text style={styles.codeText} selectable={true}>
+                  {generateCurl()}
+                </Text>
+              </ScrollView>
             </View>
           </View>
         </View>
@@ -559,6 +604,9 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#666',
   },
+  dataContentWrapper: {
+    flex: 1,
+  },
   dataContent: {
     flex: 1,
     backgroundColor: '#f8f9fa',
@@ -582,6 +630,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   codeBlock: {
+    flex: 1,
     backgroundColor: '#f8f9fa',
     padding: 10,
     borderRadius: 4,
@@ -662,9 +711,13 @@ const styles = StyleSheet.create({
     color: '#666',
   },
   longTextContainer: {
-    maxHeight: 200,
+    flex: 1,
     paddingHorizontal: 8,
     paddingVertical: 5,
+    backgroundColor: '#f8f9fa',
+  },
+  longTextContent: {
+    paddingBottom: 10,
   },
 })
 

package/lib/views/SubViewHTTPLogs.js

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   FlatList,
   TouchableOpacity,
-  Modal,
 } from 'react-native'
 import HttpLogDetails from './HttpLogDetails'
 
@@ -76,6 +75,44 @@ const SubViewHTTPLogs = ({ logs = [] }) => {
     )
   }
 
+  // If a log is selected, show the details view with a back button
+  if (selectedLog) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity 
+            style={styles.backButton} 
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+          <View style={styles.headerMethodStatus}>
+            <Text
+              style={[
+                styles.headerMethod,
+                { color: getMethodColor(selectedLog.request?.method) },
+              ]}>
+              {(selectedLog.request?.method || 'GET').toUpperCase()}
+            </Text>
+            <Text
+              style={[
+                styles.headerStatus,
+                {
+                  color:
+                    selectedLog.response?.status >= 400
+                      ? '#ff4444'
+                      : '#00C851',
+                },
+              ]}>
+              {selectedLog.response?.status || 'Error'}
+            </Text>
+          </View>
+        </View>
+        <HttpLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
   return (
     <View style={styles.container}>
       {logs.length === 0 ? (
@@ -88,56 +125,6 @@ const SubViewHTTPLogs = ({ logs = [] }) => {
           style={styles.list}
         />
       )}
-
-      <Modal
-        visible={!!selectedLog}
-        animationType='slide'
-        transparent={true}
-        onRequestClose={() => setSelectedLog(null)}>
-        {selectedLog && (
-          <TouchableOpacity
-            style={styles.modalContainer}
-            activeOpacity={1}
-            onPress={() => setSelectedLog(null)}>
-            <TouchableOpacity
-              style={styles.modalContent}
-              activeOpacity={1}
-              onPress={(e) => e.stopPropagation()}>
-              <View style={styles.modalHeader}>
-                <View style={styles.modalHeaderContent}>
-                  <View style={styles.modalMethodStatus}>
-                    <Text
-                      style={[
-                        styles.modalMethod,
-                        { color: getMethodColor(selectedLog.request?.method) },
-                      ]}>
-                      {(selectedLog.request?.method || 'GET').toUpperCase()}
-                    </Text>
-                    <Text
-                      style={[
-                        styles.modalStatus,
-                        {
-                          color:
-                            selectedLog.response?.status >= 400
-                              ? '#ff4444'
-                              : '#00C851',
-                        },
-                      ]}>
-                      {selectedLog.response?.status || 'Error'}
-                    </Text>
-                  </View>
-                </View>
-                <TouchableOpacity
-                  style={styles.closeButton}
-                  onPress={() => setSelectedLog(null)}>
-                  <Text style={styles.closeButtonText}>×</Text>
-                </TouchableOpacity>
-              </View>
-              <HttpLogDetails log={selectedLog} />
-            </TouchableOpacity>
-          </TouchableOpacity>
-        )}
-      </Modal>
     </View>
   )
 }
@@ -211,20 +198,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     marginLeft: 8,
   },
-  modalContainer: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  modalContent: {
-    width: '100%',
-    height: '90%',
-    backgroundColor: '#fff',
-    borderRadius: 10,
-    overflow: 'hidden',
-  },
-  modalHeader: {
+  detailsHeader: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 15,
@@ -232,36 +206,30 @@ const styles = StyleSheet.create({
     borderBottomColor: '#eee',
     backgroundColor: '#f8f9fa',
   },
-  modalHeaderContent: {
-    flex: 1,
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
     marginRight: 10,
   },
-  modalMethodStatus: {
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+  },
+  headerMethodStatus: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  modalMethod: {
+  headerMethod: {
     fontSize: 16,
     fontWeight: 'bold',
     marginRight: 10,
   },
-  modalStatus: {
+  headerStatus: {
     fontSize: 14,
     fontWeight: '600',
   },
-  closeButton: {
-    width: 30,
-    height: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 15,
-    backgroundColor: '#eee',
-  },
-  closeButtonText: {
-    fontSize: 20,
-    color: '#666',
-    lineHeight: 20,
-  },
 })
 
 export default SubViewHTTPLogs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
@@ -23,7 +23,8 @@
   "author": "zcj",
   "license": "MIT",
   "dependencies": {
-    "react-native-root-siblings": "^4.0.0"
+    "react-native-root-siblings": "^4.0.0",
+    "react-native-json-tree": "^1.5.0"
   },
   "peerDependencies": {
     "react": "*",