react-native-in-app-debugger 1.0.85 → 2.0.0

package/Api/Row.jsx

@@ -51,7 +51,15 @@ export default ({ item, filter, wrap, setWrap }) => {
           <Tab key={t.value} {...t} />
         ))}
       </View>
-      <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          alignItems: "center",
+          padding: 10,
+          gap: 10,
+        }}
+      >
         <TouchableOpacity
           onPress={() => setWrap((v) => !v)}
           style={{
@@ -59,7 +67,6 @@ export default ({ item, filter, wrap, setWrap }) => {
             backgroundColor: wrap ? "white" : undefined,
             borderColor: "white",
             padding: 5,
-            margin: 10,
             borderRadius: 10,
           }}
         >

package/Api/index.jsx

@@ -6,6 +6,7 @@ import {
   Alert,
   StyleSheet,
   TouchableOpacity,
+  ActivityIndicator,
 } from "react-native";
 import Text from "../Text";
 import Highlight from "../Highlight";
@@ -131,6 +132,9 @@ export default (props) => {
             </TouchableOpacity>
           </>
         )}
+        {apis.some((a) => !a.response) && (
+          <ActivityIndicator size="small" color="white" />
+        )}
         <TextInput
           value={filter}
           placeholder="Filter..."
@@ -153,7 +157,9 @@ export default (props) => {
         showsVerticalScrollIndicator
         sections={apis
           .filter(
-            (a) => !filter || JSON.stringify(a).toLowerCase().includes(filter)
+            (a) =>
+              !filter ||
+              JSON.stringify(a.request).toLowerCase().includes(filter)
           )
           .filter((a) => !showBookmarkOnly || props.bookmarks[a.id])
           .map((data) => ({ data: [data], id: data.id }))}
@@ -164,8 +170,11 @@ export default (props) => {
             <View style={{ height: 20 }} />
           )
         }
