---
sidebar_position: 2
title: React Native
sidebar_label: 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.

```tsx
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.

```tsx
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.

```tsx
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]),
  );
}
```

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

useFocusRevalidation(revalidate);
```
