react-native-in-app-debugger 1.0.78 → 1.0.80

package/Deeplink.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect } from "react";
-import { Linking, Text, TextInput, TouchableOpacity, View } from "react-native";
+import {
+  Linking,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  FlatList,
+} from "react-native";
+import X from "./X";
 
 let LocalStorage;
 try {
@@ -14,14 +22,25 @@ export default ({ deeplinkPrefix, onClose }) => {
   const [history, setHistory] = React.useState([]);
 
   const go = (t) => {
-    const newHistory = [t, ...history.filter((h) => h !== t)].slice(0, 3);
+    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)
     );
-    onClose();
-    Linking.openURL(deeplinkPrefix + t);
   };
 
   useEffect(() => {
@@ -56,11 +75,29 @@ export default ({ deeplinkPrefix, onClose }) => {
           <Text style={{ color: "black", fontSize: 9 }}>Go</Text>
         </TouchableOpacity>
       </View>
-      {history.map((h) => (
-        <TouchableOpacity style={{ margin: 6 }} onPress={() => go(h)}>
-          <Text style={{ color: "grey", textAlign: "right" }}>{h}</Text>
-        </TouchableOpacity>
-      ))}
+      <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>
+        )}
+      />
     </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.78",
+  "version": "1.0.80",
   "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

@@ -100,20 +100,22 @@ export default (defaultBadgeHeight) => {
   }, [defaultBadgeHeight]);
 
   useEffect(() => {
-    setTimeout(() => setShouldShowDetails(isOpen), isOpen ? 200 : 0);
-    Animated.spring(position, {
-      toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current,
-      ...und,
-    }).start();
-    // Animated.spring(borderRadius, { toValue: isOpen ? 0 : defaultBorderRadius, ...und }).start();
-    Animated.spring(badgeHeight, {
-      toValue: isOpen ? height : defaultBadgeHeight,
-      ...und,
-    }).start();
-    Animated.spring(badgeWidth, {
-      toValue: isOpen ? width : defaultBadgeWidth,
-      ...und,
-    }).start();
+    setTimeout(() => setShouldShowDetails(isOpen), isOpen ? 500 : 0);
+    Animated.parallel([
+      Animated.spring(position, {
+        toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current,
+        ...und,
+      }),
+      // Animated.spring(borderRadius, { toValue: isOpen ? 0 : defaultBorderRadius, ...und }),
+      Animated.spring(badgeHeight, {
+        toValue: isOpen ? height : defaultBadgeHeight,
+        ...und,
+      }),
+      Animated.spring(badgeWidth, {
+        toValue: isOpen ? width : defaultBadgeWidth,
+        ...und,
+      }),
+    ]).start();
   }, [isOpen]);
 
   return {