React Native

React Native is also supported by Hyper Fetch. This library was designed to work with many environments, which is why we kept the structure of the base library very generic and modular. This means that we can freely replace many of the components.

---

Online / Offline status handling

The default events that handle online/offline status in the library are based on the events available in the web browser environment. To use mobile device solutions, you can change the code responsible for handling the connection status.

export const client = new Client<ServerErrorType>({
  url: environment.serverUrl,
  appManager: (instance) =>
    new AppManager(instance, {
      initiallyOnline: NetInfo.fetch().then((state) => state.isConnected),
      onlineEvent: (setOnline) =>
        NetInfo.addEventListener((state) => {
          setOnline(state.isConnected);
        }),
    }),
});

---

Application focus / blur state

You can use similar logic to that used for online/offline status handling to handle functions that perform requests during focus (active usage) and blur (inactive) states.

export const client = new Client<ServerErrorType>({
  url: environment.serverUrl,
  appManager: (instance) =>
    new AppManager(instance, {
      focusEvent: (setFocused) =>
        ...,
      blurEvent: (setBlurred) =>
        ...,
    }),
});

---

Screen focus / blur state

To implement focus/blur logic for a specific screen, you must use custom solutions that track the focus state of the screen and hook it into revalidation.

import React from "react";
import { useFocusEffect } from "@react-navigation/native";

export function useFocusRevalidation(revalidate: () => void) {
  const initialized = React.useRef(true);

  useFocusEffect(
    React.useCallback(() => {
      if (initialized.current) {
        initialized.current = false;
      } else {
        revalidate();
      }
    }, [revalidate]),
  );
}

const { data, error, loading, revalidate } = useFetch(getUsers);

useFocusRevalidation(revalidate);