@applicaster/zapp-react-native-utils 14.0.0-alpha.1430213104 → 14.0.0-alpha.1661204539

package/actionsExecutor/ActionExecutorContext.tsx

@@ -16,7 +16,6 @@ import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickB
 import { showConfirmationDialog } from "../alertUtils";
 import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
@@ -25,15 +24,20 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation } from "../reactHooks";
-import { get } from "lodash";
 
 import {
   useContentTypes,
   usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
-import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
-import { postEvent, useSubscriberFor } from "../reactHooks/useSubscriberFor";
+import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
 import { APP_EVENTS } from "../appUtils/events";
+import {
+  localStorageToggleFlag,
+  sessionStorageToggleFlag,
+} from "./StorageActions";
+
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -82,19 +86,6 @@ function findParentComponent(
   return null;
 }
 
-// send all data just in case (like for message string formatting)
-// Type is not exported for now
-type MaxTagsReachedEvent = {
-  selectedItems: string[];
-  maxItems: number;
-  tag: string;
-  keyNamespace: string;
-};
-
-async function onMaxTagsReached(data: MaxTagsReachedEvent) {
-  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
-}
-
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -178,10 +169,16 @@ const prepareDefaultActions = (actionExecutor) => {
 
       const entry = context?.entry || {};
       const entryResolver = new EntryResolver(entry);
+      const route = context.screenRoute;
+      const screenData = ScreenSingleValueProvider.getState(route) as any;
+      const screenResolver = new EntryResolver(screenData || {});
 
       const data =
         options?.data && options.inflateData
-          ? await resolveObjectValues(options.data, { entry: entryResolver })
+          ? await resolveObjectValues(options.data, {
+              entry: entryResolver,
+              screen: screenResolver,
+            })
           : options?.data || entry;
 
       const cloudEvent = await createCloudEvent({
@@ -216,80 +213,54 @@ const prepareDefaultActions = (actionExecutor) => {
   });
 
   actionExecutor.registerAction(
-    "localStorageToggleFlag",
+    "sessionStorageToggleFlag",
     async (
       action: ActionType,
       context?: Record<string, any>
     ): Promise<ActionResult> => {
-      if (!context) {
-        log_error(
-          "handleAction: localStorageToggleFlag action missing context"
-        );
-
-        return ActionResult.Error;
-      }
-
-      const entry = context?.entry as ZappEntry;
-
-      if (!entry) {
-        log_error(
-          "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
-        );
-
-        return ActionResult.Error;
-      }
-
-      const tag = action.options?.selector
-        ? get(entry, action.options.selector)
-        : (entry.extensions?.tag ?? entry.id);
-
-      const keyNamespace = action.options?.key;
-
-      if (keyNamespace && tag) {
-        const multiSelectProvider =
-          StorageMultiSelectProvider.getProvider(keyNamespace);
-
-        const selectedItems = await multiSelectProvider.getSelectedAsync();
-        const isTagInSelectedItems = selectedItems.includes(tag);
-
-        log_info(
-          `handleAction: localStorageToggleFlag event will ${
-            isTagInSelectedItems ? "remove" : "add"
-          } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
-        );
-
-        if (selectedItems.includes(tag)) {
-          await multiSelectProvider.removeItem(tag);
-        } else {
-          const maxItems = action.options?.max_items;
+      return await sessionStorageToggleFlag(context, action);
+    }
+  );
 
-          if (maxItems && selectedItems.length >= maxItems) {
-            log_info(
-              `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
-            );
+  actionExecutor.registerAction(
+    "localStorageToggleFlag",
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
+      return await localStorageToggleFlag(context, action);
+    }
+  );
 
-            await onMaxTagsReached({
-              selectedItems,
-              maxItems,
-              tag,
-              keyNamespace,
-            });
+  actionExecutor.registerAction(
+    "screenSetVariable",
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
+      const route = context?.screenRoute;
+      const { key, value } = action.options;
+      screenSetVariable(route, key, value);
 
-            return ActionResult.Cancel;
-          }
+      return Promise.resolve(ActionResult.Success);
+    }
+  );
 
-          await multiSelectProvider.addItem(tag);
-        }
-      } else {
-        log_error(
-          "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
-          { keyNamespace, tag }
-        );
+  actionExecutor.registerAction(
+    "screenToggleFlag",
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
+      const screenRoute = context?.screenRoute;
 
-        return ActionResult.Error;
-      }
+      await screenToggleFlag(
+        screenRoute,
+        { entry: context?.entry, options: action.options },
+        action
+      );
 
-      return ActionResult.Success;
+      return Promise.resolve(ActionResult.Success);
     }
   );
 };

