@applicaster/zapp-react-native-utils 13.0.0-alpha.1724095599 → 13.0.0-alpha.1753452014

package/analyticsUtils/currentScreenProperities.ts

@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
   screenData
 ): AnalyticsScreenProperties => {
   return {
-    screen_name: screenData?.targetScreen?.name,
+    screen_name: screenData?.targetScreen?.name || screenData?.name,
     screen_entry_title: screenData?.title,
     screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
-    screen_layout_id: screenData?.targetScreen?.id,
-    screen_type: screenData?.targetScreen?.type,
-    home_screen: screenData?.targetScreen?.home,
+    screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
+    screen_type: screenData?.targetScreen?.type || screenData?.type,
+    home_screen: !R.isNil(screenData?.targetScreen?.home)
+      ? screenData?.targetScreen?.home
+      : screenData?.home,
   };
 };
 

package/appUtils/HooksManager/index.ts

@@ -84,7 +84,7 @@ export function HooksManager({
   plugins,
   startUpHooksData = {},
 }: HookManagerArgs): HookManager {
-  hooksManagerLogger.addContext({ targetScreen });
+  hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
 
   function logHookEvent(func, message, data) {
     func({

package/appUtils/focusManager/index.ts

@@ -334,16 +334,7 @@ export const focusManager = (function () {
     return { success: false };
   }
 
-  function treeLoaded(val, node) {
-    logger.log({
-      message: "treeLoaded",
-      data: {
-        val,
-        node,
-        currentFocusNode,
-      },
-    });
-  }
+  function treeLoaded(_val, _node) {}
 
   function pressIn() {
     const currentFocusable = getCurrentFocus();

package/appUtils/keyCodes/index.ts

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

package/appUtils/orientationHelper.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react-native" />
 import * as ReactNative from "react-native";
 import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";

package/appUtils/playerManager/index.ts

@@ -452,7 +452,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
-      this.getActivePlayer().closeNativePlayer();
+      this.getActivePlayer()?.closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/functionUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 /**
  *
@@ -9,31 +9,44 @@ import { useRef } from "react";
  */
 export const useThrottle = (callback: () => void, delay: number) => {
   const lastCallRef = useRef<number>(0);
-  const timeoutRef = useRef<any | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef<() => void>(callback);
 
-  const throttledFunction = () => {
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const throttledFunction = useCallback(() => {
     const now = Date.now();
 
     if (now - lastCallRef.current >= delay) {
-      callback();
+      callbackRef.current();
       lastCallRef.current = now;
     } else if (!timeoutRef.current) {
       const remainingTime = delay - (now - lastCallRef.current);
 
       timeoutRef.current = setTimeout(() => {
-        callback();
+        callbackRef.current();
         lastCallRef.current = Date.now();
         timeoutRef.current = null;
       }, remainingTime);
     }
-  };
+  }, [delay]);
 
-  const cancel = () => {
+  const cancel = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   return { throttledFunction, cancel };
 };

package/manifestUtils/fonts/index.js

@@ -224,12 +224,11 @@ function fontKey(label, defaults, conditionalField = null) {
   return fields;
 }
 
-function tvMenuLabel(label, description, defaults) {
-  return fieldsGroup(
-    label,
-    description,
-    generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS)
-  );
+function tvMenuLabel(label, description, defaults, fields = []) {
+  return fieldsGroup(label, description, [
+    ...fields,
+    ...generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS),
+  ]);
 }
 
 function mobileCellLabel(label, description, defaults, groupFolded) {

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -24,7 +24,7 @@ const componentConfigurationFields = [
     initial_value: "vertical",
     options: [
       { text: "Vertical", value: "vertical" },
-      { text: "Horizontal (Beta)", value: "horizontal" },
+      { text: "Horizontal", value: "horizontal" },
     ],
   },
   {

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1724095599",
+  "version": "13.0.0-alpha.1753452014",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1724095599",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1753452014",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -45,8 +45,5 @@
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "@types/react-native": "0.69.6"
   }
 }

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/index.ts

@@ -108,11 +108,11 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
+  const showSecondaryLevel = screenData?.navigations?.some(
+    (navigation) => navigation.styles?.show_secondary_level_menu
   );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 

package/services/js2native.ts

@@ -0,0 +1,673 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+export const JS_BRIDGE_EVENTS = {
+  DISMISS_HOOK: "DISMISS_HOOK",
+  LOG: "LOG",
+  GET_SESSION_STORAGE: "GET_SESSION_STORAGE",
+  SET_SESSION_STORAGE: "SET_SESSION_STORAGE",
+  GET_LOCAL_STORAGE: "GET_LOCAL_STORAGE",
+  SET_LOCAL_STORAGE: "SET_LOCAL_STORAGE",
+  GET_SECURE_LOCAL_STORAGE: "GET_SECURE_LOCAL_STORAGE",
+  SET_SECURE_LOCAL_STORAGE: "SET_SECURE_LOCAL_STORAGE",
+  CLOSE_WEBVIEW: "CLOSE_WEBVIEW",
+  NAVIGATE_TO_SCREEN: "NAVIGATE_TO_SCREEN",
+  NAVIGATE_TO_ENTRY: "NAVIGATE_TO_ENTRY",
+  OPEN_URL_SCHEME: "OPEN_URL_SCHEME",
+  OPEN_NATIVE_SHARE: "OPEN_NATIVE_SHARE",
+  ADD_SESSION_STORAGE_LISTENER: "ADD_SESSION_STORAGE_LISTENER",
+  REMOVE_SESSION_STORAGE_LISTENER: "REMOVE_SESSION_STORAGE_LISTENER",
+  ADD_LOCAL_STORAGE_LISTENER: "ADD_LOCAL_STORAGE_LISTENER",
+  REMOVE_LOCAL_STORAGE_LISTENER: "REMOVE_LOCAL_STORAGE_LISTENER",
+};
+
+export const INVOKE_APPLICASTER_CALLBACK = "__invoke__applicaster__callback";
+
+const APPLICASTER_CALLBACK_KEY = "__applicaster__js2native__callbacks";
+const getSessionStorageItem = "getSessionStorageItem";
+const setSessionStorageItem = "setSessionStorageItem";
+const getLocalStorageItem = "getLocalStorageItem";
+const setLocalStorageItem = "setLocalStorageItem";
+const getSecureLocalStorageItem = "getSecureLocalStorageItem";
+const setSecureLocalStorageItem = "setSecureLocalStorageItem";
+const addSessionStorageListenerFn = "addSessionStorageListener";
+const addLocalStorageListenerFn = "addLocalStorageListener";
+
+const activeListeners: { [key: string]: () => void } = {};
+
+const sendMessage = `
+  function sendMessage(type, payload, meta) {
+    if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: type,
+        payload: payload,
+        meta: meta
+      }));
+    }
+  }
+`;
+
+const consolePolyfill = `
+  var consoleLog = console.log;
+  var consoleWarn = console.warn;
+  var consoleError = console.error;
+
+  function logInConsole(level, args) {
+    var serializableArgs = [];
+    try {
+       serializableArgs = args.map(function(arg) {
+         try {
+           return JSON.parse(JSON.stringify(arg));
+         } catch (e) {
+           if (typeof arg === 'function') return '[Function]';
+           if (typeof arg === 'symbol') return String(arg);
+           if (arg instanceof Error) return { name: arg.name, message: arg.message, stack: arg.stack };
+           return '[Unserializable]';
+         }
+       });
+    } catch(e) {
+      serializableArgs = ['Error processing console arguments'];
+    }
+
+    sendMessage("${JS_BRIDGE_EVENTS.LOG}", {
+      level: level,
+      messages: JSON.stringify(serializableArgs)
+    });
+  }
+
+  function log() {
+    var args = [].slice.call(arguments);
+    consoleLog.apply(null, args);
+    try {
+      logInConsole("log", args);
+    } catch (e) {
+       consoleError("Error in custom console.log:", e);
+    }
+  };
+
+  function warn() {
+    var args = [].slice.call(arguments);
+    consoleWarn.apply(null, args);
+    try {
+      logInConsole("warn", args);
+    } catch (e) {
+       consoleError("Error in custom console.warn:", e);
+    }
+  }
+
+  function error() {
+    var args = [].slice.call(arguments);
+    consoleError.apply(null, args);
+    try {
+      logInConsole("error", args);
+    } catch (e) {
+      consoleError("Error in custom console.error:", e);
+    }
+  }
+
+  setTimeout(function() {
+    console.log = log;
+    console.warn = warn;
+    console.error = error;
+  }, 0);
+`;
+
+const callbackHandling = `
+  window.Applicaster = window.Applicaster || {};
+  window.Applicaster.${APPLICASTER_CALLBACK_KEY} = window.Applicaster.${APPLICASTER_CALLBACK_KEY} || {};
+
+  var ${INVOKE_APPLICASTER_CALLBACK} = function(key, args) {
+    var callback = window.Applicaster.${APPLICASTER_CALLBACK_KEY}[key];
+
+    var deleteCallback = true;
+    if (typeof callback === "function") {
+       var result = callback.apply(null, args);
+       if (result === false) {
+           deleteCallback = false;
+       }
+    }
+    if(deleteCallback) {
+       delete window.Applicaster.${APPLICASTER_CALLBACK_KEY}[key];
+    }
+  }
+
+  window.Applicaster.${INVOKE_APPLICASTER_CALLBACK} = ${INVOKE_APPLICASTER_CALLBACK};
+`;
+
+export function invokeWebCallback(key, args) {
+  const argsArray = Array.isArray(args) ? args : [args];
+  let stringifiedArgs = "[]";
+
+  try {
+    stringifiedArgs = JSON.stringify(argsArray);
+  } catch (e) {
+    try {
+      stringifiedArgs = JSON.stringify([
+        { error: "Failed to stringify arguments", details: e.message },
+      ]);
+    } catch {
+      stringifiedArgs = "[]";
+    }
+  }
+
+  return `
+    (function() {
+      var callbackFn = window.Applicaster && window.Applicaster.${APPLICASTER_CALLBACK_KEY};
+      if (callbackFn && typeof callbackFn["${key}"] === 'function') {
+        try {
+            setTimeout(function() {
+              callbackFn["${key}"].apply(null, ${stringifiedArgs});
+            }, 0);
+        } catch (e) {
+          console.error("Error invoking web callback ${key}:", e);
+        }
+      } else {
+         // console.warn("Web callback ${key} not found or not a function.");
+      }
+      return true;
+    })();
+  `;
+}
+
+const hookCallback = `
+  function hookCallback(options) {
+    var _opts = {};
+
+    if (typeof options !== "undefined") {
+      _opts = options;
+    }
+
+    var success = typeof _opts.success === 'boolean' ? _opts.success : false;
+    var error = _opts.error || undefined;
+    var payload = _opts.payload || undefined;
+
+    sendMessage("${JS_BRIDGE_EVENTS.DISMISS_HOOK}", {
+      success: success,
+      error: error,
+      payload: payload
+    })
+  };
+`;
+
+const uuid = `
+  function uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+  }
+`;
+
+const registerCallback = `
+  function registerCallback(cb, persistent) {
+    var index = uuid();
+    window.Applicaster = window.Applicaster || {};
+    window.Applicaster.${APPLICASTER_CALLBACK_KEY} = window.Applicaster.${APPLICASTER_CALLBACK_KEY} || {};
+
+    window.Applicaster.${APPLICASTER_CALLBACK_KEY}[index] = function() {
+       var result = cb.apply(null, arguments);
+       return persistent ? false : result;
+    };
+    return index;
+  }
+`;
+
+const getSetStorage = `
+  function getSetStorage(type, payload) {
+    return new Promise(function(resolve, reject) {
+      var index = registerCallback(function(result) {
+         if (result && result.success === false) {
+           reject(result.error || new Error("Storage operation failed"));
+         } else {
+           resolve(result);
+         }
+      });
+      sendMessage(type, payload, index);
+    });
+  }
+`;
+
+const getInSessionStorage = `
+  function ${getSessionStorageItem}(key, namespace) {
+    return getSetStorage(
+      "${JS_BRIDGE_EVENTS.GET_SESSION_STORAGE}",
+      { key: key, namespace: namespace }
+    );
+  }
+`;
+
+const setInSessionStorage = `
+  function ${setSessionStorageItem}(key, value, namespace) {
+    try {
+      JSON.stringify(value);
+      return getSetStorage(
+        "${JS_BRIDGE_EVENTS.SET_SESSION_STORAGE}",
+        { key: key, value: value, namespace: namespace }
+      );
+    } catch (e) {
+      return Promise.reject(new Error("Value is not serializable: " + e.message));
+    }
+  }
+`;
+
+const getInLocalStorage = `
+  function ${getLocalStorageItem}(key, namespace) {
+    return getSetStorage(
+      "${JS_BRIDGE_EVENTS.GET_LOCAL_STORAGE}",
+      { key: key, namespace: namespace }
+    );
+  }
+`;
+
+const setInLocalStorage = `
+  function ${setLocalStorageItem}(key, value, namespace) {
+    try {
+      JSON.stringify(value);
+      return getSetStorage(
+        "${JS_BRIDGE_EVENTS.SET_LOCAL_STORAGE}",
+        { key: key, value: value, namespace: namespace }
+      );
+     } catch (e) {
+      return Promise.reject(new Error("Value is not serializable: " + e.message));
+    }
+  }
+`;
+
+const getInSecureLocalStorage = `
+  function ${getSecureLocalStorageItem}(key, namespace) {
+    return getSetStorage(
+      "${JS_BRIDGE_EVENTS.GET_SECURE_LOCAL_STORAGE}",
+      { key: key, namespace: namespace }
+    );
+  }
+`;
+
+const setInSecureLocalStorage = `
+  function ${setSecureLocalStorageItem}(key, value, namespace) {
+     try {
+      JSON.stringify(value);
+      return getSetStorage(
+        "${JS_BRIDGE_EVENTS.SET_SECURE_LOCAL_STORAGE}",
+        { key: key, value: value, namespace: namespace }
+      );
+     } catch (e) {
+      return Promise.reject(new Error("Value is not serializable: " + e.message));
+    }
+  }
+`;
+
+const addSessionStorageListener = `
+  function ${addSessionStorageListenerFn}(optionsOrCallback, callback) {
+    var opts = {};
+    var cb = callback;
+
+    if (typeof optionsOrCallback === 'function') {
+      cb = optionsOrCallback;
+    } else if (typeof optionsOrCallback === 'object' && optionsOrCallback !== null) {
+      opts = optionsOrCallback;
+    } else if (optionsOrCallback !== undefined && optionsOrCallback !== null) {
+       console.error("Invalid arguments for addSessionStorageListener. Expected ({ key, namespace }, callback) or (callback).");
+       return function() {};
+    }
+
+    if (typeof cb !== 'function') {
+      console.error("addSessionStorageListener requires a callback function.");
+      return function() {};
+    }
+
+    var listenerId = registerCallback(cb, true);
+
+    sendMessage("${JS_BRIDGE_EVENTS.ADD_SESSION_STORAGE_LISTENER}", { key: opts.key, namespace: opts.namespace }, listenerId);
+
+    return function removeListener() {
+      sendMessage("${JS_BRIDGE_EVENTS.REMOVE_SESSION_STORAGE_LISTENER}", { listenerId: listenerId });
+      if (window.Applicaster && window.Applicaster.${APPLICASTER_CALLBACK_KEY}) {
+         delete window.Applicaster.${APPLICASTER_CALLBACK_KEY}[listenerId];
+      }
+    };
+  }
+`;
+
+const addLocalStorageListener = `
+  function ${addLocalStorageListenerFn}(optionsOrCallback, callback) {
+     var opts = {};
+     var cb = callback;
+
+    if (typeof optionsOrCallback === 'function') {
+      cb = optionsOrCallback;
+    } else if (typeof optionsOrCallback === 'object' && optionsOrCallback !== null) {
+      opts = optionsOrCallback;
+    } else if (optionsOrCallback !== undefined && optionsOrCallback !== null) {
+       console.error("Invalid arguments for addLocalStorageListener. Expected ({ key, namespace }, callback) or (callback).");
+       return function() {};
+    }
+
+    if (typeof cb !== 'function') {
+      console.error("addLocalStorageListener requires a callback function.");
+       return function() {};
+    }
+
+    var listenerId = registerCallback(cb, true);
+
+    sendMessage("${JS_BRIDGE_EVENTS.ADD_LOCAL_STORAGE_LISTENER}", { key: opts.key, namespace: opts.namespace }, listenerId);
+
+    return function removeListener() {
+      sendMessage("${JS_BRIDGE_EVENTS.REMOVE_LOCAL_STORAGE_LISTENER}", { listenerId: listenerId });
+      if (window.Applicaster && window.Applicaster.${APPLICASTER_CALLBACK_KEY}) {
+         delete window.Applicaster.${APPLICASTER_CALLBACK_KEY}[listenerId];
+      }
+    };
+  }
+`;
+
+const closeWebview = `
+  function closeWebview() {
+    sendMessage("${JS_BRIDGE_EVENTS.CLOSE_WEBVIEW}")
+  }
+`;
+
+const navigateToScreen = `
+  function navigateToScreen(screenId) {
+    if(!screenId) { console.error("navigateToScreen requires a screenId"); return; }
+    sendMessage("${JS_BRIDGE_EVENTS.NAVIGATE_TO_SCREEN}", { screenId: screenId });
+  }
+`;
+
+const navigateToEntry = `
+  function navigateToEntry(entry) {
+     if(!entry) { console.error("navigateToEntry requires an entry object"); return; }
+    sendMessage("${JS_BRIDGE_EVENTS.NAVIGATE_TO_ENTRY}", { entry: entry });
+  }
+`;
+
+const openUrlScheme = `
+  function openUrlScheme(url) {
+     if(!url || typeof url !== 'string') { console.error("openUrlScheme requires a valid URL string"); return; }
+    sendMessage("${JS_BRIDGE_EVENTS.OPEN_URL_SCHEME}", { url: url });
+  }
+`;
+
+const runInvokeShare = `
+  function invokeShare(item, options) {
+    if(!item) { console.error("invokeShare requires an item object"); return; }
+    sendMessage("${JS_BRIDGE_EVENTS.OPEN_NATIVE_SHARE}", { item: item, options: options });
+  }
+`;
+
+const initializeBridge = (payload, hookPlugin, screens, safeAreaInsets) => `
+  (function() {
+    window.Applicaster = window.Applicaster || {};
+
+    ${sendMessage}
+    ${consolePolyfill}
+    ${hookCallback}
+    ${uuid}
+    ${callbackHandling}
+    ${registerCallback}
+    ${getSetStorage}
+    ${getInSessionStorage}
+    ${setInSessionStorage}
+    ${getInLocalStorage}
+    ${setInLocalStorage}
+    ${getInSecureLocalStorage}
+    ${setInSecureLocalStorage}
+    ${addSessionStorageListener}
+    ${addLocalStorageListener}
+    ${closeWebview}
+    ${navigateToScreen}
+    ${navigateToEntry}
+    ${openUrlScheme}
+    ${runInvokeShare}
+
+    var JS2Native = {
+      screenHook: {
+        data: {
+          payload: (function() { try { return JSON.parse(${payload}); } catch(e) { console.error('Failed to parse screenHook payload:', e); return null; } })(),
+          plugin: (function() { try { return JSON.parse(${hookPlugin}); } catch(e) { console.error('Failed to parse screenHook plugin:', e); return null; } })()
+        },
+        callback: hookCallback
+      },
+      sessionStorage: {
+        getItem: ${getSessionStorageItem},
+        setItem: ${setSessionStorageItem},
+        addListener: ${addSessionStorageListenerFn}
+      },
+      localStorage: {
+        getItem: ${getLocalStorageItem},
+        setItem: ${setLocalStorageItem},
+        getSecuredItem: ${getSecureLocalStorageItem},
+        setSecuredItem: ${setSecureLocalStorageItem},
+        addListener: ${addLocalStorageListenerFn}
+      },
+      nativeEnvironment: true,
+      navigation: {
+        closeWebview: closeWebview,
+        navigateToScreen: navigateToScreen,
+        navigateToEntry: navigateToEntry,
+        screens: (function() { try { return JSON.parse(${screens}); } catch(e) { console.error('Failed to parse navigation screens:', e); return []; } })(),
+        openUrlScheme: openUrlScheme
+      },
+      safeAreaInsets: (function() { try { return JSON.parse(${safeAreaInsets}); } catch(e) { console.error('Failed to parse safeAreaInsets:', e); return {}; } })(),
+      nativeShare: invokeShare
+    };
+
+    window.Applicaster.JS2Native = JS2Native;
+    window.JS2Native = JS2Native;
+
+    return JS2Native;
+  })();
+`;
+
+export const jsBridge = (hooksProps, screens, safeAreaInsets) => `
+  var Applicaster = window.Applicaster || {};
+  window.Applicaster = Applicaster;
+
+  ${initializeBridge(
+    JSON.stringify(hooksProps?.payload),
+    JSON.stringify(hooksProps?.hookPlugin),
+    JSON.stringify(Object.values(screens || {})),
+    JSON.stringify(safeAreaInsets || {})
+  )}
+
+  true;
+`;
+
+// handler for removing listeners
+async function removeStorageListenerHandler(payload: { listenerId?: string }) {
+  const { listenerId } = payload || {};
+
+  if (!listenerId) {
+    return;
+  }
+
+  const removeListener = activeListeners[listenerId];
+
+  if (removeListener) {
+    try {
+      removeListener();
+      delete activeListeners[listenerId];
+    } catch (error) {
+      //
+    }
+  }
+}
+
+function log({ level, messages }) {
+  try {
+    const parsedMessages = parseJsonIfNeeded(messages);
+    const logFn = console[level] || console.log;
+
+    if (Array.isArray(parsedMessages)) {
+      logFn("JS LOG:", ...parsedMessages);
+    } else {
+      logFn("JS LOG:", parsedMessages);
+    }
+  } catch (e) {
+    // console.error("Error parsing or logging JS message:", e, messages);
+  }
+}
+
+async function storageGetItem({ key, namespace }) {
+  try {
+    const result = await sessionStorage.getItem(key, namespace);
+
+    return { success: true, value: result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function storageSetItem({ key, value, namespace }) {
+  try {
+    const result = await sessionStorage.setItem(key, value, namespace);
+
+    return { success: !!result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function localStorageGetItem({ key, namespace }) {
+  try {
+    const result = await localStorage.getItem(key, namespace);
+
+    return { success: true, value: result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function localStorageSetItem({ key, value, namespace }) {
+  try {
+    const result = await localStorage.setItem(key, value, namespace);
+
+    return { success: !!result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function secureStorageGetItem({ key, namespace }) {
+  try {
+    const result = await localStorage.getKeychainItem(key, namespace);
+
+    return { success: true, value: result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function secureStorageSetItem({ key, value, namespace }) {
+  try {
+    const result = await localStorage.setKeychainItem(key, value, namespace);
+
+    return { success: !!result };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+// handler for adding listeners
+async function addStorageListenerHandler(
+  storageType: "local" | "session",
+  payload: { key?: string; namespace?: string },
+  callbackKey: string,
+  webViewRef: React.RefObject<any>
+) {
+  if (!webViewRef?.current?.injectJavaScript) {
+    return;
+  }
+
+  const storage = storageType === "local" ? localStorage : sessionStorage;
+  const { key, namespace } = payload || {};
+
+  const listenerCallback = (eventData: {
+    key: string;
+    namespace: string;
+    value: any;
+  }) => {
+    const run = invokeWebCallback(callbackKey, [eventData]);
+
+    if (webViewRef?.current?.injectJavaScript) {
+      webViewRef.current.injectJavaScript(run);
+    } else {
+      removeStorageListenerHandler({ listenerId: callbackKey });
+    }
+  };
+
+  try {
+    const removeListener = storage.addListener(
+      { key, namespace },
+      listenerCallback
+    );
+
+    activeListeners[callbackKey] = removeListener;
+  } catch (error) {
+    const errorRun = invokeWebCallback(callbackKey, [
+      { success: false, error: `Failed to add listener: ${error.message}` },
+    ]);
+
+    if (webViewRef?.current?.injectJavaScript) {
+      webViewRef.current.injectJavaScript(errorRun);
+
+      webViewRef.current.injectJavaScript(
+        `delete window.Applicaster.${APPLICASTER_CALLBACK_KEY}['${callbackKey}']; true;`
+      );
+    }
+
+    delete activeListeners[callbackKey];
+  }
+}
+
+export function resolveBridgeAction(
+  type: string,
+  webViewRef: React.RefObject<any>
+) {
+  switch (type) {
+    case JS_BRIDGE_EVENTS.LOG:
+      return (payload) => log(payload);
+
+    case JS_BRIDGE_EVENTS.GET_SESSION_STORAGE:
+      return storageGetItem;
+    case JS_BRIDGE_EVENTS.SET_SESSION_STORAGE:
+      return storageSetItem;
+    case JS_BRIDGE_EVENTS.GET_LOCAL_STORAGE:
+      return localStorageGetItem;
+    case JS_BRIDGE_EVENTS.SET_LOCAL_STORAGE:
+      return localStorageSetItem;
+    case JS_BRIDGE_EVENTS.GET_SECURE_LOCAL_STORAGE:
+      return secureStorageGetItem;
+    case JS_BRIDGE_EVENTS.SET_SECURE_LOCAL_STORAGE:
+      return secureStorageSetItem;
+
+    case JS_BRIDGE_EVENTS.ADD_LOCAL_STORAGE_LISTENER:
+      return (payload, callbackKey) =>
+        addStorageListenerHandler("local", payload, callbackKey, webViewRef);
+
+    case JS_BRIDGE_EVENTS.REMOVE_LOCAL_STORAGE_LISTENER:
+      return (payload) => removeStorageListenerHandler(payload);
+
+    case JS_BRIDGE_EVENTS.ADD_SESSION_STORAGE_LISTENER:
+      return (payload, callbackKey) =>
+        addStorageListenerHandler("session", payload, callbackKey, webViewRef);
+
+    case JS_BRIDGE_EVENTS.REMOVE_SESSION_STORAGE_LISTENER:
+      return (payload) => removeStorageListenerHandler(payload);
+
+    default:
+      return async (_payload, callbackKey) => {
+        if (callbackKey && webViewRef?.current?.injectJavaScript) {
+          const errorResult = {
+            success: false,
+            error: `Unknown action type: ${type}`,
+          };
+
+          const errorRun = invokeWebCallback(callbackKey, [errorResult]);
+          webViewRef.current.injectJavaScript(errorRun);
+        }
+
+        return Promise.reject(new Error(`Unknown action type: ${type}`));
+      };
+  }
+}