react-native-in-app-debugger 1.0.42 → 1.0.44

package/Api/Row.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Text from '../Text';
+import Highlight from '../Highlight';
+
+export const MAX_URL_LENGTH = 100;
+
+export default ({ item, filter }) => {
+  const tabs = [
+    { value: 'Response Body' },
+    { value: 'Request Body', hide: !item.request.data },
+    { value: 'Request Header' },
+  ];
+  const [tab, setTab] = useState(tabs[0].value);
+  const hasResponse = item.response;
+  const Tab = ({ value, hide }) => {
+    if (hide) return null;
+    const isSelected = value === tab;
+    return (
+      <TouchableOpacity
+        activeOpacity={isSelected ? 1 : 0.7}
+        onPress={() => setTab(value)}
+        style={[styles.selectionTab, { backgroundColor: isSelected ? 'white' : undefined }]}
+      >
+        <Text
+          style={{
+            color: isSelected ? '#000' : '#ffffff88',
+            textAlign: 'center',
+          }}
+        >
+          {value}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {item.request.url.length > MAX_URL_LENGTH && (
+        <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>
+
+        {tab === tabs[0].value && hasResponse && (
+          <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>
+        )}
+        {tab === tabs[2].value && (
+          <Text style={{ color: 'white' }}>
+            <Highlight text={JSON.stringify(item.request.headers, undefined, 4)} filter={filter} />
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 5,
+    backgroundColor: '#171717',
+    paddingTop: 10,
+    paddingBottom: 40,
+  },
+  selectionTab: {
+    borderBottomColor: 'white',
+    borderBottomWidth: 2,
+    flex: 1,
+    borderTopEndRadius: 10,
+    borderTopStartRadius: 10,
+  },
+});

package/Api/index.jsx

@@ -0,0 +1,203 @@
+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 getRandomBrightColor from '../utils/getRandomBrightColor';
+import { MAX_URL_LENGTH } from './Row';
+let Clipboard;
+try {
+  Clipboard = require('@react-native-clipboard/clipboard')?.default;
+} catch (error) {
+  // console.error("Error importing Clipboard:", error);
+}
+
+import Row from './Row';
+
+const isError = (a) => a.response?.status < 200 || a.response?.status >= 400;
+export default (props) => {
+  const [filter, setFilter] = useState('');
+  const [errorOnly, setErrorOnly] = useState(false);
+  const [expands, setExpands] = useState({});
+  const apis = props.apis.filter((a) => !errorOnly || isError(a));
+
+  const hasError = apis.some(isError);
+
+  return (
+    <>
+      <View style={styles.container}>
+        {!!apis.length && !filter && (
+          <TouchableOpacity
+            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            onPress={() =>
+              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 {props.apis.length} APIs</Text>
+          </TouchableOpacity>
+        )}
+        {hasError && !filter && (
+          <TouchableOpacity style={{ padding: 5 }} onPress={() => setErrorOnly((v) => !v)}>
+            <Text
+              style={{
+                color: 'red',
+                textDecorationLine: errorOnly ? 'line-through' : undefined,
+                fontSize: 10,
+              }}
+            >
+              {apis.filter(isError).length} error
+              {apis.filter(isError).length > 1 ? 's' : ''}
+            </Text>
+          </TouchableOpacity>
+        )}
+        {!!props.blacklists.length && !filter && (
+          <TouchableOpacity
+            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            onPress={() =>
+              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} Blacklists</Text>
+          </TouchableOpacity>
+        )}
+
+        <TextInput
+          value={filter}
+          placeholder='Filter...'
+          clearButtonMode='always'
+          placeholderTextColor='grey'
+          style={{ paddingHorizontal: 5, color: 'white', flex: 1 }}
+          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>
+      )}
+      <SectionList
+        keyExtractor={(i) => i.id}
+        stickySectionHeadersEnabled
+        showsVerticalScrollIndicator
+        sections={apis
+          .filter((a) => !filter || JSON.stringify(a).toLowerCase().includes(filter))
+          .map((data) => ({ data: [data], id: data.id }))}
+        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 isExpand = expands[item.id];
+          const bookmarkColor = props.bookmarks[item.id];
+          const color = hasResponse ? (item.response.error ? 'red' : 'white') : 'yellow';
+
+          return (
+            <View style={styles.rowHeader}>
+              <Bookmark
+                color={bookmarkColor}
+                onPress={() => {
+                  props.setBookmarks((v) => {
+                    if (!bookmarkColor) return { ...v, [item.id]: getRandomBrightColor() };
+                    const newV = { ...v };
+                    delete newV[item.id];
+                    return newV;
+                  });
+                }}
+              />
+              <Text selectable style={{ flex: 1, color, marginVertical: 10 }}>
+                <Text style={{ opacity: 0.7 }}>
+                  {item.request.method +
+                    ` (${item.response?.status ?? 'no response'})` +
+                    ' - ' +
+                    item.request.time +
+                    (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 && '.......'}
+              </Text>
+              <View style={{ gap: 4 }}>
+                <TouchableOpacity
+                  onPress={() =>
+                    setExpands((v) => {
+                      if (!isExpand) return { ...v, [item.id]: true };
+                      const newV = { ...v };
+                      delete newV[item.id];
+                      return newV;
+                    })
+                  }
+                  style={styles.actionButton}
+                >
+                  <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));
+                    }}
+                    style={styles.actionButton}
+                  >
+                    <Text style={{ color: 'black', fontSize: 10 }}>Copy</Text>
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity
+                  onPress={() => {
+                    Alert.alert(
+                      '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: 'Cancel' },
+                      ],
+                    );
+                  }}
+                  style={styles.actionButton}
+                >
+                  <Text style={{ color: 'black', fontSize: 10 }}>Blacklist</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          );
+        }}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingLeft: 5,
+    alignItems: 'center',
+    gap: 5,
+  },
+  actionButton: { backgroundColor: 'white', borderRadius: 5, padding: 4 },
+  rowHeader: {
+    flexDirection: 'row',
+    gap: 5,
+    backgroundColor: 'black',
+    padding: 5,
+    paddingTop: 10,
+    shadowColor: 'black',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1,
+    // TODO shadow not working on android
+    elevation: 10,
+    zIndex: 99,
+  },
+});

