@applicaster/zapp-react-native-app/App/InteractionManager/index.js

Zapp App Component for Applicaster's Quick Brick React Native App

import * as React from "react";
import { BackHandler } from "react-native";
import * as R from "ramda";

import {
  QUICK_BRICK_EVENTS,
  sendQuickBrickEvent,
} from "@applicaster/zapp-react-native-bridge/QuickBrick";
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
import { useErrorStore } from "@applicaster/quick-brick-core/App/ErrorBoundary/store";

const getHome = R.compose(R.find(R.propEq("home", true)), R.values);

const InteractionManagerComponent = () => {
  const { sendHardwareBackButtonClickEvent } = useAnalytics();
  const rivers = useRivers();
  const navigator = useNavigation();

  const isHomeScreen = () => {
    const homeId = R.compose(R.prop("id"), getHome)(rivers);
    const homePath = `/river/${homeId}`;

    return homePath === navigator.currentRoute;
  };

  const exitToBackground = () => {
    sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND, {
      MOVE_APP_TO_BACKGROUND: true,
    });
  };

  const goToHome = () => {
    const home = getHome(rivers);

    if (!home) {
      throw new Error("Could not find home screen");
    }

    navigator.replace(home);
  };

  const onHardwareBackPress = React.useCallback(() => {
    if (navigator && !navigator.canGoBack()) {
      if (isHomeScreen()) {
        exitToBackground();
      } else {
        try {
          goToHome();
        } catch (e) {
          const errorMessage = "Can't find home screen";
          const error = new Error(errorMessage);

          useErrorStore
            .getState()
            .setError(error, "Failed navigating to home screen", false);
        }
      }
    } else {
      sendHardwareBackButtonClickEvent({ navigator });
      navigator.goBack();
    }

    return true; // Take care! see jsdoc above
  }, [navigator.currentRoute]);

  React.useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);

    return () => {
      BackHandler.removeEventListener("hardwareBackPress", onHardwareBackPress);
    };
  }, [onHardwareBackPress]);

  return null;
};

export const InteractionManager = React.memo(InteractionManagerComponent);