package/actionsExecutor/ScreenActions.ts

@@ -0,0 +1,90 @@
+// import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+
+import { log_error, log_info } from "./ActionExecutorContext";
+import { ActionResult } from "./ActionExecutor";
+import { get } from "lodash";
+
+import { onMaxTagsReached } from "./StorageActions";
+import { ScreenMultiSelectProvider } from "../storage/ScreenStateMultiSelectProvider";
+
+export const screenSetVariable = (
+  _screenRoute: string,
+  _key: string,
+  _value: string
+) => {};
+
+export const screenToggleFlag = async (
+  screenRoute: string,
+  context: Record<string, any>,
+  action: ActionType
+) => {
+  if (!context) {
+    log_error("handleAction: localStorageToggleFlag action missing context");
+
+    return ActionResult.Error;
+  }
+
+  const entry = context?.entry as ZappEntry;
+
+  if (!entry) {
+    log_error(
+      "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+    );
+
+    return ActionResult.Error;
+  }
+
+  const tag = action.options?.selector
+    ? get(entry, action.options.selector)
+    : (entry.extensions?.tag ?? entry.id);
+
+  const keyNamespace = action.options?.key;
+
+  if (keyNamespace && tag) {
+    const multiSelectProvider = ScreenMultiSelectProvider.getProvider(
+      keyNamespace,
+      screenRoute
+    );
+
+    const selectedItems = await multiSelectProvider.getSelectedAsync();
+    const isTagInSelectedItems = selectedItems.includes(tag);
+
+    log_info(
+      `handleAction: screenToggleFlag event will ${
+        isTagInSelectedItems ? "remove" : "add"
+      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+    );
+
+    if (selectedItems.includes(tag)) {
+      await multiSelectProvider.removeItem(tag);
+    } else {
+      const maxItems = action.options?.max_items;
+
+      if (maxItems && selectedItems.length >= maxItems) {
+        log_info(
+          `handleAction: screenToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+        );
+
+        await onMaxTagsReached({
+          selectedItems,
+          maxItems,
+          tag,
+          keyNamespace,
+        });
+
+        return ActionResult.Cancel;
+      }
+
+      await multiSelectProvider.addItem(tag);
+    }
+  } else {
+    log_error(
+      "handleAction: screenToggleFlag event missing keyNamespace or tag",
+      { keyNamespace, tag }
+    );
+
+    return ActionResult.Error;
+  }
+
+  return ActionResult.Success;
+};

package/actionsExecutor/StorageActions.ts

