react-native-in-app-debugger 1.0.58 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "description": "This library's main usage is to be used by Non-Technical testers during UAT, SIT or any testing phase.",
   "main": "index.jsx",
   "scripts": {

package/useAnimation.ts

@@ -1,5 +1,18 @@
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Keyboard, PanResponder, useWindowDimensions } from 'react-native';
+import { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  Keyboard,
+  PanResponder,
+  useWindowDimensions,
+} from "react-native";
+
+let LocalStorage;
+try {
+  LocalStorage =
+    require("@react-native-async-storage/async-storage/src").default;
+} catch (error) {
+  // console.error("Error importing LocalStorage:", error);
+}
 
 const defaultBadgeWidth = 110;
 const defaultBorderRadius = 10;
@@ -8,7 +21,10 @@ const touchThreshold = 10;
 
 export default (defaultBadgeHeight) => {
   const cachePosition = useRef({ x: 0, y: 50 });
-  const position = useRef<any>(new Animated.ValueXY(cachePosition.current)).current;
+  const position = useRef<any>(
+    new Animated.ValueXY(cachePosition.current)
+  ).current;
+  // initially I want to animate border radius, but user dont really notice, therefore I removed unnecessary animation
   // const borderRadius = useRef(new Animated.Value(defaultBorderRadius)).current;
   const badgeHeight = useRef(new Animated.Value(defaultBadgeHeight)).current;
   const badgeWidth = useRef(new Animated.Value(defaultBadgeWidth)).current;
@@ -16,12 +32,34 @@ export default (defaultBadgeHeight) => {
   const [isOpen, setIsOpen] = useState(false);
   const [shouldShowDetails, setShouldShowDetails] = useState(false);
 
+  const move = (toValue) => {
+    cachePosition.current = toValue;
+    Animated.spring(position, { ...und, toValue }).start();
+    LocalStorage?.setItem("in-app-debugger-position", JSON.stringify(toValue));
+  };
+
+  if (LocalStorage) {
+    useEffect(() => {
+      LocalStorage.getItem("in-app-debugger-position").then((d) => {
+        if (d) move(JSON.parse(d));
+      });
+    }, []);
+  }
+
   useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      !isOpen && Animated.spring(position, { ...und, toValue: { x: cachePosition.current.x, y: 0 } }).start();
+    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      !isOpen &&
+        Animated.spring(position, {
+          ...und,
+          toValue: { x: cachePosition.current.x, y: 0 },
+        }).start();
     });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      !isOpen && Animated.spring(position, { ...und, toValue: cachePosition.current }).start();
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      !isOpen &&
+        Animated.spring(position, {
+          ...und,
+          toValue: cachePosition.current,
+        }).start();
     });
 
     return () => {
@@ -40,28 +78,42 @@ export default (defaultBadgeHeight) => {
       onPanResponderGrant: () => {
         position.setOffset({ x: position.x._value, y: position.y._value });
       },
-      onPanResponderMove: Animated.event([null, { dx: position.x, dy: position.y }], und),
+      onPanResponderMove: Animated.event(
+        [null, { dx: position.x, dy: position.y }],
+        und
+      ),
       onPanResponderRelease: (_, g) => {
         position.flattenOffset();
-        cachePosition.current = {
+        move({
           x: g.moveX > width / 2 ? width - defaultBadgeWidth : 0,
           y: Math.min(g.moveY, height - defaultBadgeHeight),
-        };
-        Animated.spring(position, { ...und, toValue: cachePosition.current }).start();
+        });
       },
-    }),
+    })
   ).current;
 
   useEffect(() => {
-    Animated.spring(badgeHeight, { toValue: isOpen ? height : defaultBadgeHeight, ...und }).start();
+    Animated.spring(badgeHeight, {
+      toValue: isOpen ? height : defaultBadgeHeight,
+      ...und,
+    }).start();
   }, [defaultBadgeHeight]);
 
   useEffect(() => {
     setTimeout(() => setShouldShowDetails(isOpen), isOpen ? 200 : 0);
-    Animated.spring(position, { toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current, ...und }).start();
+    Animated.spring(position, {
+      toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current,
+      ...und,
+    }).start();
     // Animated.spring(borderRadius, { toValue: isOpen ? 0 : defaultBorderRadius, ...und }).start();
-    Animated.spring(badgeHeight, { toValue: isOpen ? height : defaultBadgeHeight, ...und }).start();
-    Animated.spring(badgeWidth, { toValue: isOpen ? width : defaultBadgeWidth, ...und }).start();
+    Animated.spring(badgeHeight, {
+      toValue: isOpen ? height : defaultBadgeHeight,
+      ...und,
+    }).start();
+    Animated.spring(badgeWidth, {
+      toValue: isOpen ? width : defaultBadgeWidth,
+      ...und,
+    }).start();
   }, [isOpen]);
 
   return {