react-native-in-app-debugger 1.0.55 → 1.0.57

package/Api/index.jsx

@@ -1,34 +1,58 @@
-import React, { useState } from 'react';
-import { SectionList, TextInput, View, Alert, StyleSheet, TouchableOpacity } from 'react-native';
-import Text from '../Text';
-import Highlight from '../Highlight';
-import Bookmark from '../Bookmark';
-import X from '../X';
-import getRandomBrightColor from '../utils/getRandomBrightColor';
-import { MAX_URL_LENGTH } from './Row';
+import React, { useEffect, useState } from "react";
+import {
+  SectionList,
+  TextInput,
+  View,
+  Alert,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import Text from "../Text";
+import Highlight from "../Highlight";
+import Bookmark from "../Bookmark";
+import X from "../X";
+import getRandomBrightColor from "../utils/getRandomBrightColor";
+import { MAX_URL_LENGTH } from "./Row";
 let Clipboard;
 try {
-  Clipboard = require('@react-native-clipboard/clipboard')?.default;
+  Clipboard = require("@react-native-clipboard/clipboard")?.default;
 } catch (error) {
   // console.error("Error importing Clipboard:", error);
 }
 
-import Row from './Row';
+let LocalStorage;
+try {
+  LocalStorage =
+    require("@react-native-async-storage/async-storage/src").default;
+} catch (error) {
+  // console.error("Error importing LocalStorage:", error);
+}
+
+import Row from "./Row";
 
 const BlacklistIcon = () => (
-  <View style={{ borderRadius: 100, backgroundColor: 'black' }}>
+  <View style={{ borderRadius: 100, backgroundColor: "black" }}>
     <X size={12} />
   </View>
 );
 
 const isError = (a) => a.response?.status < 200 || a.response?.status >= 400;
 export default (props) => {
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter] = useState("");
   const [errorOnly, setErrorOnly] = useState(false);
   const [showBookmarkOnly, setShowBookmarkOnly] = useState(false);
   const [expands, setExpands] = useState({});
   const apis = props.apis.filter((a) => !errorOnly || isError(a));
 
+  if (LocalStorage) {
+    useEffect(() => {
+      LocalStorage.getItem("in-app-debugger-api-filter").then(setFilter);
+    }, []);
+    useEffect(() => {
+      LocalStorage.setItem("in-app-debugger-api-filter", filter);
+    }, [filter]);
+  }
+
   const hasError = apis.some(isError);
 
   return (
@@ -38,26 +62,29 @@ export default (props) => {
           <TouchableOpacity
             style={styles.actionButton}
             onPress={() =>
-              Alert.alert('Are you sure', 'You want to clear all logs', [
-                { text: 'Delete', onPress: props.clear, style: 'cancel' },
-                { text: 'Cancel' },
+              Alert.alert("Are you sure", "You want to clear all logs", [
+                { text: "Delete", onPress: props.clear, style: "cancel" },
+                { text: "Cancel" },
               ])
             }
           >
-            <Text style={{ color: 'black', fontSize: 10 }}>Clear logs</Text>
+            <Text style={{ color: "black", fontSize: 10 }}>Clear logs</Text>
           </TouchableOpacity>
         )}
         {hasError && !filter && (
-          <TouchableOpacity style={{ padding: 5 }} onPress={() => setErrorOnly((v) => !v)}>
+          <TouchableOpacity
+            style={{ padding: 5 }}
+            onPress={() => setErrorOnly((v) => !v)}
+          >
             <Text
               style={{
-                color: 'red',
-                textDecorationLine: errorOnly ? 'line-through' : undefined,
+                color: "red",
+                textDecorationLine: errorOnly ? "line-through" : undefined,
                 fontSize: 10,
               }}
             >
               {apis.filter(isError).length} error
-              {apis.filter(isError).length > 1 ? 's' : ''}
+              {apis.filter(isError).length > 1 ? "s" : ""}
             </Text>
           </TouchableOpacity>
         )}
@@ -65,57 +92,91 @@ export default (props) => {
           <TouchableOpacity
             style={styles.actionButton}
             onPress={() =>
-              Alert.alert('Are you sure', 'You want to clear all blacklists', [
-                { text: 'Clear', onPress: () => props.setBlacklists(), style: 'cancel' },
-                { text: 'Cancel' },
+              Alert.alert("Are you sure", "You want to clear all blacklists", [
+                {
+                  text: "Clear",
+                  onPress: () => props.setBlacklists(),
+                  style: "cancel",
+                },
+                { text: "Cancel" },
               ])
             }
           >
-            <Text style={{ color: 'black', fontSize: 10 }}>Clear {props.blacklists.length}</Text>
+            <Text style={{ color: "black", fontSize: 10 }}>
+              Clear {props.blacklists.length}
+            </Text>
             <BlacklistIcon />
           </TouchableOpacity>
         )}
         {!!Object.keys(props.bookmarks).length && (
           <>
-            <TouchableOpacity style={styles.actionButton} onPress={() => setShowBookmarkOnly((v) => !v)}>
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={() => setShowBookmarkOnly((v) => !v)}
+            >
               <Bookmark size={7} />
-              <Text style={{ color: 'black', fontSize: 10 }}>{showBookmarkOnly ? '& others' : 'Only'}</Text>
+              <Text style={{ color: "black", fontSize: 10 }}>
+                {showBookmarkOnly ? "& others" : "Only"}
+              </Text>
             </TouchableOpacity>
-            <TouchableOpacity style={styles.actionButton} onPress={() => props.setBookmarks({})}>
-              <Text style={{ color: 'black', fontSize: 10 }}>Clear {Object.keys(props.bookmarks).length}</Text>
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={() => props.setBookmarks({})}
+            >
+              <Text style={{ color: "black", fontSize: 10 }}>
+                Clear {Object.keys(props.bookmarks).length}
+              </Text>
               <Bookmark size={7} />
             </TouchableOpacity>
           </>
         )}
         <TextInput
           value={filter}
-          placeholder='Filter...'
-          clearButtonMode='always'
-          placeholderTextColor='grey'
+          placeholder="Filter..."
+          clearButtonMode="always"
+          placeholderTextColor="grey"
           style={styles.textInput}
           onChangeText={(t) => setFilter(t.toLowerCase())}
         />
       </View>
-      {!filter && !!props.maxNumOfApiToStore && apis.length >= props.maxNumOfApiToStore && (
-        <Text style={{ color: '#ffffff88', padding: 10 }}>Capped to only latest {props.maxNumOfApiToStore} APIs</Text>
-      )}
+      {!filter &&
+        !!props.maxNumOfApiToStore &&
+        apis.length >= props.maxNumOfApiToStore && (
+          <Text style={{ color: "#ffffff88", padding: 10 }}>
+            Capped to only latest {props.maxNumOfApiToStore} APIs
+          </Text>
+        )}
       <SectionList
         keyExtractor={(i) => i.id}
         stickySectionHeadersEnabled
         showsVerticalScrollIndicator
         sections={apis
-          .filter((a) => !filter || JSON.stringify(a).toLowerCase().includes(filter))
+          .filter(
+            (a) => !filter || JSON.stringify(a).toLowerCase().includes(filter)
+          )
           .filter((a) => !showBookmarkOnly || props.bookmarks[a.id])
           .map((data) => ({ data: [data], id: data.id }))}
-        renderItem={(i) => (expands[i.item.id] ? <Row {...i} filter={filter} /> : <View style={{ height: 20 }} />)}
+        renderItem={(i) =>
+          expands[i.item.id] ? (
+            <Row {...i} filter={filter} />
+          ) : (
+            <View style={{ height: 20 }} />
+          )
+        }
         renderSectionHeader={({ section: { data } }) => {
           const item = data[0];
           const hasResponse = !!item.response;
 
-          const duration = item.response?.timestamp ? ~~(item.response?.timestamp - item.request.timestamp) / 1000 : 0;
+          const duration = item.response?.timestamp
+            ? ~~(item.response?.timestamp - item.request.timestamp) / 1000
+            : 0;
           const isExpand = expands[item.id];
           const bookmarkColor = props.bookmarks[item.id];
-          const color = hasResponse ? (item.response.error ? 'red' : 'white') : 'yellow';
+          const color = hasResponse
+            ? item.response.error
+              ? "red"
+              : "white"
+            : "yellow";
 
           return (
             <View style={styles.rowHeader}>
@@ -123,7 +184,8 @@ export default (props) => {
                 color={bookmarkColor}
                 onPress={() => {
                   props.setBookmarks((v) => {
-                    if (!bookmarkColor) return { ...v, [item.id]: getRandomBrightColor() };
+                    if (!bookmarkColor)
+                      return { ...v, [item.id]: getRandomBrightColor() };
                     const newV = { ...v };
                     delete newV[item.id];
                     return newV;
@@ -133,14 +195,17 @@ export default (props) => {
               <Text selectable style={{ flex: 1, color, marginVertical: 10 }}>
                 <Text style={{ opacity: 0.7 }}>
                   {item.request.method +
-                    ` (${item.response?.status ?? 'no response'})` +
-                    ' - ' +
+                    ` (${item.response?.status ?? "no response"})` +
+                    " - " +
                     item.request.time +
-                    (hasResponse ? ' - ' + duration + ' second(s)' : '') +
-                    '\n'}
+                    (hasResponse ? " - " + duration + " second(s)" : "") +
+                    "\n"}
                 </Text>
-                <Highlight text={item.request.url.slice(0, MAX_URL_LENGTH)} filter={filter} />
-                {item.request.url.length > MAX_URL_LENGTH && '.......'}
+                <Highlight
+                  text={item.request.url.slice(0, MAX_URL_LENGTH)}
+                  filter={filter}
+                />
+                {item.request.url.length > MAX_URL_LENGTH && "......."}
               </Text>
               <View style={{ gap: 4 }}>
                 <TouchableOpacity
@@ -154,33 +219,41 @@ export default (props) => {
                   }
                   style={styles.actionButton}
                 >
-                  <Text style={{ color: 'black', fontSize: 10 }}>{isExpand ? 'Hide' : 'Show'}</Text>
+                  <Text style={{ color: "black", fontSize: 10 }}>
+                    {isExpand ? "Hide" : "Show"}
+                  </Text>
                 </TouchableOpacity>
                 {!!Clipboard && (
                   <TouchableOpacity
                     onPress={() => {
                       const content = { ...item };
                       delete content.id;
-                      Clipboard.setString(JSON.stringify(content, undefined, 4));
+                      Clipboard.setString(
+                        JSON.stringify(content, undefined, 4)
+                      );
                     }}
                     style={styles.actionButton}
                   >
-                    <Text style={{ color: 'black', fontSize: 10 }}>Copy</Text>
+                    <Text style={{ color: "black", fontSize: 10 }}>Copy</Text>
                   </TouchableOpacity>
                 )}
                 <TouchableOpacity
                   onPress={() => {
                     Alert.alert(
-                      'Are you sure',
+                      "Are you sure",
                       `You want to blacklist: \n\n(${item.request.method}) ${item.request.url} \n\nwhere all history logs for this API will be removed and all future request for this API will not be recorded?`,
                       [
                         {
-                          text: 'Blacklist',
-                          onPress: () => props.setBlacklists({ method: item.request.method, url: item.request.url }),
-                          style: 'cancel',
+                          text: "Blacklist",
+                          onPress: () =>
+                            props.setBlacklists({
+                              method: item.request.method,
+                              url: item.request.url,
+                            }),
+                          style: "cancel",
                         },
-                        { text: 'Cancel' },
-                      ],
+                        { text: "Cancel" },
+                      ]
                     );
                   }}
                   style={styles.actionButton}
@@ -198,28 +271,28 @@ export default (props) => {
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
     paddingLeft: 5,
-    alignItems: 'center',
+    alignItems: "center",
     gap: 5,
   },
   actionButton: {
-    backgroundColor: 'white',
+    backgroundColor: "white",
     borderRadius: 5,
     padding: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
     gap: 3,
   },
   rowHeader: {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: 5,
-    backgroundColor: 'black',
+    backgroundColor: "black",
     padding: 5,
     paddingTop: 10,
-    shadowColor: 'black',
+    shadowColor: "black",
     shadowOffset: {
       width: 0,
       height: 2,
@@ -230,5 +303,5 @@ const styles = StyleSheet.create({
     elevation: 10,
     zIndex: 99,
   },
-  textInput: { paddingHorizontal: 5, color: 'white', flex: 1, minWidth: 100 },
+  textInput: { padding: 5, color: "white", flex: 1, minWidth: 100 },
 });

package/Libs.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { FlatList, TextInput, TouchableHighlight } from "react-native";
+import Text from "./Text";
+import Highlight from "./Highlight";
+import packageJson from '../../package.json';
+
+const libs = Object.entries(packageJson.dependencies).reduce((arr,[name, version])=>[...arr,{name,version}],[]);
+
+export default () => {
+  const [filter, setFilter] = useState("");
+
+  return (
+    <>
+      <TextInput
+        value={filter}
+        placeholder="Filter..."
+        placeholderTextColor="grey"
+        style={{ paddingHorizontal: 5, color: "white" }}
+        onChangeText={(t) => setFilter(t.toLowerCase())}
+        clearButtonMode="always"
+      />
+      <FlatList
+        contentContainerStyle={{ padding: 5, paddingBottom: 20 }}
+        data={libs.filter(
+          (l) =>
+            !filter ||
+            l.name.toLowerCase().includes(filter) ||
+            l.version.includes(filter)
+        )}
+        showsVerticalScrollIndicator
+        keyExtractor={(i) => i.name}
+        renderItem={({ item }) => (
+          <TouchableHighlight underlayColor="#ffffff44" onPress={() => null}>
+          <Text selectable style={{ color: "white", marginVertical: 10 }}>
+            <Highlight text={item.name} filter={filter} />
+            {" : "}
+            <Highlight text={item.version} filter={filter} />
+          </Text>
+          </TouchableHighlight>
+        )}
+      />
+    </>
+  );
+};

package/X.jsx

@@ -1,22 +1,35 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 const height = 3;
-export default ({ size = 20, color = 'white', ...rest }) => {
+export default ({ size = 20, color = "white", style = {}, ...rest }) => {
   const panelStyle = { top: size / 2, width: size, backgroundColor: color };
   const Component = rest.onPress ? TouchableOpacity : View;
   return (
     <Component
       {...rest}
       style={{
+        ...style,
         width: size,
         height: size,
-        transform: [{ scale: 1.7 }],
+        transform: [{ scale: 2 }],
       }}
     >
       <View style={{ width: size, height: size, transform: [{ scale: 0.5 }] }}>
-        <View style={[styles.panel, panelStyle, { transform: [...styles.panel.transform, { rotate: '45deg' }] }]} />
-        <View style={[styles.panel, panelStyle, { transform: [...styles.panel.transform, { rotate: '-45deg' }] }]} />
+        <View
+          style={[
+            styles.panel,
+            panelStyle,
+            { transform: [...styles.panel.transform, { rotate: "45deg" }] },
+          ]}
+        />
+        <View
+          style={[
+            styles.panel,
+            panelStyle,
+            { transform: [...styles.panel.transform, { rotate: "-45deg" }] },
+          ]}
+        />
       </View>
     </Component>
   );
@@ -26,6 +39,6 @@ const styles = StyleSheet.create({
   panel: {
     height,
     transform: [{ translateY: -height / 2 }],
-    position: 'absolute',
+    position: "absolute",
   },
 });

package/index.jsx

@@ -30,6 +30,7 @@ import Variables from "./Variables";
 import Api from "./Api";
 import useApiInterceptor from "./useApiInterceptor";
 import useStateRef from "./useStateRef";
+import Libs from "react-native-in-app-debugger/Libs";
 
 const fontSize = 7;
 
@@ -176,42 +177,47 @@ export default ({
           </View>
           <View style={{ flexDirection: "row", padding: 5, gap: 6 }}>
             <View style={{ flex: 1, flexDirection: "row" }}>
-              {!!variables &&
-                ["api", "variables", ...tabs.map((t) => t.title)].map(
-                  (t, i) => {
-                    const isSelected = t === tab;
-                    return (
-                      <TouchableOpacity
-                        onPress={() => setTab(t)}
-                        activeOpacity={isSelected ? 1 : 0.7}
-                        key={t}
+              {[
+                "api",
+                !!variables && "variables",
+                "libs",
+                ...tabs.map((t) => t.title),
+              ]
+                .filter(Boolean)
+                .map((t, i) => {
+                  const isSelected = t === tab;
+                  return (
+                    <TouchableOpacity
+                      onPress={() => setTab(t)}
+                      activeOpacity={isSelected ? 1 : 0.7}
+                      key={t}
+                      style={{
+                        flex: 1,
+                        borderBottomWidth: +isSelected,
+                        borderColor: "white",
+                      }}
+                    >
+                      <Text
                         style={{
-                          flex: 1,
-                          borderBottomWidth: +isSelected,
-                          borderColor: "white",
+                          color: "white",
+                          opacity: isSelected ? 1 : 0.5,
+                          textAlign: "center",
+                          textTransform: "uppercase",
                         }}
                       >
-                        <Text
-                          style={{
-                            color: "white",
-                            opacity: isSelected ? 1 : 0.5,
-                            textAlign: "center",
-                            textTransform: "uppercase",
-                          }}
-                        >
-                          {t}
-                          {!i && !!apis.length && <Text> ({apis.length})</Text>}
-                        </Text>
-                      </TouchableOpacity>
-                    );
-                  }
-                )}
+                        {t}
+                        {!i && !!apis.length && <Text> ({apis.length})</Text>}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
             </View>
-            <X onPress={() => setIsOpen(false)} />
+            <X style={{ marginRight: 5 }} onPress={() => setIsOpen(false)} />
           </View>
           {tab === "variables" && !!variables && (
             <Variables variables={variables} />
           )}
+          {tab === "libs" && <Libs />}
           {tab === "api" && (
             <Api
               {...{ apis, setBlacklists, blacklists, maxNumOfApiToStore }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "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": {