@@ -0,0 +1,110 @@
+import { ActionResult } from "./ActionExecutor";
+import { get } from "lodash";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
+import { log_error, log_info } from "./ActionExecutorContext";
+import { postEvent } from "../reactHooks/useSubscriberFor";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
+import { StorageType } from "../appUtils/contextKeysManager/consts";
+
+// send all data just in case (like for message string formatting)
+// Type is not exported for now
+type MaxTagsReachedEvent = {
+  selectedItems: string[];
+  maxItems: number;
+  tag: string;
+  keyNamespace: string;
+};
+
+export async function onMaxTagsReached(data: MaxTagsReachedEvent) {
+  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
+}
+
+export async function storageToggleFlag(
+  context: Record<string, any>,
+  action: ActionType,
+  storageType: StorageType
+) {
+  if (!context) {
+    log_error("handleAction: localStorageToggleFlag action missing context");
+
+    return ActionResult.Error;
+  }
+
+  const entry = context?.entry as ZappEntry;
+
+  if (!entry) {
+    log_error(
+      "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+    );
+
+    return ActionResult.Error;
+  }
+
+  const tag = action.options?.selector
+    ? get(entry, action.options.selector)
+    : (entry.extensions?.tag ?? entry.id);
+
+  const keyNamespace = action.options?.key;
+
+  if (keyNamespace && tag) {
+    const multiSelectProvider = StorageMultiSelectProvider.getProvider(
+      keyNamespace,
+      storageType
+    );
+
+    const selectedItems = await multiSelectProvider.getSelectedAsync();
+    const isTagInSelectedItems = selectedItems.includes(tag);
+
+    log_info(
+      `handleAction: localStorageToggleFlag event will ${
+        isTagInSelectedItems ? "remove" : "add"
+      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+    );
+
+    if (selectedItems.includes(tag)) {
+      await multiSelectProvider.removeItem(tag);
+    } else {
+      const maxItems = action.options?.max_items;
+
+      if (maxItems && selectedItems.length >= maxItems) {
+        log_info(
+          `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+        );
+
+        await onMaxTagsReached({
+          selectedItems,
+          maxItems,
+          tag,
+          keyNamespace,
+        });
+
+        return ActionResult.Cancel;
+      }
+
+      await multiSelectProvider.addItem(tag);
+    }
+  } else {
+    log_error(
+      "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
+      { keyNamespace, tag }
+    );
+
+    return ActionResult.Error;
+  }
+
+  return ActionResult.Success;
+}
+
+export async function sessionStorageToggleFlag(
+  context: Record<string, any>,
+  action: ActionType
+) {
+  return storageToggleFlag(context, action, StorageType.session);
+}
+
+export async function localStorageToggleFlag(
+  context: Record<string, any>,
+  action: ActionType
+) {
+  return storageToggleFlag(context, action, StorageType.local);
+}

package/actionsExecutor/screenResolver.ts

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { ScreenStateResolver } from "../appUtils/contextKeysManager/contextResolver";
+
+export const useScreenResolvers = (screenRoute: string) => {
+  return useMemo(() => {
+    return { screen: new ScreenStateResolver(screenRoute) };
+  }, [screenRoute]);
+};

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,10 +1,12 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import { screenStates } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
 
-interface IResolver {
+export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
+// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -21,6 +23,18 @@ export class EntryResolver implements IResolver {
   }
 }
 
+// TODO: Move to proper place
+
+export class ScreenStateResolver implements IResolver {
+  constructor(private route: string) {}
+
+  async resolve(key: string) {
+    const screenState = screenStates[this.route];
+
+    return screenState?.[key];
+  }
+}
+
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.1430213104",
+  "version": "14.0.0-alpha.1661204539",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.1430213104",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1661204539",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/index.ts

@@ -1,8 +1,6 @@
 import * as R from "ramda";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { isString } from "@applicaster/zapp-react-native-utils/typeGuards";
-import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
 
@@ -91,7 +89,3 @@ export const isAudioItem = (item: Option<ZappEntry>) => {
 
   return false;
 };
-
-export const isInlineTV = (screenData) => {
-  return isTV() && isFilledArray(screenData?.ui_components);
-};

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -46,6 +46,7 @@ export const useCellClick = ({
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +84,8 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
         });
       }
 
@@ -117,6 +120,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

package/reactHooks/feed/useFeedLoader.tsx

