@applicaster/zapp-react-native-utils/reactHooks/navigation/useUniqueRouteSuffix.ts

Applicaster Zapp React Native utilities package

import React from "react";
import { isWeb } from "../../reactUtils";
import { useNavigation } from "./useNavigation";
import { usePathname } from "./usePathname";
import {
  QUICK_BRICK_CONTENT,
  QUICK_BRICK_NAVBAR,
} from "@applicaster/quick-brick-core/const";

type Return = (prefix: string) => string;

export const useUniqueRouteSuffix = (): Return => {
  const pathname = usePathname();
  const { currentRoute } = useNavigation();

  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;

  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
    if (isWeb()) {
      // we should use extended route prefix only on Web, where we have stack-navigator
      return `${prefix}___${suffix}`;
    }

    // for other platforms use previous version
    return prefix;
  }, []);

  return withUniqueRouteSuffix;
};

export const useNavbarId = () => {
  const withUniqueRouteSuffix = useUniqueRouteSuffix();

  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
};

export const useContentId = () => {
  const withUniqueRouteSuffix = useUniqueRouteSuffix();

  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
};