-        renderSectionHeader={({ section: { data } }) => {
-          const item = data[0];
+        renderSectionHeader={({
+          section: {
+            data: [item],
+          },
+        }) => {
           const hasResponse = !!item.response;
 
           const duration = item.response?.timestamp
@@ -194,6 +203,10 @@ export default (props) => {
                 }}
               />
               <Text selectable style={{ flex: 1, color, marginVertical: 10 }}>
+                <Text style={{ color: "#555", fontSize: 8 }}>
+                  {item.id + "\n"}
+                </Text>
+
                 <Text style={{ opacity: 0.7 }}>
                   {item.request.method +
                     ` (${item.response?.status ?? "no response"})` +
@@ -262,6 +275,14 @@ export default (props) => {
                 >
                   <BlacklistIcon />
                 </TouchableOpacity>
+                {item.interface === "axios" && (
+                  <TouchableOpacity
+                    onPress={() => props.goToMock(item)}
+                    style={styles.actionButton}
+                  >
+                    <Text style={{ color: "black", fontSize: 10 }}>Mock</Text>
+                  </TouchableOpacity>
+                )}
               </View>
             </View>
           );

package/{useApiInterceptor.js → Api/useApiInterceptor.js}

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 // import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor.js';
 import axios from 'axios';
-const overrideResponse = false; // Set to true to override the response with a random value
-const filterNonBusinessRelatedAPI = true;
+// const overrideResponse = false; // Set to true to override the response with a random value
+// const filterNonBusinessRelatedAPI = true;
+
+const originalFetch = global.fetch;
 
 const shouldExclude = (url, method) =>
   ['HEAD'].includes(method) ||
@@ -17,8 +19,8 @@ const parse = (data) => {
     return data;
   }
 };
-
-export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef) => {
+let interceptorId = null;
+export default ({ maxNumOfApiToStore, blacklists, blacklistRef, mocks }) => {
   const [apis, setApis] = useState([]);
   const [bookmarks, setBookmarks] = useState({});
 
@@ -45,11 +47,14 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
     const request = {
       ...data,
       timestamp: performance.now(),
+      datetime: new Date().toLocaleString(),
       time: `${hour}:${minute}:${second}`,
+      isMocked: undefined,
+      interface: undefined
     };
     setApis((v) => {
       const newData = [
-        { request, id: Date.now().toString(36) + Math.random().toString(36) },
+        { request, id: Date.now().toString(36) + Math.random().toString(36), isMocked: !!data.isMocked, interface: data.interface },
         ...(maxNumOfApiToStore ? v.slice(0, maxNumOfApiToStore - 1) : v),
       ];
       return newData;
@@ -82,28 +87,79 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
   };
 
   useEffect(() => {
-    const originalFetch = global.fetch;
+    const mocked = (url, method) => {
+      // console.log('xxxxxx url method', url, method);
+      // console.log('xxxxxx mocks', mocks);
+      return mocks.find(
+        (m) =>
+          m.request.url.toLowerCase() === url.toLowerCase() && m.request.method.toLowerCase() === method.toLowerCase(),
+      );
+    };
     global.fetch = async function (...args) {
-      console.log('[Fetch Request]', args);
-      const [url, { headers, method, body }] = args;
+      // console.log('xxxxxxxx [Fetch Request]', args);
+      const [url, { headers, method, body } = { method: 'get' }] = args;
 
       try {
         if (!shouldExclude(url, method)) {
-          const data = body ? parse(body): undefined;
+          const data = body ? parse(body) : undefined;
+
           makeRequest({
             url,
             headers,
             method,
             data,
+            interface: 'fetch',
           });
         }
+
+        // return new Response(JSON.stringify({"xxxx": "xxxxx"}), {
+        //     status: 444,
+        //     headers: { 'Content-Type': 'application/json' },
+        //   });
+
         const response = await originalFetch(...args);
+        // console.log('xxxxxx [Fetch Response]', response);
+        // const data = await response.json();
+        // alert('aaaa')
+        // const returnedTarget = Object.assign({}, response);
+        // const data = await returnedTarget.json();
+
+        // const reader = response.body.getReader();
+        // const decoder = new TextDecoder();
+        // let result = '';
+
+        // function read() {
+        //   return reader.read().then(({ done, value }) => {
+        //     if (done) {
+        //       console.log('Response body:', result);
+        //       return;
+        //     }
+        //     result += decoder.decode(value, { stream: true });
+        //     return read();
+        //   });
+        // }
+
+        // const data = read();
+        // alert(JSON.stringify(data));
 
         receiveResponse({
-          config: response,
+          config: {
+            url: response.url,
+            headers: response.headers,
+            method: response.method || method,
+          },
           status: response.status,
+          // data: { aaa: 'bbb' },
         });
 
+        // console.log('xxxxxx fetch checking mock');
+        const mock = mocked(url, method);
+
+        if (mock) {
+          // console.log('xxxxxx jest mocked', mock);
+        }
+        // console.log('xxxxxx jest response', response);
+
         // console.log('[Fetch Response]', args);
 
         // if (overrideResponse) {
@@ -121,7 +177,11 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
       } catch (error) {
         // console.log(error);
         // console.error('[Fetch Error]', error);
-        throw error;
+        return new Response(JSON.stringify(error), {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' },
+        });
+        // throw error;
       }
     };
 
@@ -133,11 +193,16 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
         const { method, url, headers } = config;
         if (!shouldExclude(url, method)) {
           const data = config.data ? parse(config.data) : undefined;
+
+        const mock = mocked(url, method);
+
           makeRequest({
             url,
             headers,
             method,
             data,
+            isMocked: !!mock,
+            interface: 'axios',
           });
         }
 
@@ -145,11 +210,8 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
       },
       (error) => {
         // alert(JSON.stringify(error));
-        console.error('[Axios Request Error]', error);
-        //  receiveResponse({
-        //   config: error.config,
-        //   status: error.response?.status,
-        // });
+        // console.error('[Axios Request Error]', error);
+
         receiveResponse({
           config: error.config,
           status: error.response?.status,
@@ -158,19 +220,28 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
       },
     );
 
-    axios.interceptors.response.use(
+    if (interceptorId) axios.interceptors.response.eject(interceptorId);
+
+    interceptorId = axios.interceptors.response.use(
       (response) => {
         // console.log('[Axios Response]', response);
 
         // if (overrideResponse) {
         //   // Replace response.data with random value
-        //   response.data = { message: 'Random overridden Axios response' };
+        // response.data = { message: 'Random overridden Axios response' };
+        // response.status = 200;
         // }
-        receiveResponse({
-          config: response.config,
-          data: response.data,
-          status: response.status,
-        });
+        // mocked(response.config.url, response.config.method)?.response?.data
+
+        // console.log('xxxxxx axios checking mock');
+        const mock = mocked(response.config.url, response.config.method);
+
+        if (mock?.response) {
+          // console.log('xxxxxx axios mocked', mock);
+          response = mock.response;
+        }
+        // console.log('xxxxxx axios response', response);
+        receiveResponse(response);
 
         return response;
       },
@@ -182,7 +253,7 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef)
         return Promise.reject(error);
       },
     );
-  }, []);
+  }, [mocks]);
 
   return { apis, clear: () => setApis([]), bookmarks, setBookmarks };
 };

package/Highlight.jsx

@@ -3,7 +3,7 @@ import Text from './Text';
 
 export default ({ text, filter, style = {} }) => {
     if (!filter || !/^[a-zA-Z0-9./]+$/.test(filter)) return <Text style={style}>{text}</Text>;
-    const indices = [...text.matchAll(new RegExp(filter, 'gi'))].map((a) => a.index);
+    const indices = text ? [...text.matchAll(new RegExp(filter, 'gi'))].map((a) => a.index) : [];
     if (!indices.length) return <Text style={style}>{text}</Text>;
     return (
       <>

package/Mock/MockDetails.jsx

@@ -0,0 +1,225 @@
+import React, { use, useEffect, useState } from 'react';
+import { View, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import Text from '../Text';
+import X from '../X';
+
+const removeId = (key, value) => (key === 'id' ? undefined : value);
+export default (p) => {
+  const [tab, setTab] = useState('response');
+  const [tmpResBody, setTmpResBody] = useState('');
+  const [tmpResStatus, setTmpResStatus] = useState('');
+  const [tmpMockDetails, setTmpMockDetails] = useState({});
+
+  const save = (cb) => {
+    if (tab === 'response') {
+      try {
+        if (!tmpResStatus) {
+          return Alert.alert('Sorry', 'Status code is required');
+        }
+        const tmp = JSON.parse(tmpMockDetails);
+        tmp.response.data = JSON.parse(tmpResBody);
+        tmp.response.status = parseInt(tmpResStatus, 10);
+        p.setMockDetails(tmp);
+
+        p.setMocks((v) => {
+          const index = v.findIndex((m) => m.id === p.mockDetails.id);
+          // p.setMockDetails(null);
+          if (!~index) {
+            const id = Date.now().toString(36) + Math.random().toString(36);
+            p.setMockDetails((md) => ({ ...md, id }));
+            return [...v, { ...tmp, id }];
+          }
+          v[index] = { ...v[index], ...tmp };
+          p.setMockDetails(v[index]);
+          return v;
+        });
+        // p.setMocks(v => {
+        //   const tmp = [...v];
+        //   for(let i = 0; i < tmp.length; i++) {
+        //     if (tmp[i].id === p.mockDetails.id) {
+        //       tmp[i] = { ...tmp[i], ...tmp };
+        //       break;
+        //     }
+        //   }
+        //   // v.forEach(m => m.id === p.mockDetails.id && (m.response = tmp.response));
+        //   return tmp;
+        // })
+        cb?.();
+      } catch (e) {
+        return Alert.alert('Sorry', 'Please fix the response body JSON');
+      }
+    } else if (tab === 'json') {
+      cb?.();
+    } else if (tab === 'request') {
+      cb?.();
+    }
+  };
+  const reset = () => {
+    if (!p.mockDetails) return;
+    setTmpMockDetails(JSON.stringify(p.mockDetails, removeId, 4));
+    setTmpResBody(JSON.stringify(p.mockDetails.response.data, removeId, 4));
+    setTmpResStatus(p.mockDetails.response.status + '' || '');
+  };
+  useEffect(reset, [p.mockDetails]);
+  const [canReset, setCanReset] = useState(false);
+
+  // const parse = (data) => {
+  //   try {
+  //     return JSON.parse(data);
+  //   } catch (e) {
+  //     // Alert.alert('Error', 'Invalid JSON');
+  //     return {};
+  //   }
+  // };
+
+  useEffect(() => {
+    try {
+      setCanReset(JSON.stringify(p.mockDetails, removeId) != tmpMockDetails);
+    } catch (e) {
+      setCanReset(true);
+    }
+  }, [p.mockDetails, tmpMockDetails]);
+  if (!p.mockDetails) return null;
+  const isnew = !p.mocks.some((m) => m.id === p.mockDetails.id);
+
+  return (
+    <View
+      style={{
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        zIndex: 1000,
+        backgroundColor: 'grey',
+        width: '100%',
+        height: '100%',
+        paddingTop: 50,
+      }}
+    >
+      {!isnew && <Text style={{ opacity: 0.3 }}>{p.mockDetails.id}</Text>}
+      <View style={{ flexDirection: 'row' }}>
+        <Text style={{ flex: 1 }}>{`(${p.mockDetails.request.method}) ${p.mockDetails.request.url}`}</Text>
+        <TouchableOpacity onPress={() => p.setMockDetails(null)}>
+          <X size={25} />
+        </TouchableOpacity>
+      </View>
+      <View
+        style={{
+          marginVertical: 10,
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          backgroundColor: 'black',
+          borderRadius: 5,
+          padding: 5,
+        }}
+      >
+        {['request', 'response', 'json'].map((item) => {
+          const isSelected = item === tab;
+          return (
+            <TouchableOpacity
+              style={{ backgroundColor: isSelected ? 'white' : 'black', padding: 3, borderRadius: 5 }}
+              onPress={() => {
+                save(() => setTab(item));
+              }}
+            >
+              <Text style={{ textTransform: 'uppercase', color: isSelected ? 'black' : 'white' }}>{item}</Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      {tab === 'response' && (
+        <View style={{ gap: 3 }}>
+          <View style={{ flexDirection: 'row', gap: 5 }}>
+            <Text>Status</Text>
+            <TextInput
+              style={{ backgroundColor: '#ccc', width: 50, padding: 2 }}
+              inputMode='numeric'
+              onChangeText={(t) => {
+                setTmpResStatus(t);
+                // try {
+                //   const newData = JSON.parse(tmpMockDetails);
+                //   newData.response.status = parseInt(t, 10);
+                //   setTmpMockDetails(JSON.stringify(newData, removeId, 4));
+                // } catch (e) {
+                //   Alert.alert('Error', 'Invalid JSON');
+                // }
+              }}
+              value={tmpResStatus}
+            />
+          </View>
+
+          <View style={{ flexDirection: 'row', gap: 5 }}>
+            <Text>Body</Text>
+            <TextInput
+              style={{ backgroundColor: '#ccc', height: 250, flex: 1, padding: 2 }}
+              multiline
+              onChangeText={setTmpResBody}
+              value={tmpResBody}
+            />
+          </View>
+        </View>
+      )}
+      {tab !== 'response' && <Text style={{ marginTop: 30, textAlign: 'center' }}>To be developed later</Text>}
+      {/* {tab === 'json' && (
+        <TextInput onChangeText={setTmpMockDetails} value={tmpMockDetails} style={{ height: '40%' }} multiline />
+      )} */}
+      {tab === 'response' && (
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
+          {!isnew && (
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={() => {
+                p.deleteMock(p.mockDetails.id);
+                p.setMockDetails(null);
+              }}
+            >
+              <Text style={{ fontSize: 15 }}>Delete</Text>
+            </TouchableOpacity>
+          )}
+          {canReset && (
+            <TouchableOpacity style={styles.actionButton} onPress={reset}>
+              <Text style={{ fontSize: 15 }}>Reset</Text>
+            </TouchableOpacity>
+          )}
+          {canReset && (
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={() => {
+                // try {
+                //   const tmp = JSON.parse(tmpMockDetails);
+                //   if (!tmp.request) {
+                //     Alert.alert('Error', 'Invalid JSON');
+                //     return;
+                //   }
+                //   p.setMocks((v) => {
+                //     const index = v.findIndex((m) => m.id === p.mockDetails.id);
+                //     p.setMockDetails(null);
+                //     if (!~index) return [...v, { ...tmp, id: Date.now().toString(36) + Math.random().toString(36) }];
+                //     v[index] = { ...tmp, id: p.mockDetails.id };
+                //     return v;
+                //   });
+                // } catch (e) {
+                //   Alert.alert('Error', 'Invalid JSON');
+                // }
+                save();
+              }}
+            >
+              <Text style={{ fontSize: 15 }}>Save</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionButton: {
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/Mock/MockGroup.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableHighlight, TouchableOpacity, View } from 'react-native';
+import Text from '../Text';
+import Highlight from '../Highlight';
+
+export const MAX_URL_LENGTH = 100;
+
+export default (p) => {
+  const [expand, setExpand] = useState(false);
+  return (
+    <View>
+      <TouchableHighlight underlayColor='#ffffff44' onPress={() => setExpand((v) => !v)}>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 5,
+            flex: 1,
+          }}
+        >
+          <Text selectable style={{ color: 'white', marginVertical: 10 }}>
+            <Highlight
+              text={p.item.title.slice(0, MAX_URL_LENGTH) + (p.item.title.length > MAX_URL_LENGTH ? '.....' : '')}
+              filter={p.filter}
+            />
+          </Text>
+          <View>
+            <View style={{ padding: 5, backgroundColor: '#777', borderRadius: 8 }}>
+              <Text>{p.item.data.length}</Text>
+            </View>
+          </View>
+        </View>
+      </TouchableHighlight>
+      {expand &&
+        p.item.data.map((d) => (
+          <View style={{padding: 5}} key={d.id}>
+            <Text style={{ color: '#555', fontSize: 8 }}>{d.id}</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <Text style={{ color: 'grey' }}>{d.request.datetime}</Text>
+              <View style={{ flexDirection: 'row', gap: 5 }}>
+                <TouchableOpacity style={styles.actionButton} onPress={() => p.deleteMock(d.id)}>
+                  <Text style={{ color: 'black', fontSize: 10 }}>delete</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.actionButton} onPress={() => p.setMockDetails(d)}>
+                  <Text style={{ color: 'black', fontSize: 10 }}>edit</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionButton: {
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/Mock/index.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { FlatList, StyleSheet, TextInput } from 'react-native';
+import MockGroup from './MockGroup';
+
+const format = (m) => '(' + m.request.method + ') ' + m.request.url;
+
+export default (p) => {
+  const [filter, setFilter] = useState('');
+
+  const data = [];
+  p.mocks.forEach((m) => {
+    const tmp = format(m);
+    if (!data.some((d) => d.title === tmp)) data.push({ title: tmp, data: [m] });
+    else data.forEach((d) => d.title === tmp && d.data.push(m));
+  });
+
+  return (
+    <>
+      <TextInput
+        value={filter}
+        placeholder='Filter...'
+        placeholderTextColor='grey'
+        style={styles.textInput}
+        onChangeText={(t) => setFilter(t.toLowerCase())}
+        clearButtonMode='always'
+      />
+      <FlatList
+        contentContainerStyle={{ padding: 5, paddingBottom: 20 }}
+        data={data.filter((l) => !filter || l.title.toLowerCase().includes(filter))}
+        showsVerticalScrollIndicator
+        keyExtractor={(i) => i.title}
+        renderItem={(pp) => <MockGroup {...pp} {...p} filter={filter} />}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    marginHorizontal: 5,
+    padding: 5,
+    color: 'white',
+    backgroundColor: '#333',
+    borderRadius: 8,
+  },
+});

package/README.md

@@ -75,7 +75,6 @@ All FlatList props should work plus props mentioned below
 | `labels` | Array of strings | Array of strings you want to show of the floating debugger pill. For each strings in the array will eb displayed as a single line in the floating debugger pill | | Optional |
 | `maxNumOfApiToStore` | integer | Number of APIs to be kept. Too much API might make the whole app lag, therefore need to trade off. Suggested value is 50 | | Optional. If not set, all APIs will be kept forever |
 `version` | string | Any string passed here will be shown in debugger's floating panel. | | Optional. If not supplied, version number will taken automatically using React Native Device Info library. But if Device Info library is not installed, then no version will be shown if this prop is not passed.
-`interceptResponse` | function | Callback function when receive response from any API. | | Optional
 
 
 ### Integration with Third Party Library

package/index.jsx

@@ -31,9 +31,11 @@ try {
 import useAnimation from "./useAnimation";
 import Variables from "./Variables";
 import Api from "./Api";
-import useApiInterceptor from "./useApiInterceptor";
+import useApiInterceptor from "./Api/useApiInterceptor";
 import useStateRef from "./useStateRef";
-import Libs from "react-native-in-app-debugger/Libs";
+import Libs from "./Libs";
+import Mock from "./Mock";
+import MockDetails from "./Mock/MockDetails";
 
 const fontSize = 7;
 
@@ -57,16 +59,19 @@ const Label = (props) => (
   />
 );
 
+let cachedMocks = [];
+LocalStorage.getItem("in-app-debugger-mocked").then((d) => {
+  if (d) cachedMocks = JSON.parse(d);
+});
+
 export default ({
   variables,
   env,
   version = v,
   maxNumOfApiToStore = 0,
   labels = [],
-  interceptResponse,
   tabs = [],
 }) => {
-
   const deeplinkPrefix = variables?.DEEPLINK_PREFIX;
   const [blacklists, setB, blacklistRef] = useStateRef([]);
   const dimension = useWindowDimensions();
@@ -87,26 +92,37 @@ export default ({
     }
   };
 
+  const [tab, setTab] = useState("api");
+  const [mocks, setMocks] = useState(cachedMocks);
+  const [mockDetails, setMockDetails] = useState();
+
+  useEffect(() => {
+    LocalStorage?.setItem("in-app-debugger-mocked", JSON.stringify(mocks));
+  }, [mocks]);
+
   if (LocalStorage) {
     useEffect(() => {
       setTimeout(() => {
-        LocalStorage.getItem("in-app-debugger-blacklist").then((d) => {
-          if (d) {
-            setBlacklists(JSON.parse(d));
-          }
-        });
+        LocalStorage.getItem("in-app-debugger-blacklist").then(
+          (d) => d && setBlacklists(JSON.parse(d))
+        );
       }, 4000);
     }, []);
   }
 
-  const { apis, ...restApiInterceptor } = useApiInterceptor(
+  const { apis, ...restApiInterceptor } = useApiInterceptor({
     maxNumOfApiToStore,
     blacklists,
-    interceptResponse,
-    blacklistRef
-  );
+    blacklistRef,
+    mocks,
+  });
 
-  const [tab, setTab] = useState("api");
+  const goToMock = (d) => {
+    setMockDetails(d);
+    //setTab('mock');
+  };
+
+  const deleteMock = (id) => setMocks((v) => v.filter((i) => i.id !== id));
 
   const errors = apis.filter((a) => a.response?.error).length;
   const numPendingApiCalls = apis.filter((a) => !a.response).length;
@@ -138,6 +154,7 @@ export default ({
   const CustomTabComponent = tabs.find((t) => tab === t.title)?.component;
   const [disapear, setDisapear] = useState();
   if (disapear) return null;
+
   return (
     <Animated.View
       style={{
@@ -186,70 +203,35 @@ export default ({
           ))}
         </TouchableOpacity>
       ) : (
-        <SafeAreaView style={{ flex: 1 }}>
-          <View style={styles.labelContainer}>
-            {displayLabels.map((l) => (
-              <Label key={l}>{l}</Label>
-            ))}
-          </View>
-          <View style={{ flexDirection: "row", padding: 5, gap: 6 }}>
-            <FlatList
-              style={{flex: 1}}
-              data={[
-                "api",
-                !!variables && "vars",
-                "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",
-                "libs",
-                ...tabs.map((t) => t.title),
-              ]
-                .filter(Boolean)
-                .map((t, i) => {
-                  const isSelected = t === tab;
+        <>
+          <SafeAreaView style={{ flex: 1 }}>
+            <View style={styles.labelContainer}>
+              {displayLabels.map((l) => (
+                <Label key={l}>{l}</Label>
+              ))}
+            </View>
+            <View style={{ flexDirection: "row", padding: 5, gap: 6 }}>
+              <FlatList
+                style={{ flex: 1 }}
+                data={[
+                  "api",
+                  "mock",
+                  !!variables && "vars",
+                  "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(t)}
+                      onPress={() => setTab(item)}
                       activeOpacity={isSelected ? 1 : 0.7}
-                      key={t}
                       style={{
-                        flex: 1,
+                        paddingHorizontal: 8,
                         borderBottomWidth: +isSelected,
                         borderColor: "white",
                       }}
@@ -262,26 +244,49 @@ export default ({
                           textTransform: "uppercase",
                         }}
                       >
-                        {t}
-                        {!i && !!apis.length && <Text> ({apis.length})</Text>}
+                        {item}
+                        {!index && !!apis.length && (
+                          <Text> ({apis.length})</Text>
+                        )}
+                        {index === 1 && !!mocks.length && (
+                          <Text> ({mocks.length})</Text>
+                        )}
                       </Text>
                     </TouchableOpacity>
                   );
-                })}
-            </View> */}
-            <X style={{ marginRight: 5 }} onPress={() => setIsOpen(false)} />
-          </View>
-          {tab === "vars" && <Variables variables={variables} />}
-          {tab === "deeplink" && <Deeplink deeplinkPrefix={deeplinkPrefix} onClose={() => setIsOpen(false)} />}
-          {tab === "libs" && <Libs />}
-          {tab === "api" && (
-            <Api
-              {...{ apis, setBlacklists, blacklists, maxNumOfApiToStore }}
-              {...restApiInterceptor}
-            />
-          )}
-          {!!CustomTabComponent && <CustomTabComponent />}
-        </SafeAreaView>
+                }}
+              />
+              <X style={{ marginRight: 5 }} onPress={() => setIsOpen(false)} />
+            </View>
+            {tab === "vars" && <Variables variables={variables} />}
+            {tab === "mock" && (
+              <Mock {...{ mocks, setMocks, deleteMock, setMockDetails }} />
+            )}
+            {tab === "deeplink" && (
+              <Deeplink
+                deeplinkPrefix={deeplinkPrefix}
+                onClose={() => setIsOpen(false)}
+              />
+            )}
+            {tab === "libs" && <Libs />}
+            {tab === "api" && (
+              <Api
+                {...{
+                  apis,
+                  setBlacklists,
+                  blacklists,
+                  maxNumOfApiToStore,
+                  goToMock,
+                }}
+                {...restApiInterceptor}
+              />
+            )}
+            {!!CustomTabComponent && <CustomTabComponent />}
+          </SafeAreaView>
+          <MockDetails
+            {...{ mockDetails, setMockDetails, setMocks, deleteMock, mocks }}
+          />
+        </>
       )}
     </Animated.View>
   );

package/package.json

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