@@ -8,6 +8,7 @@ import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -50,7 +51,8 @@ export const useFeedLoader = ({
 
   const isInitialRender = useIsInitialRender();
   const dispatch = useDispatch();
-  const { screenData } = useRoute();
+  const { screenData, pathname } = useRoute();
+  const resolvers = useScreenResolvers(pathname);
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -69,11 +71,12 @@ export const useFeedLoader = ({
             silentRefresh,
             callback,
             riverId,
+            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl]
+    [callableFeedUrl, resolvers]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -86,11 +89,12 @@ export const useFeedLoader = ({
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
+            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next]);
+  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
 
   useEffect(() => {
     if (
@@ -102,6 +106,7 @@ export const useFeedLoader = ({
             ...pipesOptions,
             clearCache: true,
             riverId,
+            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -126,14 +131,16 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, []);
+  }, [resolvers]);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        loadPipesData(callableFeedUrl, { ...pipesOptions, riverId, resolvers })
+      );
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, resolvers]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/storage/ScreenSingleValueProvider.ts

@@ -0,0 +1,92 @@
+import { BehaviorSubject } from "rxjs";
+import { log_debug, SingleValueProvider } from "./StorageSingleSelectProvider";
+
+export const screenStates: Record<string, Record<string, string>> = {};
+
+export class ScreenSingleValueProvider implements SingleValueProvider {
+  private static providers: Record<
+    string,
+    Record<string, SingleValueProvider>
+  > = {};
+
+  // TODO: Screen State should be stored outside of this class and should be shared with screen multi-select provider
+  public static getState(screenRoute: string): Record<string, string> {
+    return screenStates[screenRoute] || {};
+  }
+
+  public static getProvider(
+    key: string,
+    screenRoute: string
+  ): SingleValueProvider {
+    if (!key) {
+      throw new Error("ScreenSingleValueProvider: Key is required");
+    }
+
+    if (!screenRoute) {
+      throw new Error("ScreenSingleValueProvider: Screen route is required");
+    }
+
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
+    }
+
+    if (!this.providers[screenRoute][key]) {
+      this.providers[screenRoute][key] = new ScreenSingleValueProvider(
+        key,
+        screenRoute
+      );
+    }
+
+    if (!screenStates[screenRoute]) {
+      screenStates[screenRoute] = {};
+    }
+
+    return this.providers[screenRoute][key];
+  }
+
+  // @ts-ignore
+  private valueSubject: BehaviorSubject<string | null>;
+  p;
+  // @ts-ignore
+  private constructor(
+    private key: string,
+    private route: string
+  ) {
+    if (!key) {
+      throw new Error("ScreenSingleValueProvider: Key is required");
+    }
+
+    // localStorage.addListener?.({ key, namespace }, this.reloadValue);
+
+    this.valueSubject = new BehaviorSubject<string | null>(null);
+
+    void this.getValueAsync();
+    log_debug("ScreenSingleValueProvider: Initializing");
+  }
+
+  clearValue(): Promise<void> {
+    delete [this.route][this.key];
+    this.valueSubject.next(null);
+
+    return Promise.resolve();
+  }
+
+  getObservable(): BehaviorSubject<string | null> {
+    return this.valueSubject;
+  }
+
+  getValue(): string | null {
+    return this.valueSubject.value;
+  }
+
+  getValueAsync(): Promise<string | null> {
+    return Promise.resolve(this.valueSubject.value);
+  }
+
+  setValue(value: string): Promise<void> {
+    screenStates[this.route][this.key] = value;
+    this.valueSubject.next(value);
+
+    return Promise.resolve();
+  }
+}

package/storage/ScreenStateMultiSelectProvider.ts

@@ -0,0 +1,119 @@
+import { log_debug, MultiSelectProvider } from "./StorageMultiSelectProvider";
+import { BehaviorSubject } from "rxjs";
+import { screenStates } from "./ScreenSingleValueProvider";
+
+export class ScreenMultiSelectProvider implements MultiSelectProvider {
+  // @ts-ignore
+  private itemSubject: BehaviorSubject<string[] | null>;
+
+  private static providers: Record<
+    string,
+    Record<string, MultiSelectProvider>
+  > = {};
+
+  public static getProvider(
+    key: string,
+    screenRoute: string
+  ): MultiSelectProvider {
+    if (!key) {
+      throw new Error("ScreenSingleValueProvider: Key is required");
+    }
+
+    if (!screenRoute) {
+      throw new Error("ScreenSingleValueProvider: Screen route is required");
+    }
+
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
+    }
+
+    if (!this.providers[screenRoute][key]) {
+      this.providers[screenRoute][key] = new ScreenMultiSelectProvider(
+        key,
+        screenRoute
+      );
+    }
+
+    if (!screenStates[screenRoute]) {
+      screenStates[screenRoute] = {};
+    }
+
+    return this.providers[screenRoute][key];
+  }
+
+  // @ts-ignore
+  private constructor(
+    private key: string,
+    private route: string
+  ) {
+    if (!key) {
+      throw new Error("StorageMultiSelectProvider: Key is required");
+    }
+
+    this.key = key;
+    // this.storage.addListener?.({ key, namespace }, this.reloadItems);
+
+    this.itemSubject = new BehaviorSubject([]);
+
+    void this.getSelectedAsync();
+    log_debug("StorageMultiSelectProvider: Initializing");
+  }
+
+  private getSetOfCurrentItems() {
+    const currentResult: string = screenStates[this.route][this.key];
+
+    return new Set(currentResult ? currentResult.split(",") : []);
+  }
+
+  addItem(item: string): Promise<void> {
+    const items = this.getSetOfCurrentItems();
+    items.add(item);
+    screenStates[this.route][this.key] = Array.from(items).join(",");
+    this.itemSubject.next(Array.from(items) || []);
+
+    log_debug(
+      `addItem: item added: ${item}, current items: ${Array.from(items)}`
+    );
+
+    return Promise.resolve();
+  }
+
+  addItems(_items: string[]): Promise<void> {
+    return Promise.resolve();
+  }
+
+  public getObservable = (): BehaviorSubject<string[]> => this.itemSubject;
+
+  getSelectedAsync(): Promise<string[]> {
+    const values = screenStates[this.route][this.key]?.split(",");
+    this.itemSubject.next(values || []);
+
+    return Promise.resolve(values || []);
+  }
+
+  getSelectedItems(): string[] {
+    return this.itemSubject.value;
+  }
+
+  removeAllItems(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  removeItem(item: string): Promise<void> {
+    const items = this.getSetOfCurrentItems();
+    items.delete(item);
+
+    screenStates[this.route][this.key] = Array.from(items).join(",");
+    this.itemSubject.next(Array.from(items) || []);
+
+    return Promise.resolve();
+  }
+
+  removeItems(_items: string[]): Promise<void> {
+    return Promise.resolve();
+  }
+
+  setSelectedItems(_items: string[]): Promise<void> {
+    return Promise.resolve();
+  }
+}

package/storage/StorageMultiSelectProvider.ts

@@ -0,0 +1,192 @@
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+import { BehaviorSubject } from "rxjs";
+import { Storage } from "@applicaster/zapp-react-native-bridge/ZappStorage/Storage";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { StorageType } from "../appUtils/contextKeysManager/consts";
+import { getNamespaceAndKey } from "../appUtils/contextKeysManager/utils";
+import { createLogger } from "../logger";
+
+export const { log_verbose, log_debug, log_warning, log_info, log_error } =
+  createLogger({
+    category: "StorageMultiSelectProvider",
+    subsystem: "zapp-react-native-bridge",
+    parent: bridgeLogger,
+  });
+
+export interface MultiSelectProvider {
+  getObservable(): BehaviorSubject<string[]>;
+
+  addItem(item: string): Promise<void>;
+
+  addItems(items: string[]): Promise<void>;
+
+  setSelectedItems(items: string[]): Promise<void>;
+
+  removeItem(item: string): Promise<void>;
+
+  removeItems(items: string[]): Promise<void>;
+
+  removeAllItems(): Promise<void>;
+
+  getSelectedItems(): string[];
+
+  getSelectedAsync(): Promise<string[]>;
+}
+
+export class StorageMultiSelectProvider implements MultiSelectProvider {
+  // TODO: Unsubscribe and remove when there is no listeners
+  private static multiSelectProviders: Record<
+    StorageType,
+    Record<string, StorageMultiSelectProvider>
+  > = {
+    [StorageType.local]: {},
+    [StorageType.session]: {},
+    // TODO: not implemented yet
+    [StorageType.secure]: {},
+  };
+
+  public static getProvider(
+    keyNamespace: string,
+    storage: StorageType = StorageType.local
+  ): MultiSelectProvider {
+    if (!this.multiSelectProviders[storage][keyNamespace]) {
+      const storageImpl =
+        storage === StorageType.session ? sessionStorage : localStorage;
+
+      this.multiSelectProviders[storage][keyNamespace] =
+        new StorageMultiSelectProvider(keyNamespace, storageImpl);
+    }
+
+    return this.multiSelectProviders[storage][keyNamespace];
+  }
+
+  private itemSubject: BehaviorSubject<string[] | null>;
+
+  private readonly key: string;
+  private readonly namespace: string;
+
+  private constructor(
+    keyNamespace: string,
+    private storage: Storage
+  ) {
+    const { namespace, key } = getNamespaceAndKey(keyNamespace);
+
+    if (!key) {
+      throw new Error("StorageMultiSelectProvider: Key is required");
+    }
+
+    this.key = key;
+    this.namespace = namespace;
+    this.storage.addListener?.({ key, namespace }, this.reloadItems);
+
+    this.itemSubject = new BehaviorSubject([]);
+
+    void this.getSelectedAsync();
+    log_debug("StorageMultiSelectProvider: Initializing");
+  }
+
+  private reloadItems = async ({ value }: StorageListenerArgs) => {
+    const selectedItems = value ? value.split(",") : [];
+
+    log_debug(
+      `reloadItems: request to reload items for value: ${value}`,
+      selectedItems
+    );
+
+    this.itemSubject.next(selectedItems);
+  };
+
+  public getObservable = (): BehaviorSubject<string[]> => this.itemSubject;
+
+  private async getSetOfCurrentItems() {
+    const currentResult: string = await this.storage.getItem(
+      this.key,
+      this.namespace
+    );
+
+    return new Set(currentResult ? currentResult.split(",") : []);
+  }
+
+  private async updateItemsAndNotifyObservers(currentItems: Set<string>) {
+    const arrayOfItems = Array.from(currentItems);
+    const newValue = arrayOfItems.join(",");
+    await this.storage.setItem(this.key, newValue, this.namespace);
+
+    this.itemSubject.next(arrayOfItems);
+  }
+
+  public addItem = async (item: string): Promise<void> => {
+    const currentItems = await this.getSetOfCurrentItems();
+    currentItems.add(item);
+    log_debug(`addItem: Adding new item: ${item}`);
+
+    await this.updateItemsAndNotifyObservers(currentItems);
+  };
+
+  public addItems = async (items: string[]): Promise<void> => {
+    const currentItems = await this.getSetOfCurrentItems();
+
+    items.forEach((item) => currentItems.add(item));
+
+    log_debug(
+      `addItems: Adding new items: ${items.join(
+        ","
+      )}, current items: ${Array.from(currentItems).join(",")}`
+    );
+
+    await this.updateItemsAndNotifyObservers(currentItems);
+  };
+
+  public removeItem = async (item: string): Promise<void> => {
+    const currentItems = await this.getSetOfCurrentItems();
+    currentItems.delete(item);
+
+    log_debug(
+      `removeItem: Removing item: ${item}, current items: ${Array.from(
+        currentItems
+      ).join(",")}`
+    );
+
+    await this.updateItemsAndNotifyObservers(currentItems);
+  };
+
+  public removeItems = async (items: string[]): Promise<void> => {
+    const currentItems = await this.getSetOfCurrentItems();
+
+    items.forEach((item) => currentItems.delete(item));
+
+    log_debug(
+      `removeItems: Removing items: ${items.join(
+        ","
+      )}, current items: ${Array.from(currentItems).join(",")}`
+    );
+
+    await this.updateItemsAndNotifyObservers(currentItems);
+  };
+
+  public removeAllItems = async (): Promise<void> => {
+    await this.storage.removeItem(this.key, this.namespace);
+    log_debug(`removeAllItems: Removing all items, current items: ${[]}`);
+
+    this.itemSubject.next([]);
+  };
+
+  public getSelectedAsync = async (): Promise<string[]> => {
+    const value = await this.storage.getItem(this.key, this.namespace);
+    const selectedItems = value ? value.split(",") : [];
+    this.itemSubject.next(selectedItems);
+
+    return selectedItems;
+  };
+
+  public getSelectedItems = (): string[] => {
+    return this.itemSubject.getValue();
+  };
+
+  setSelectedItems = async (items: string[]): Promise<void> => {
+    log_debug(`setSelectedItems: Setting selected items: ${items.join(",")}`);
+
+    await this.updateItemsAndNotifyObservers(new Set(items));
+  };
+}

package/storage/StorageSingleSelectProvider.ts

@@ -0,0 +1,108 @@
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { getNamespaceAndKey } from "../appUtils/contextKeysManager/utils";
+import { createLogger } from "../logger";
+
+export const { log_verbose, log_debug, log_warning, log_info, log_error } =
+  createLogger({
+    category: "StorageSingleValueProvider",
+    subsystem: "zapp-react-native-bridge",
+    parent: bridgeLogger,
+  });
+
+export interface SingleValueProvider {
+  getObservable(): BehaviorSubject<string | null>;
+
+  setValue(value: string): Promise<void>;
+  getValue(): string | null;
+  getValueAsync(): Promise<string | null>;
+  clearValue(): Promise<void>;
+}
+
+interface StorageListenerArgs {
+  value: string | null;
+}
+
+export class StorageSingleValueProvider implements SingleValueProvider {
+  // Static cache of providers by namespace
+  private static singleValueProviders: Record<
+    string,
+    StorageSingleValueProvider
+  > = {};
+
+  public static getProvider(keyNamespace: string): SingleValueProvider {
+    if (!this.singleValueProviders[keyNamespace]) {
+      this.singleValueProviders[keyNamespace] = new StorageSingleValueProvider(
+        keyNamespace
+      );
+    }
+
+    return this.singleValueProviders[keyNamespace];
+  }
+
+  private valueSubject: BehaviorSubject<string | null>;
+
+  private readonly key: string;
+  private readonly namespace: string;
+
+  private constructor(keyNamespace: string) {
+    const { namespace, key } = getNamespaceAndKey(keyNamespace);
+
+    if (!key) {
+      throw new Error("StorageSingleValueProvider: Key is required");
+    }
+
+    this.key = key;
+    this.namespace = namespace;
+    localStorage.addListener?.({ key, namespace }, this.reloadValue);
+
+    this.valueSubject = new BehaviorSubject<string | null>(null);
+
+    void this.getValueAsync();
+    log_debug("StorageSingleValueProvider: Initializing");
+  }
+
+  private reloadValue = async ({ value }: StorageListenerArgs) => {
+    log_debug(`reloadValue: request to reload value: ${value}`);
+
+    this.valueSubject.next(value);
+  };
+
+  public getObservable = (): BehaviorSubject<string | null> =>
+    this.valueSubject;
+
+  private async updateValueAndNotifyObservers(value: string | null) {
+    if (value === null) {
+      await localStorage.removeItem(this.key, this.namespace);
+    } else {
+      await localStorage.setItem(this.key, value, this.namespace);
+    }
+
+    this.valueSubject.next(value);
+  }
+
+  public setValue = async (value: string): Promise<void> => {
+    log_debug(`setValue: Setting new value: ${value}`);
+
+    await this.updateValueAndNotifyObservers(value);
+  };
+
+  public clearValue = async (): Promise<void> => {
+    await localStorage.removeItem(this.key, this.namespace);
+    log_debug("clearValue: Removing value");
+
+    this.valueSubject.next(null);
+  };
+
+  public getValueAsync = async (): Promise<string | null> => {
+    const value = await localStorage.getItem(this.key, this.namespace);
+    this.valueSubject.next(value);
+
+    return value;
+  };
+
+  public getValue = (): string | null => {
+    return this.valueSubject.getValue();
+  };
+}