Skip to content

Commit 7d25d2f

Browse files
author
Ryan Stelly
authored
docs(setFocusHandler): React Native Example (#912)
1 parent 5d1dc70 commit 7d25d2f

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

docs/src/pages/docs/guides/window-focus-refetching.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,22 @@ import onWindowFocus from './onWindowFocus' // The gist above
4747

4848
setFocusHandler(onWindowFocus) // Boom!
4949
```
50+
51+
## Managing Focus in React Native
52+
53+
Instead of event listeners on `window`, React Native provides focus information through the [`AppState` module](https://reactnative.dev/docs/appstate#app-states). You can use the `AppState` "change" event to trigger an update when the app state changes to "active":
54+
55+
```js
56+
import { setFocusHandler } from 'react-query';
57+
import { AppState } from 'react-native';
58+
59+
setFocusHandler((handleFocus) => {
60+
const handleAppStateChange = (appState) => {
61+
if (appState === 'active') {
62+
handleFocus();
63+
}
64+
};
65+
AppState.addEventListener('change', handleAppStateChange);
66+
return () => AppState.removeEventListener('change', handleAppStateChange);
67+
});
68+
```

0 commit comments

Comments
 (0)