react-native-in-app-debugger 1.0.0 → 1.0.2

package/Api.jsx

@@ -1,11 +1,25 @@
-import React, { useState } from 'react';
-import { Text, SectionList, TextInput, View, Alert, StyleSheet, TouchableOpacity } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
+import React, { useState } from "react";
+import {
+  Text,
+  SectionList,
+  TextInput,
+  View,
+  Alert,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+// import Clipboard from '@react-native-clipboard/clipboard';
+let Clipboard;
+try {
+  Clipboard = require("@react-native-clipboard/clipboard");
+} catch (error) {
+  console.error("Error importing Clipboard:", error);
+}
 
 const MAX_URL_LENGTH = 100;
 
 const Row = ({ item }) => {
-  const [tab, setTab] = useState('response-body');
+  const [tab, setTab] = useState("response-body");
   const hasResponse = item.response;
   const Tab = ({ value, label }) => {
     const isSelected = value === tab;
@@ -13,32 +27,49 @@ const Row = ({ item }) => {
       <TouchableOpacity
         activeOpacity={isSelected ? 1 : 0.7}
         onPress={() => setTab(value)}
-        style={[styles.selectionTab, { backgroundColor: isSelected ? 'white' : undefined }]}
+        style={[
+          styles.selectionTab,
+          { backgroundColor: isSelected ? "white" : undefined },
+        ]}
       >
-        <Text style={{ color: isSelected ? '#000' : '#fff', textAlign: 'center' }}>{label}</Text>
+        <Text
+          style={{ color: isSelected ? "#000" : "#fff", textAlign: "center" }}
+        >
+          {label}
+        </Text>
       </TouchableOpacity>
     );
   };
   return (
     <View style={styles.details}>
       {item.request.url.length > MAX_URL_LENGTH && (
-        <Text style={{ color: '#ffffff99', paddingVertical: 20 }}>{item.request.url}</Text>
+        <Text style={{ color: "#ffffff99", paddingVertical: 20 }}>
+          {item.request.url}
+        </Text>
       )}
       <View>
-        <View style={{ flexDirection: 'row' }}>
-          <Tab value='response-body' label='Response Body' />
-          {!!item.request.data && <Tab value='request-body' label='Request Body' />}
-          <Tab value='request-header' label='Request Header' />
+        <View style={{ flexDirection: "row" }}>
+          <Tab value="response-body" label="Response Body" />
+          {!!item.request.data && (
+            <Tab value="request-body" label="Request Body" />
+          )}
+          <Tab value="request-header" label="Request Header" />
         </View>
 
-        {tab === 'response-body' && hasResponse && (
-          <Text style={{ color: 'white' }}>{JSON.stringify(item.response.data, undefined, 4)}</Text>
+        {tab === "response-body" && hasResponse && (
+          <Text style={{ color: "white" }}>
+            {JSON.stringify(item.response.data, undefined, 4)}
+          </Text>
         )}
-        {tab === 'request-body' && (
-          <Text style={{ color: 'white' }}>{JSON.stringify(item.request.data, undefined, 4)}</Text>
+        {tab === "request-body" && (
+          <Text style={{ color: "white" }}>
+            {JSON.stringify(item.request.data, undefined, 4)}
+          </Text>
         )}
-        {tab === 'request-header' && (
-          <Text style={{ color: 'white' }}>{JSON.stringify(item.request.headers, undefined, 4)}</Text>
+        {tab === "request-header" && (
+          <Text style={{ color: "white" }}>
+            {JSON.stringify(item.request.headers, undefined, 4)}
+          </Text>
         )}
       </View>
     </View>
@@ -46,48 +77,74 @@ const Row = ({ item }) => {
 };
 
 export default (props) => {
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter] = useState("");
   const [errorOnly, setErrorOnly] = useState(false);
   const [filterUrlOnly, setFilterUrlOnly] = useState(true);
   const [expands, setExpands] = useState({});
-  const apis = props.apis.filter((a) => !errorOnly || a.response?.status < 200 || a.response?.status >= 400);
+  const apis = props.apis.filter(
+    (a) => !errorOnly || a.response?.status < 200 || a.response?.status >= 400
+  );
 
-  const hasError = apis.some((a) => a.response?.status < 200 || a.response?.status >= 400);
+  const hasError = apis.some(
+    (a) => a.response?.status < 200 || a.response?.status >= 400
+  );
 
   return (
     <>
-      <View style={{ flexDirection: 'row', paddingLeft: 5, alignItems: 'center', gap: 5 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          paddingLeft: 5,
+          alignItems: "center",
+          gap: 5,
+        }}
+      >
         {!!apis.length && !filter && (
           <TouchableOpacity
-            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            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' },
+              Alert.alert("Are you sure", "You want to clear all logs", [
+                { text: "Delete", onPress: props.clear, style: "cancel" },
+                { text: "Cancel" },
               ])
             }
           >
-            <Text style={{ color: 'black' }}>Clear {apis.length} APIs</Text>
+            <Text style={{ color: "black" }}>Clear {apis.length} APIs</Text>
           </TouchableOpacity>
         )}
         {hasError && !filter && (
-          <TouchableOpacity style={{ padding: 5 }} onPress={() => setErrorOnly((v) => !v)}>
-            <Text style={{ color: 'red', textDecorationLine: errorOnly ? 'line-through' : undefined }}>Error Only</Text>
+          <TouchableOpacity
+            style={{ padding: 5 }}
+            onPress={() => setErrorOnly((v) => !v)}
+          >
+            <Text
+              style={{
+                color: "red",
+                textDecorationLine: errorOnly ? "line-through" : undefined,
+              }}
+            >
+              Error Only
+            </Text>
           </TouchableOpacity>
         )}
-        <View style={{ flexDirection: 'row', flex: 1 }}>
+        <View style={{ flexDirection: "row", flex: 1 }}>
           <TextInput
             value={filter}
-            placeholder='Filter...'
-            clearButtonMode='always'
-            placeholderTextColor='grey'
-            style={{ paddingHorizontal: 5, color: 'white', flex: 1 }}
+            placeholder="Filter..."
+            clearButtonMode="always"
+            placeholderTextColor="grey"
+            style={{ paddingHorizontal: 5, color: "white", flex: 1 }}
             onChangeText={(t) => setFilter(t.toLowerCase())}
           />
         </View>
         {!!filter && (
-          <TouchableOpacity style={{ padding: 5 }} onPress={() => setFilterUrlOnly((v) => !v)}>
-            <Text style={{ color: '#ffffff88' }}>{filterUrlOnly ? 'by URL' : 'by URL & body'}</Text>
+          <TouchableOpacity
+            style={{ padding: 5 }}
+            onPress={() => setFilterUrlOnly((v) => !v)}
+          >
+            <Text style={{ color: "#ffffff88" }}>
+              {filterUrlOnly ? "by URL" : "by URL & body"}
+            </Text>
           </TouchableOpacity>
         )}
       </View>
@@ -99,22 +156,24 @@ export default (props) => {
           .filter((a) =>
             !filter || filterUrlOnly
               ? a.request.url.includes(filter)
-              : JSON.stringify(a).toLowerCase().includes(filter),
+              : JSON.stringify(a).toLowerCase().includes(filter)
           )
           .map((data) => ({ data: [data], id: data.id }))}
-        renderItem={(i) => (expands[i.item.id] ? <Row {...i} /> : <View style={{ height: 20 }} />)}
+        renderItem={(i) =>
+          expands[i.item.id] ? <Row {...i} /> : <View style={{ height: 20 }} />
+        }
         renderSectionHeader={({ section: { data } }) => {
           const item = data[0];
           const hasResponse = !!item.response;
 
           let duration = 0;
           if (item.response?.datetime) {
-            let [hr, min, sec] = item.request.datetime.split(' ')[0].split(':');
+            let [hr, min, sec] = item.request.datetime.split(" ")[0].split(":");
             const start = new Date();
             start.setHours(hr);
             start.setMinutes(min);
             start.setSeconds(sec);
-            [hr, min, sec] = item.response.datetime.split(' ')[0].split(':');
+            [hr, min, sec] = item.response.datetime.split(" ")[0].split(":");
             const end = new Date();
             end.setHours(hr);
             end.setMinutes(min);
@@ -128,20 +187,24 @@ export default (props) => {
                 selectable
                 style={{
                   flex: 1,
-                  color: hasResponse ? (item.response.error ? 'red' : 'white') : 'yellow',
+                  color: hasResponse
+                    ? item.response.error
+                      ? "red"
+                      : "white"
+                    : "yellow",
                   marginVertical: 10,
                 }}
               >
                 <Text style={{ opacity: 0.7 }}>
                   {item.request.method +
-                    ` (${item.response?.status ?? 'no response'})` +
-                    ' - ' +
+                    ` (${item.response?.status ?? "no response"})` +
+                    " - " +
                     item.request.datetime +
-                    (hasResponse ? ' - ' + duration + ' second(s)' : '') +
-                    '\n'}
+                    (hasResponse ? " - " + duration + " second(s)" : "") +
+                    "\n"}
                 </Text>
                 {item.request.url.slice(0, MAX_URL_LENGTH)}
-                {item.request.url.length > MAX_URL_LENGTH && '.......'}
+                {item.request.url.length > MAX_URL_LENGTH && "......."}
               </Text>
               <View style={{ gap: 4 }}>
                 <TouchableOpacity
@@ -155,18 +218,24 @@ export default (props) => {
                   }
                   style={styles.actionButton}
                 >
-                  <Text style={{ color: 'black' }}>{isExpand ? 'Hide' : 'Show'}</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={() => {
-                    const content = { ...item };
-                    delete content.id;
-                    Clipboard.setString(JSON.stringify(content, undefined, 4));
-                  }}
-                  style={styles.actionButton}
-                >
-                  <Text style={{ color: 'black' }}>Copy</Text>
+                  <Text style={{ color: "black" }}>
+                    {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" }}>Copy</Text>
+                  </TouchableOpacity>
+                )}
               </View>
             </View>
           );
@@ -179,18 +248,18 @@ export default (props) => {
 const styles = StyleSheet.create({
   details: {
     padding: 5,
-    backgroundColor: '#171717',
+    backgroundColor: "#171717",
     paddingTop: 10,
     paddingBottom: 40,
   },
-  actionButton: { backgroundColor: 'white', borderRadius: 5, padding: 4 },
+  actionButton: { backgroundColor: "white", borderRadius: 5, padding: 4 },
   rowHeader: {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: 5,
-    backgroundColor: 'black',
+    backgroundColor: "black",
     padding: 5,
     paddingTop: 20,
-    shadowColor: 'black',
+    shadowColor: "black",
     shadowOffset: {
       width: 0,
       height: 2,
@@ -202,7 +271,7 @@ const styles = StyleSheet.create({
     zIndex: 99,
   },
   selectionTab: {
-    borderBottomColor: 'white',
+    borderBottomColor: "white",
     borderBottomWidth: 2,
     flex: 1,
     borderTopEndRadius: 10,

package/README.md

@@ -0,0 +1,21 @@
+# react-native-in-app-debugger
+
+summary
+
+
+Usage :
+
+```
+import React from 'react';
+
+```
+
+
+### Properties
+
+All FlatList props should work plus props mentioned below
+
+| Prop                          | Type                                                                                                 | Description                                                                                                                                                                                                                                                                                                               | Default                                                             | Required                                                                |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `env`                  | string                                                                                              | Any text                                                                                                                                                                                                                                                     |                                                                 | Optional                                                                |
+

package/index.jsx

@@ -1,38 +1,76 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 // hooks are prevented to be called conditionally, but in this case, bundle id / package name will never changed in run time, so it is safe to call the hooks under that condition
 
-import useAnimation from './useAnimation';
-import React, { useState } from 'react';
-import { Animated, Text, StyleSheet, TouchableOpacity, View, SafeAreaView, Dimensions } from 'react-native';
-import DeviceInfo from 'react-native-device-info';
-import Variables from './Variables';
-import Api from './Api';
-import useApiInterceptor from './useApiInterceptor';
+import React, { useState } from "react";
+import {
+  Animated,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  SafeAreaView,
+  Dimensions,
+} from "react-native";
+// const DeviceInfo = React.lazy(() =>
+//   import("react-native-device-info").catch(() => ({ default: null }))
+// );
 
-const dimension = Dimensions.get('window');
+let DeviceInfo;
+try {
+  DeviceInfo = require("react-native-device-info");
+} catch (error) {
+  console.error("Error importing DeviceInfo:", error);
+}
 
-const Label = (props) => <Text {...props} numberOfLines={1} ellipsizeMode='tail' style={[styles.label, props.style]} />;
+import useAnimation from "./useAnimation";
+import Variables from "./Variables";
+import Api from "./Api";
+import useApiInterceptor from "./useApiInterceptor";
+
+const dimension = Dimensions.get("window");
+
+const version = DeviceInfo?.getReadableVersion() || "";
+
+const Label = (props) => (
+  <Text
+    {...props}
+    numberOfLines={1}
+    ellipsizeMode="tail"
+    style={[styles.label, props.style]}
+  />
+);
 
 export default ({ variables, env }) => {
   const { apis, clear } = useApiInterceptor();
 
-  const [tab, setTab] = useState('api');
+  const [tab, setTab] = useState("api");
 
   const errors = apis.filter((a) => a.response?.error).length;
   const numPendingApiCalls = apis.filter((a) => !a.response).length;
-  let badgeHeight = 30;
-  if (variables.GIT_BRANCH) badgeHeight += 10;
-  if (variables.BUILD_DATE_TIME) badgeHeight += 10;
+  let badgeHeight = 20;
+  if (variables?.GIT_BRANCH) badgeHeight += 10;
+  if (variables?.BUILD_DATE_TIME) badgeHeight += 10;
+  const hasEnvOrVersion = !!env || !!version;
+  if (hasEnvOrVersion) badgeHeight += 10;
+  if (DeviceInfo) badgeHeight += 10;
 
-  const { translateX, translateY, borderRadius, width, height, isOpen, panResponder, setIsOpen } =
-    useAnimation(badgeHeight);
+  const {
+    translateX,
+    translateY,
+    borderRadius,
+    width,
+    height,
+    isOpen,
+    panResponder,
+    setIsOpen,
+  } = useAnimation(badgeHeight);
   return (
     <Animated.View
       style={{
         transform: [{ translateX }, { translateY }],
-        position: 'absolute',
+        position: "absolute",
         borderRadius,
-        backgroundColor: '#000000' + (isOpen ? 'dd' : 'bb'),
+        backgroundColor: "#000000" + (isOpen ? "dd" : "bb"),
         height,
         width,
       }}
@@ -42,46 +80,69 @@ export default ({ variables, env }) => {
         <TouchableOpacity onPress={() => setIsOpen(true)} style={styles.box}>
           <View style={styles.badgeContainer}>
             {!!numPendingApiCalls && (
-              <View style={[styles.badge, { backgroundColor: 'orange' }]}>
-                <Text style={{ fontSize: 8, color: 'white' }}>{numPendingApiCalls}</Text>
+              <View style={[styles.badge, { backgroundColor: "orange" }]}>
+                <Text style={{ fontSize: 8, color: "white" }}>
+                  {numPendingApiCalls}
+                </Text>
               </View>
             )}
             {!!errors && (
-              <View style={[styles.badge, { backgroundColor: 'red' }]}>
-                <Text style={{ fontSize: 8, color: 'white' }}>{errors}</Text>
+              <View style={[styles.badge, { backgroundColor: "red" }]}>
+                <Text style={{ fontSize: 8, color: "white" }}>{errors}</Text>
               </View>
             )}
           </View>
-          <Label>{env + ' ' + DeviceInfo.getReadableVersion()}</Label>
-          <Label style={{ fontSize: 6 }}>{DeviceInfo.getDeviceId() + ' ' + DeviceInfo.getSystemVersion()}</Label>
-          <Label style={{ fontSize: 6 }}>{dimension.width + 'x' + dimension.height}</Label>
-          {variables.GIT_BRANCH && <Label style={{ fontSize: 6 }}>{variables.GIT_BRANCH}</Label>}
-          {variables.BUILD_DATE_TIME && <Label style={{ fontSize: 6 }}>{variables.BUILD_DATE_TIME}</Label>}
+          {(!!env || !!version) && (
+            <Label>{(env || "") + (env ? " " : "") + version}</Label>
+          )}
+          {!!DeviceInfo && (
+            <Label style={{ fontSize: 6 }}>
+              {DeviceInfo.getDeviceId() + " " + DeviceInfo.getSystemVersion()}
+            </Label>
+          )}
+          <Label style={{ fontSize: 6 }}>
+            {dimension.width + "x" + dimension.height}
+          </Label>
+          {variables?.GIT_BRANCH && (
+            <Label style={{ fontSize: 6 }}>{variables.GIT_BRANCH}</Label>
+          )}
+          {variables?.BUILD_DATE_TIME && (
+            <Label style={{ fontSize: 6 }}>{variables.BUILD_DATE_TIME}</Label>
+          )}
         </TouchableOpacity>
       ) : (
         <SafeAreaView style={{ flex: 1 }}>
-          <View style={{ flexDirection: 'row', padding: 5 }}>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              {['api', 'env'].map((t) => {
-                const isSelected = t === tab;
-                return (
-                  <TouchableOpacity
-                    onPress={() => setTab(t)}
-                    activeOpacity={isSelected ? 1 : 0.7}
-                    key={t}
-                    style={{ flex: 1, borderBottomWidth: +isSelected, borderColor: 'white' }}
-                  >
-                    <Text style={{ color: 'white', textAlign: 'center' }}>{t.toUpperCase()}</Text>
-                  </TouchableOpacity>
-                );
-              })}
+          <View style={{ flexDirection: "row", padding: 5 }}>
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              {!!variables &&
+                ["api", "variables"].map((t) => {
+                  const isSelected = t === tab;
+                  return (
+                    <TouchableOpacity
+                      onPress={() => setTab(t)}
+                      activeOpacity={isSelected ? 1 : 0.7}
+                      key={t}
+                      style={{
+                        flex: 1,
+                        borderBottomWidth: +isSelected,
+                        borderColor: "white",
+                      }}
+                    >
+                      <Text style={{ color: "white", textAlign: "center" }}>
+                        {t.toUpperCase()}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
             </View>
             <TouchableOpacity onPress={() => setIsOpen(false)}>
               <Text style={styles.close}>X</Text>
             </TouchableOpacity>
           </View>
-          {tab === 'env' && <Variables variables={variables} />}
-          {tab === 'api' && <Api apis={apis} clear={clear} />}
+          {tab === "variables" && !!variables && (
+            <Variables variables={variables} />
+          )}
+          {tab === "api" && <Api apis={apis} clear={clear} />}
         </SafeAreaView>
       )}
     </Animated.View>
@@ -90,22 +151,27 @@ export default ({ variables, env }) => {
 
 const styles = StyleSheet.create({
   box: {
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
   },
-  label: { color: 'white', textAlign: 'center', fontSize: 8 },
+  label: { color: "white", textAlign: "center", fontSize: 8 },
   badgeContainer: {
     gap: 3,
-    flexDirection: 'row',
+    flexDirection: "row",
     top: -8,
     right: -3,
-    position: 'absolute',
+    position: "absolute",
     zIndex: 999,
   },
   badge: {
     padding: 4,
     borderRadius: 999,
   },
-  close: { color: 'white', fontWeight: 'bold', fontSize: 16, paddingHorizontal: 10 },
+  close: {
+    color: "white",
+    fontWeight: "bold",
+    fontSize: 16,
+    paddingHorizontal: 10,
+  },
 });

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "index.jsx",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "deploy": "npm publish --access=public"
   },
-  "keywords": [],
-  "author": "fattahmuhyiddeen",
+  "devDependencies": {},
+  "keywords": [
+    "debugger"
+  ],
+  "author": "Fattah Muhyiddeen <fattahmuhyiddeen@gmail.com>",
   "license": "MIT"
 }

package/useApiInterceptor.js

@@ -1,22 +1,23 @@
 // @ts-nocheck
-import { useEffect, useState } from 'react';
-import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor.js';
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+import XHRInterceptor from "react-native/Libraries/Network/XHRInterceptor.js";
 
 const filterNonBusinessRelatedAPI = true;
 const MAX_NUM_OF_API = 50;
 
 const now = () =>
-  new Date().toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
+  new Date().toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
   });
 
 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 {
@@ -35,7 +36,10 @@ export default () => {
       datetime: now(),
     };
     setApis((v) =>
-      [{ request, id: Date.now().toString(36) + Math.random().toString(36) }, ...v].slice(0, MAX_NUM_OF_API),
+      [
+        { request, id: Date.now().toString(36) + Math.random().toString(36) },
+        ...v,
+      ].slice(0, MAX_NUM_OF_API)
     );
   };
 
@@ -46,7 +50,12 @@ export default () => {
       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,
@@ -87,27 +96,29 @@ export default () => {
       }
       const data = parse(_response);
 
-      xhr.addEventListener('load', function () {
-        try {
-          const reader = new FileReader();
-          reader.readAsText(xhr.response);
-          reader.onload = function () {
-            const response = JSON.parse(reader.result);
-            receiveResponse({
-              config: {
-                url,
-                method,
-              },
-              data: response,
-              status,
-            });
-          };
-        } catch (e) {
-          console.log(e);
-        }
-      });
+      if (Platform.OS === "ios") {
+        xhr.addEventListener("load", function () {
+          try {
+            const reader = new FileReader();
+            reader.readAsText(xhr.response);
+            reader.onload = function () {
+              const response = JSON.parse(reader.result);
+              receiveResponse({
+                config: {
+                  url,
+                  method,
+                },
+                data: response,
+                status,
+              });
+            };
+          } catch (e) {
+            console.log(e);
+          }
+        });
+      }
 
-      if (!data.blobId) {
+      if (Platform.OS === "ios" && !data.blobId) {
         receiveResponse({
           config: {
             url,