react-native-in-app-debugger 1.0.86 → 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

@@ -157,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 }))}
@@ -168,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
@@ -198,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"})` +
@@ -266,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, 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, 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, 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, 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, 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, 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, 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, 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/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,6 +59,11 @@ const Label = (props) => (
   />
 );
 
+let cachedMocks = [];
+LocalStorage.getItem("in-app-debugger-mocked").then((d) => {
+  if (d) cachedMocks = JSON.parse(d);
+});
+
 export default ({
   variables,
   env,
@@ -65,7 +72,6 @@ export default ({
   labels = [],
   tabs = [],
 }) => {
-
   const deeplinkPrefix = variables?.DEEPLINK_PREFIX;
   const [blacklists, setB, blacklistRef] = useStateRef([]);
   const dimension = useWindowDimensions();
@@ -86,25 +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,
-    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;
@@ -136,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={{
@@ -184,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",
                       }}
@@ -260,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.86",
+  "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": {