@applicaster/zapp-react-native-ui-components/Components/Screen/TV/hooks/useInitialFocus.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import {
  useNavigationPluginData,
  useIsNavBarVisible,
  useRoute,
} from "@applicaster/zapp-react-native-utils/reactHooks";
import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
import {
  setFocusOnContent,
  setFocusOnMenu,
} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";

type Return =
  | {
      onContent: true;
      onMenu: false;
    }
  | {
      onContent: false;
      onMenu: true;
    };

const getInitialFocus = (focusOnContent, isNavBarVisible): Return => {
  if (focusOnContent) {
    return {
      onContent: true,
      onMenu: false,
    };
  }

  if (!focusOnContent && isNavBarVisible) {
    // put focus on navbar
    return {
      onContent: false,
      onMenu: true,
    };
  }

  // we don't have navbar, put focus on content anyway
  return {
    onContent: true,
    onMenu: false,
  };
};

export const useInitialFocus = (): void => {
  const navigationPluginData = useNavigationPluginData();

  const focusOnContent = toBooleanWithDefaultFalse(
    navigationPluginData?.rules?.focus_on_content
  );

  const isNavBarVisible = useIsNavBarVisible();

  const { pathname: currentRoute } = useRoute();

  React.useEffect(() => {
    const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);

    if (initialFocus.onContent) {
      setFocusOnContent(currentRoute);

      return;
    }

    if (initialFocus.onMenu) {
      setFocusOnMenu(currentRoute);
    }
  }, []);
};