react-native-debug-toolkit 0.1.3 → 0.1.5

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/views/HttpLogDetails.js

@@ -38,10 +38,17 @@ const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
 
 const LongTextContent = ({ text }) => {
   return (
-    <View style={styles.longTextContainer}>
-      <Text style={styles.jsonString} selectable={true}>
-        {text}
-      </Text>
+    <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>
   )
 }
@@ -279,8 +286,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}>
@@ -295,6 +301,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 || ''} />
@@ -316,15 +323,27 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
-              <View style={styles.dataContent}>
-                <JSONValue value={requestData} maxExpandLevel={1} />
+              <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'>
-            <View style={styles.dataContent}>
-              <JSONValue value={request.headers || {}} maxExpandLevel={0} />
+            <View style={styles.dataContentWrapper}>
+              <ScrollView 
+                style={styles.dataContent} 
+                nestedScrollEnabled={true}
+                bounces={false}
+                showsVerticalScrollIndicator={true}>
+                <JSONValue value={request.headers || {}} maxExpandLevel={0} />
+              </ScrollView>
             </View>
           </CollapsibleSection>
         </View>
@@ -334,20 +353,12 @@ const HttpLogDetails = ({ log }) => {
         title={`Response ${responseSize}`}
         initiallyExpanded={true}>
         <View style={styles.content}>
-          <View style={styles.row}>
-            <Text style={styles.label}>Status:</Text>
-            <Text style={styles.value}>
-              {status || (success === false ? 'Error' : 'Unknown')}
-              {status && response.statusText ? ` (${response.statusText})` : ''}
+          {/* <View style={styles.row}>
+            <Text style={styles.label}>Status: {status || (success === false ? 'Error' : 'Unknown')}
+            {status && response.statusText ? ` (${response.statusText})` : ''}
+            {duration && ` Duration: (${duration}ms)`}
             </Text>
-          </View>
-
-          {duration && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Duration:</Text>
-              <Text style={styles.value}>{duration}ms</Text>
-            </View>
-          )}
+          </View> */}
 
           {error && (
             <View style={styles.errorSection}>
@@ -370,15 +381,27 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
-              <View style={styles.dataContent}>
-                <JSONValue value={responseData} maxExpandLevel={1} />
+              <View style={styles.dataContentWrapper}>
+                <ScrollView 
+                  style={styles.dataContent}
+                  nestedScrollEnabled={true}
+                  bounces={false}
+                  showsVerticalScrollIndicator={true}>
+                  <JSONValue value={responseData} maxExpandLevel={1} />
+                </ScrollView>
               </View>
             </View>
           )}
 
           <CollapsibleSection title='Headers'>
-            <View style={styles.dataContent}>
-              <JSONValue value={response.headers || {}} maxExpandLevel={0} />
+            <View style={styles.dataContentWrapper}>
+              <ScrollView 
+                style={styles.dataContent}
+                nestedScrollEnabled={true}
+                bounces={false}
+                showsVerticalScrollIndicator={true}>
+                <JSONValue value={response.headers || {}} maxExpandLevel={0} />
+              </ScrollView>
             </View>
           </CollapsibleSection>
         </View>
@@ -391,10 +414,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>
@@ -555,7 +584,11 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#666',
   },
+  dataContentWrapper: {
+    flex: 1,
+  },
   dataContent: {
+    flex: 1,
     backgroundColor: '#f8f9fa',
     padding: 10,
     borderRadius: 4,
@@ -577,6 +610,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   codeBlock: {
+    flex: 1,
     backgroundColor: '#f8f9fa',
     padding: 10,
     borderRadius: 4,
@@ -657,9 +691,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.3",
+  "version": "0.1.5",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",