react-native-in-app-debugger 1.0.77 → 1.0.79

package/Deeplink.tsx

@@ -1,28 +1,103 @@
-import React from 'react';
-import { Linking, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import React, { useEffect } from "react";
+import {
+  Linking,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  FlatList,
+} from "react-native";
+import X from "./X";
 
-export default ({deeplinkPrefix, onClose}) => {
-  const [text, setText] = React.useState('');
+let LocalStorage;
+try {
+  LocalStorage =
+    require("@react-native-async-storage/async-storage/src").default;
+} catch (error) {
+  // console.error("Error importing LocalStorage:", error);
+}
+
+export default ({ deeplinkPrefix, onClose }) => {
+  const [text, setText] = React.useState("");
+  const [history, setHistory] = React.useState([]);
+
+  const go = (t) => {
+    const newHistory = [t, ...history.filter((h) => h !== t)];
+    // setHistory(newHistory);
+    setTimeout(() => {
+      LocalStorage?.setItem(
+        "in-app-debugger-deeplink-list",
+        JSON.stringify(newHistory)
+      );
+      Linking.openURL(deeplinkPrefix + t);
+    }, 500);
+    onClose();
+  };
+
+  const remove = (t) => {
+    const newHistory = history.filter((h) => h !== t);
+    setHistory(newHistory);
+    LocalStorage?.setItem(
+      "in-app-debugger-deeplink-list",
+      JSON.stringify(newHistory)
+    );
+  };
+
+  useEffect(() => {
+    LocalStorage?.getItem("in-app-debugger-deeplink-list").then((d) => {
+      if (d) {
+        setHistory(JSON.parse(d));
+      }
+    });
+  }, []);
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', margin: 10 }}>
-      <Text style={{ color: 'white' }}>{deeplinkPrefix}</Text>
-      <TextInput
-        value={text}
-        autoCapitalize='none'
-        autoCorrect={false}
-        autoComplete='off'
-        onChangeText={setText}
-        style={{ flex: 1, backgroundColor: '#555', marginRight: 10, padding: 3, borderRadius: 3 }}
+    <View style={{ marginBottom: 10 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", margin: 10 }}>
+        <Text style={{ color: "white" }}>{deeplinkPrefix}</Text>
+        <TextInput
+          value={text}
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="off"
+          onChangeText={setText}
+          style={{
+            flex: 1,
+            backgroundColor: "#555",
+            marginRight: 10,
+            padding: 3,
+            borderRadius: 3,
+          }}
+        />
+        <TouchableOpacity
+          style={{ padding: 7, borderRadius: 4, backgroundColor: "white" }}
+          onPress={() => go(text)}
+        >
+          <Text style={{ color: "black", fontSize: 9 }}>Go</Text>
+        </TouchableOpacity>
+      </View>
+      <FlatList
+        data={history}
+        renderItem={({ item }) => (
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 10,
+              padding: 10,
+              justifyContent: "flex-end",
+            }}
+          >
+            <TouchableOpacity onPress={() => go(item)}>
+              <Text style={{ color: "white", textAlign: "right" }}>{item}</Text>
+            </TouchableOpacity>
+            <X
+              style={{ marginRight: 5 }}
+              size={15}
+              onPress={() => remove(item)}
+            />
+          </View>
+        )}
       />
-      <TouchableOpacity
-        style={{ padding: 7, borderRadius: 4, backgroundColor: 'white' }}
-        onPress={() => {
-          onClose();
-          Linking.openURL(deeplinkPrefix + text);
-        }}
-      >
-        <Text style={{ color: 'black', fontSize: 9 }}>Go</Text>
-      </TouchableOpacity>
     </View>
   );
 };

package/Libs.jsx

@@ -9,7 +9,6 @@ import Text from "./Text";
 import Highlight from "./Highlight";
 import packageJson from "../../package.json";
 import realDeps from "./parentDependencies.js";
-import Deeplink from "./Deeplink";
 
 const libs = Object.entries(packageJson.dependencies).reduce(
   (arr, [name, version]) => [...arr, { name, version }],
@@ -21,7 +20,6 @@ export default (p) => {
 
   return (
     <>
-      {!!p.deeplinkPrefix && <Deeplink {...p} />}
       <TextInput
         value={filter}
         placeholder="Filter..."

package/index.jsx

@@ -6,7 +6,9 @@ import {
   View,
   SafeAreaView,
   useWindowDimensions,
+  FlatList,
 } from "react-native";
+import Deeplink from "./Deeplink";
 import Text from "./Text";
 import X from "./X";
 const testId = "react-native-in-app-debugger-close-button";
@@ -64,6 +66,8 @@ export default ({
   interceptResponse,
   tabs = [],
 }) => {
+
+  const deeplinkPrefix = variables?.DEEPLINK_PREFIX;
   const [blacklists, setB, blacklistRef] = useStateRef([]);
   const dimension = useWindowDimensions();
 
@@ -189,11 +193,51 @@ export default ({
             ))}
           </View>
           <View style={{ flexDirection: "row", padding: 5, gap: 6 }}>
-            <View style={{ flex: 1, flexDirection: "row" }}>
+            <FlatList
+              style={{flex: 1}}
+              data={[
+                "api",
+                !!variables && "vars",
+                !!deeplinkPrefix && "deeplink",
+                "libs",
+                ...tabs.map((t) => t.title),
+              ]
+                .filter(Boolean)}
+              keyExtractor={(item) => item}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              renderItem={({item, index})=>{
+                const isSelected = item === tab;
+                return (
+                  <TouchableOpacity
+                    onPress={() => setTab(item)}
+                    activeOpacity={isSelected ? 1 : 0.7}
+                    style={{
+                      paddingHorizontal: 8,
+                      borderBottomWidth: +isSelected,
+                      borderColor: "white",
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: "white",
+                        opacity: isSelected ? 1 : 0.5,
+                        textAlign: "center",
+                        textTransform: "uppercase",
+                      }}
+                    >
+                      {item}
+                      {!index && !!apis.length && <Text> ({apis.length})</Text>}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              }}
+            />
+            {/* <View style={{ flex: 1, flexDirection: "row" }}>
               {[
                 "api",
                 !!variables && "vars",
-                "config",
+                "libs",
                 ...tabs.map((t) => t.title),
               ]
                 .filter(Boolean)
@@ -224,16 +268,12 @@ export default ({
                     </TouchableOpacity>
                   );
                 })}
-            </View>
+            </View> */}
             <X style={{ marginRight: 5 }} onPress={() => setIsOpen(false)} />
           </View>
-          {tab === "vars" && !!variables && <Variables variables={variables} />}
-          {tab === "config" && (
-            <Libs
-              deeplinkPrefix={variables.DEEPLINK_PREFIX}
-              onClose={() => setIsOpen(false)}
-            />
-          )}
+          {tab === "vars" && <Variables variables={variables} />}
+          {tab === "deeplink" && <Deeplink deeplinkPrefix={deeplinkPrefix} onClose={() => setIsOpen(false)} />}
+          {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.77",
+  "version": "1.0.79",
   "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": {