react-native-in-app-debugger 1.0.61 → 1.0.63

package/Api/Row.jsx

@@ -1,15 +1,15 @@
-import React, { useState } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import Text from '../Text';
-import Highlight from '../Highlight';
+import React, { useState } from "react";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+import Text from "../Text";
+import Highlight from "../Highlight";
 
 export const MAX_URL_LENGTH = 100;
 
-export default ({ item, filter }) => {
+export default ({ item, filter, wrap, setWrap }) => {
   const tabs = [
-    { value: 'Response Body' },
-    { value: 'Request Body', hide: !item.request.data },
-    { value: 'Request Header' },
+    { value: "Response Body" },
+    { value: "Request Body", hide: !item.request.data },
+    { value: "Request Header" },
   ];
   const [tab, setTab] = useState(tabs[0].value);
   const hasResponse = item.response;
@@ -20,12 +20,15 @@ export default ({ item, filter }) => {
       <TouchableOpacity
         activeOpacity={isSelected ? 1 : 0.7}
         onPress={() => setTab(value)}
-        style={[styles.selectionTab, { backgroundColor: isSelected ? 'white' : undefined }]}
+        style={[
+          styles.selectionTab,
+          { backgroundColor: isSelected ? "white" : undefined },
+        ]}
       >
         <Text
           style={{
-            color: isSelected ? '#000' : '#ffffff88',
-            textAlign: 'center',
+            color: isSelected ? "#000" : "#ffffff88",
+            textAlign: "center",
           }}
         >
           {value}
@@ -34,36 +37,63 @@ export default ({ item, filter }) => {
     );
   };
 
+  const Comp = wrap ? View : ScrollView;
+
   return (
     <View style={styles.container}>
       {item.request.url.length > MAX_URL_LENGTH && (
-        <Text style={{ color: '#ffffff99', paddingVertical: 20 }}>
+        <Text style={{ color: "#ffffff99", paddingVertical: 20 }}>
           <Highlight text={item.request.url} filter={filter} />
         </Text>
       )}
-      <View>
-        <View style={{ flexDirection: 'row' }}>
-          {tabs.map((t) => (
-            <Tab key={t.value} {...t} />
-          ))}
-        </View>
-
+      <View style={{ flexDirection: "row" }}>
+        {tabs.map((t) => (
+          <Tab key={t.value} {...t} />
+        ))}
+      </View>
+      <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+        <TouchableOpacity
+          onPress={() => setWrap((v) => !v)}
+          style={{
+            borderWidth: 2,
+            backgroundColor: wrap ? "white" : undefined,
+            borderColor: "white",
+            padding: 5,
+            margin: 10,
+            borderRadius: 10,
+          }}
+        >
+          <Text style={{ color: wrap ? undefined : "white", fontSize: 10 }}>
+            Wrap Text
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Comp horizontal>
         {tab === tabs[0].value && hasResponse && (
-          <Text style={{ color: 'white' }}>
-            <Highlight text={JSON.stringify(item.response.data, undefined, 4)} filter={filter} />
+          <Text style={{ color: "white" }}>
+            <Highlight
+              text={JSON.stringify(item.response.data, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
         {tab === tabs[1].value && (
-          <Text style={{ color: 'white' }}>
-            <Highlight text={JSON.stringify(item.request.data, undefined, 4)} filter={filter} />
+          <Text style={{ color: "white" }}>
+            <Highlight
+              text={JSON.stringify(item.request.data, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
         {tab === tabs[2].value && (
-          <Text style={{ color: 'white' }}>
-            <Highlight text={JSON.stringify(item.request.headers, undefined, 4)} filter={filter} />
+          <Text style={{ color: "white" }}>
+            <Highlight
+              text={JSON.stringify(item.request.headers, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
-      </View>
+      </Comp>
     </View>
   );
 };
@@ -71,12 +101,12 @@ export default ({ item, filter }) => {
 const styles = StyleSheet.create({
   container: {
     padding: 5,
-    backgroundColor: '#171717',
+    backgroundColor: "#171717",
     paddingTop: 10,
     paddingBottom: 40,
   },
   selectionTab: {
-    borderBottomColor: 'white',
+    borderBottomColor: "white",
     borderBottomWidth: 2,
     flex: 1,
     borderTopEndRadius: 10,

package/Api/index.jsx

@@ -41,6 +41,7 @@ export default (props) => {
   const [filter, setFilter] = useState("");
   const [errorOnly, setErrorOnly] = useState(false);
   const [showBookmarkOnly, setShowBookmarkOnly] = useState(false);
+  const [wrap, setWrap] = useState(true);
   const [expands, setExpands] = useState({});
   const apis = props.apis.filter((a) => !errorOnly || isError(a));
 
@@ -158,7 +159,7 @@ export default (props) => {
           .map((data) => ({ data: [data], id: data.id }))}
         renderItem={(i) =>
           expands[i.item.id] ? (
-            <Row {...i} filter={filter} />
+            <Row {...i} {...{ wrap, setWrap, filter }} />
           ) : (
             <View style={{ height: 20 }} />
           )
@@ -231,7 +232,7 @@ export default (props) => {
                       Clipboard.setString(
                         JSON.stringify(content, undefined, 3)
                       );
-                      Alert.alert('Copied');
+                      Alert.alert("Copied");
                     }}
                     style={styles.actionButton}
                   >

package/index.jsx

@@ -9,6 +9,7 @@ import {
 } from "react-native";
 import Text from "./Text";
 import X from "./X";
+const testId = "react-native-in-app-debugger-close-button";
 
 let DeviceInfo;
 try {
@@ -131,6 +132,8 @@ export default ({
   } = useAnimation(badgeHeight);
 
   const CustomTabComponent = tabs.find((t) => tab === t.title)?.component;
+  const [disapear, setDisapear] = useState();
+  if (disapear) return null;
   return (
     <Animated.View
       style={{
@@ -145,6 +148,13 @@ export default ({
       }}
       {...(isOpen ? {} : panResponder.panHandlers)}
     >
+      <Text
+        accessibilityLabel={testId}
+        testId={testId}
+        accessible
+        onPress={() => setDisapear(true)}
+        style={{ height: 1 }}
+      />
       {!shouldShowDetails ? (
         <TouchableOpacity
           onPress={() => setIsOpen(true)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "This library's main usage is to be used by Non-Technical testers during UAT, SIT or any testing phase.",
   "main": "index.jsx",
   "scripts": {

package/useAnimation.ts

@@ -41,7 +41,7 @@ export default (defaultBadgeHeight) => {
   if (LocalStorage) {
     useEffect(() => {
       LocalStorage.getItem("in-app-debugger-position").then((d) => {
-        if (d) move(JSON.parse(d));
+        if (d && !isOpen) move(JSON.parse(d));
       });
     }, []);
   }