package/Bookmark.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+export default ({ size = 10, color = '#222', onPress }) => {
+  const tristyle = { borderRightWidth: size / 2, borderTopWidth: size / 2, borderTopColor: color };
+  return (
+    <View>
+      <View style={{ width: size, height: size, backgroundColor: color }} />
+      <View style={{ flexDirection: 'row' }}>
+        <View style={[styles.triangleCorner, tristyle]} />
+        <View style={[styles.triangleCorner, tristyle, { transform: [{ rotate: '90deg' }] }]} />
+      </View>
+      <Pressable
+        onPress={onPress}
+        style={[
+          {
+            width: size,
+            height: size + size / 2,
+          },
+          styles.pressable,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  triangleCorner: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderRightColor: 'transparent',
+  },
+  pressable: {
+    position: 'absolute',
+    transform: [{ scale: 1.7 }],
+  },
+});

package/README.md

@@ -93,3 +93,7 @@ If this library is installed, when user expand any selected API, there will be a
 
 <img width="535" alt="image" src="https://github.com/fattahmuhyiddeen/react-native-in-app-debugger/assets/24792201/d4f58ee3-e553-4cae-91df-ba7e26d8cd70">
 
+
+#### React Native Async Storage (https://www.npmjs.com/package/@react-native-async-storage/async-storage)
+
+If this library is installed, the blacklist will be persisted

package/X.jsx

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

package/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Animated,
   StyleSheet,
@@ -8,6 +8,8 @@ import {
   Dimensions,
 } from "react-native";
 import Text from "./Text";
+import X from './X';
+
 let DeviceInfo;
 try {
   DeviceInfo = require("react-native-device-info");
@@ -15,6 +17,13 @@ try {
   // console.error("Error importing DeviceInfo:", error);
 }
 
+let LocalStorage;
+try {
+  LocalStorage = require("@react-native-async-storage/async-storage/src").default;
+} catch (error) {
+  // console.error("Error importing LocalStorage:", error);
+}
+
 import useAnimation from "./useAnimation";
 import Variables from "./Variables";
 import Api from "./Api";
@@ -50,8 +59,34 @@ export default ({
   labels = [],
   interceptResponse
 }) => {
-  const [blacklists, setBlacklists] = useState([]);
-  const { apis, clear } = useApiInterceptor(maxNumOfApiToStore, blacklists, interceptResponse);
+  const [blacklists, setB] = useState([]);
+
+  const setBlacklists = d => {
+    if (!d) {
+      setB([]);
+      LocalStorage?.removeItem('in-app-debugger-blacklist');
+    } else {
+      setB(v => {
+        const newValue = Array.isArray(d) ? d : [...v, d];
+        LocalStorage?.setItem('in-app-debugger-blacklist', JSON.stringify(newValue));
+        return newValue;
+      });
+    }
+  }
+
+  if (LocalStorage) {
+    useEffect(() => {
+      setTimeout(() => {
+        LocalStorage.getItem('in-app-debugger-blacklist').then(d => {
+          if (d) {
+            setBlacklists(JSON.parse(d));
+          }
+        });
+      }, 4000);
+    },[]);
+  }
+
+  const { apis, ...restApiInterceptor } = useApiInterceptor(maxNumOfApiToStore, blacklists, interceptResponse);
 
   const [tab, setTab] = useState("api");
 
@@ -154,16 +189,15 @@ export default ({
                   );
                 })}
             </View>
-            <TouchableOpacity onPress={() => setIsOpen(false)}>
-              <Text style={styles.close}>X</Text>
-            </TouchableOpacity>
+            <X onPress={() => setIsOpen(false)} />
           </View>
           {tab === "variables" && !!variables && (
             <Variables variables={variables} />
           )}
           {tab === "api" && (
             <Api
-              {...{apis, clear, setBlacklists, blacklists, maxNumOfApiToStore}}
+              {...{apis, setBlacklists, blacklists, maxNumOfApiToStore}}
+              {...restApiInterceptor}
             />
           )}
         </SafeAreaView>
@@ -191,12 +225,6 @@ const styles = StyleSheet.create({
     padding: 3,
     borderRadius: 999,
   },
-  close: {
-    color: "white",
-    fontWeight: "bold",
-    fontSize: 16,
-    paddingHorizontal: 10,
-  },
   labelContainer: {
     backgroundColor: "black",
     flexDirection: "row",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "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/useApiInterceptor.js

@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
-import XHRInterceptor from "react-native/Libraries/Network/XHRInterceptor.js";
+import { useEffect, useState } from 'react';
+import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor.js';
 
 const filterNonBusinessRelatedAPI = true;
 
 const shouldExclude = (url, method) =>
-  ["HEAD"].includes(method) ||
-  url.includes("codepush") ||
-  url.includes("localhost") ||
-  url.includes("applicationinsights.azure.com");
+  ['HEAD'].includes(method) ||
+  url.includes('codepush') ||
+  url.includes('localhost') ||
+  url.includes('applicationinsights.azure.com');
 
 const parse = (data) => {
   try {
@@ -19,13 +19,14 @@ const parse = (data) => {
 
 export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
   const [apis, setApis] = useState([]);
+  const [bookmarks, setBookmarks] = useState({});
 
   const makeRequest = (data) => {
-    if (blacklists.some(b => b.url === data.url && b.method === data.method)) return;
+    if (blacklists.some((b) => b.url === data.url && b.method === data.method)) return;
     const date = new Date();
     let hour = date.getHours();
-    const minute = (date.getMinutes() + "").padStart(2, "0");
-    const second = (date.getSeconds() + "").padStart(2, "0");
+    const minute = (date.getMinutes() + '').padStart(2, '0');
+    const second = (date.getSeconds() + '').padStart(2, '0');
 
     const request = {
       ...data,
@@ -42,10 +43,8 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
   };
 
   useEffect(() => {
-    setApis((v) => (
-      v.filter(v => !blacklists.some(b => b.url === v.request.url && b.method === v.request.method))
-    ))
-  }, [blacklists])
+    setApis((v) => v.filter((v) => !blacklists.some((b) => b.url === v.request.url && b.method === v.request.method)));
+  }, [blacklists]);
 
   const receiveResponse = (data) => {
     const error = data.status < 200 || data.status >= 400;
@@ -54,12 +53,7 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
       const oldData = [...v];
       for (let i = 0; i < oldData.length; i++) {
         const old = oldData[i];
-        if (
-          old.response ||
-          old.request.url !== data.config.url ||
-          old.request.method !== data.config.method
-        )
-          continue;
+        if (old.response || old.request.url !== data.config.url || old.request.method !== data.config.method) continue;
 
         oldData[i].response = {
           ...data,
@@ -77,7 +71,7 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
     XHRInterceptor.enableInterception();
     // console.log('API interceptor status', XHRInterceptor.isInterceptorEnabled());
     XHRInterceptor.setSendCallback((...obj) => {
-      obj[1].responseType = "text";
+      obj[1].responseType = 'text';
       const data = parse(obj[0]);
 
       const { _method: method, _url: url, _headers: headers } = obj[1];
@@ -112,5 +106,5 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
     });
   }, []);
 
-  return { apis, clear: () => setApis([]) };
+  return { apis, clear: () => setApis([]), bookmarks, setBookmarks };
 };

package/utils/getRandomBrightColor.js

@@ -0,0 +1,51 @@
+export default () => {
+  let h = Math.floor(Math.random() * 360); // Hue: 0 to 360 degrees
+  let s = Math.floor(Math.random() * 51) + 50; // Saturation: 50% to 100%
+  let l = Math.floor(Math.random() * 41) + 50; // Lightness: 50% to 90%
+
+  return hslToRgb(h, s, l);
+};
+
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+
+  let c = (1 - Math.abs(2 * l - 1)) * s;
+  let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  let m = l - c / 2;
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+
+  return `rgb(${r}, ${g}, ${b})`;
+}

package/Api.jsx

@@ -1,300 +0,0 @@
-import React, { useState } from "react";
-import {
-  SectionList,
-  TextInput,
-  View,
-  Alert,
-  StyleSheet,
-  TouchableOpacity,
-} from "react-native";
-import Text from "./Text";
-import Highlight from "./Highlight";
-let Clipboard;
-try {
-  Clipboard = require("@react-native-clipboard/clipboard")?.default;
-} catch (error) {
-  // console.error("Error importing Clipboard:", error);
-}
-
-const MAX_URL_LENGTH = 100;
-
-const Row = ({ item, filter }) => {
-  const tabs = [
-    { value: "Response Body" },
-    { value: "Request Body", hide: !item.request.data },
-    { value: "Request Header" },
-  ];
-  const [tab, setTab] = useState(tabs[0].value);
-  const hasResponse = item.response;
-  const Tab = ({ value, hide }) => {
-    if (hide) return null;
-    const isSelected = value === tab;
-    return (
-      <TouchableOpacity
-        activeOpacity={isSelected ? 1 : 0.7}
-        onPress={() => setTab(value)}
-        style={[
-          styles.selectionTab,
-          { backgroundColor: isSelected ? "white" : undefined },
-        ]}
-      >
-        <Text
-          style={{
-            color: isSelected ? "#000" : "#ffffff88",
-            textAlign: "center",
-          }}
-        >
-          {value}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <View style={styles.details}>
-      {item.request.url.length > MAX_URL_LENGTH && (
-        <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>
-
-        {tab === tabs[0].value && hasResponse && (
-          <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>
-        )}
-        {tab === tabs[2].value && (
-          <Text style={{ color: "white" }}>
-            <Highlight
-              text={JSON.stringify(item.request.headers, undefined, 4)}
-              filter={filter}
-            />
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const isError = (a) => a.response?.status < 200 || a.response?.status >= 400;
-export default (props) => {
-  const [filter, setFilter] = useState("");
-  const [errorOnly, setErrorOnly] = useState(false);
-  const [expands, setExpands] = useState({});
-  const apis = props.apis.filter((a) => !errorOnly || isError(a));
-
-  const hasError = apis.some(isError);
-
-  return (
-    <>
-      <View style={styles.container}>
-        {!!apis.length && !filter && (
-          <TouchableOpacity
-            style={{ padding: 5, backgroundColor: "white", borderRadius: 5 }}
-            onPress={() =>
-              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 {props.apis.length} APIs
-            </Text>
-          </TouchableOpacity>
-        )}
-        {hasError && !filter && (
-          <TouchableOpacity
-            style={{ padding: 5 }}
-            onPress={() => setErrorOnly((v) => !v)}
-          >
-            <Text
-              style={{
-                color: "red",
-                textDecorationLine: errorOnly ? "line-through" : undefined,
-                fontSize: 10,
-              }}
-            >
-              {apis.filter(isError).length} error
-              {apis.filter(isError).length > 1 ? "s" : ""}
-            </Text>
-          </TouchableOpacity>
-        )}
-        {!!props.blacklists.length &&  !filter && (
-          <TouchableOpacity
-            style={{ padding: 5, backgroundColor: "white", borderRadius: 5 }}
-            onPress={() =>
-              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} Blacklists
-            </Text>
-          </TouchableOpacity>
-        )}
-
-        <TextInput
-          value={filter}
-          placeholder="Filter..."
-          clearButtonMode="always"
-          placeholderTextColor="grey"
-          style={{ paddingHorizontal: 5, color: "white", flex: 1 }}
-          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>
-        )}
-      <SectionList
-        keyExtractor={(i) => i.id}
-        stickySectionHeadersEnabled
-        showsVerticalScrollIndicator
-        sections={apis
-          .filter((a) =>
-            !filter || JSON.stringify(a).toLowerCase().includes(filter)
-          )
-          .map((data) => ({ data: [data], id: data.id }))}
-        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 isExpand = expands[item.id];
-          const color = hasResponse ? item.response.error ? "red" : "white" : "yellow";
-
-          return (
-            <View style={styles.rowHeader}>
-              <Text
-                selectable
-                style={{flex: 1, color, marginVertical: 10}}
-              >
-                <Text style={{ opacity: 0.7 }}>
-                  {item.request.method +
-                    ` (${item.response?.status ?? "no response"})` +
-                    " - " +
-                    item.request.time +
-                    (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 && "......."}
-              </Text>
-              <View style={{ gap: 4 }}>
-                <TouchableOpacity
-                  onPress={() =>
-                    setExpands((v) => {
-                      if (!isExpand) return { ...v, [item.id]: true };
-                      const newV = { ...v };
-                      delete newV[item.id];
-                      return newV;
-                    })
-                  }
-                  style={styles.actionButton}
-                >
-                  <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));
-                    }}
-                    style={styles.actionButton}
-                  >
-                    <Text style={{ color: "black", fontSize: 10 }}>Copy</Text>
-                  </TouchableOpacity>
-                )}
-                <TouchableOpacity
-                  onPress={() => {
-                    Alert.alert("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(v => [...v, item.request]), style: "cancel" },
-                      { text: "Cancel" },
-                    ])
-                  }}
-                  style={styles.actionButton}
-                >
-                  <Text style={{ color: "black", fontSize: 10 }}>Blacklist</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          );
-        }}
-      />
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    paddingLeft: 5,
-    alignItems: "center",
-    gap: 5,
-  },
-  details: {
-    padding: 5,
-    backgroundColor: "#171717",
-    paddingTop: 10,
-    paddingBottom: 40,
-  },
-  actionButton: { backgroundColor: "white", borderRadius: 5, padding: 4 },
-  rowHeader: {
-    flexDirection: "row",
-    gap: 5,
-    backgroundColor: "black",
-    padding: 5,
-    paddingTop: 10,
-    shadowColor: "black",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowRadius: 5,
-    shadowOpacity: 1,
-    // TODO shadow not working on android
-    elevation: 10,
-    zIndex: 99,
-  },
-  selectionTab: {
-    borderBottomColor: "white",
-    borderBottomWidth: 2,
-    flex: 1,
-    borderTopEndRadius: 10,
-    borderTopStartRadius: 10,
-  },
-});