react-navigation-app-state-aware-focus-effect

AppState-aware focus effect for React Native with React Navigation

Background

In React Native app development, there's an everyday use case where we would like to perform actions whenever the view is re-focused or re-surfaced from the background, e.g., re-fetching data to make sure it's up-to-date. It is often necessary for apps to display the information that accuracy can be critical, such as financial applications.

This hook could be helpful for those applications that use React Navigation and have a similar need.

Installation

npm i react-navigation-app-state-aware-focus-effect # or
yarn add react-navigation-app-state-aware-focus-effect

Note: if you are using React Native 0.64 or below, please install v0.1.3 instead.

npm i [email protected] # or
yarn add [email protected]

Usage

Minimal example

import useAppStateAwareFocusEffect from 'react-navigation-app-state-aware-focus-effect';

const req = fetch('https://example.com/dummy.json');

// make sure you memoize the effect
useAppStateAwareFocusEffect(
  useCallback(() => {
    req();
  }, [])
);

A more comprehensive example

import React, { useCallback } from 'react';
import { View, Text } from 'react-native';
import { gql, useQuery } from '@apollo/client';
import useAppStateAwareFocusEffect from 'react-navigation-app-state-aware-focus-effect';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = () => {
  const { loading, error, data, refetch } = useQuery(GET_DOGS, {
    fetchPolicy: 'cache-and-network',
  });

  useAppStateAwareFocusEffect(
    useCallback(() => {
      refetch();
    }, [])
  );

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <View>
      {data.dogs.map(({ id, breed }) => (
        <Text key={id}>{breed}</Text>
      ))}
    </View>
  );
};

Note: Just like useFocusEffect, to avoid running the effect too often, it's important to wrap the callback in useCallback before passing it to useAppStateAwareFocusEffect as shown in the example.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT