react-navigation-app-state-aware-focus-effect
v1.0.2
Published
AppState-aware focus effect for React Native with React Navigation
Downloads
845
Readme
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