react-native-debug-toolkit 0.1.3 → 0.1.4

package/lib/views/HttpLogDetails.js

@@ -38,11 +38,15 @@ const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
 
 const LongTextContent = ({ text }) => {
   return (
-    <View style={styles.longTextContainer}>
+    <ScrollView 
+      style={styles.longTextContainer} 
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={true}
+      nestedScrollEnabled={true}>
       <Text style={styles.jsonString} selectable={true}>
         {text}
       </Text>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -316,16 +320,16 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
-              <View style={styles.dataContent}>
+              <ScrollView style={styles.dataContent} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
                 <JSONValue value={requestData} maxExpandLevel={1} />
-              </View>
+              </ScrollView>
             </View>
           )}
 
           <CollapsibleSection title='Headers'>
-            <View style={styles.dataContent}>
+            <ScrollView style={styles.dataContent} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
               <JSONValue value={request.headers || {}} maxExpandLevel={0} />
-            </View>
+            </ScrollView>
           </CollapsibleSection>
         </View>
       </CollapsibleSection>
@@ -335,20 +339,12 @@ const HttpLogDetails = ({ log }) => {
         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})` : ''}
+            <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>
-          )}
-
           {error && (
             <View style={styles.errorSection}>
               <Text style={styles.errorLabel}>Error:</Text>
@@ -370,16 +366,24 @@ const HttpLogDetails = ({ log }) => {
                   }
                 />
               </View>
-              <View style={styles.dataContent}>
+              <ScrollView 
+                style={styles.dataContent}
+                contentContainerStyle={{ flexGrow: 1 }}
+                nestedScrollEnabled={true}
+                showsVerticalScrollIndicator={true}>
                 <JSONValue value={responseData} maxExpandLevel={1} />
-              </View>
+              </ScrollView>
             </View>
           )}
 
           <CollapsibleSection title='Headers'>
-            <View style={styles.dataContent}>
+            <ScrollView 
+              style={styles.dataContent}
+              contentContainerStyle={{ flexGrow: 1 }}
+              nestedScrollEnabled={true}
+              showsVerticalScrollIndicator={true}>
               <JSONValue value={response.headers || {}} maxExpandLevel={0} />
-            </View>
+            </ScrollView>
           </CollapsibleSection>
         </View>
       </CollapsibleSection>
@@ -556,6 +560,7 @@ const styles = StyleSheet.create({
     color: '#666',
   },
   dataContent: {
+    flex: 1,
     backgroundColor: '#f8f9fa',
     padding: 10,
     borderRadius: 4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",