UNPKG

4.68 kBJavaScriptView Raw
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.default = useFocusEffect;
7
8var React = _interopRequireWildcard(require("react"));
9
10var _useNavigation = _interopRequireDefault(require("./useNavigation"));
11
12function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
14function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
16function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
18/**
19 * Hook to run an effect in a focused screen, similar to `React.useEffect`.
20 * This can be used to perform side-effects such as fetching data or subscribing to events.
21 * The passed callback should be wrapped in `React.useCallback` to avoid running the effect too often.
22 *
23 * @param callback Memoized callback containing the effect, should optionally return a cleanup function.
24 */
25function useFocusEffect(effect) {
26 const navigation = (0, _useNavigation.default)();
27
28 if (arguments[1] !== undefined) {
29 const message = "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " + "If you want to pass a dependency array, you can use 'React.useCallback':\n\n" + 'useFocusEffect(\n' + ' React.useCallback(() => {\n' + ' // Your code here\n' + ' }, [depA, depB])\n' + ');\n\n' + 'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
30 console.error(message);
31 }
32
33 React.useEffect(() => {
34 let isFocused = false;
35 let cleanup;
36
37 const callback = () => {
38 const destroy = effect();
39
40 if (destroy === undefined || typeof destroy === 'function') {
41 return destroy;
42 }
43
44 if (process.env.NODE_ENV !== 'production') {
45 let message = 'An effect function must not return anything besides a function, which is used for clean-up.';
46
47 if (destroy === null) {
48 message += " You returned 'null'. If your effect does not require clean-up, return 'undefined' (or nothing).";
49 } else if (typeof destroy.then === 'function') {
50 message += "\n\nIt looks like you wrote 'useFocusEffect(async () => ...)' or returned a Promise. " + 'Instead, write the async function inside your effect ' + 'and call it immediately:\n\n' + 'useFocusEffect(\n' + ' React.useCallback() => {\n' + ' async function fetchData() {\n' + ' // You can await here\n' + ' const response = await MyAPI.getData(someId);\n' + ' // ...\n' + ' }\n\n' + ' fetchData();\n' + ' }, [someId])\n' + ');\n\n' + 'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
51 } else {
52 message += ` You returned '${JSON.stringify(destroy)}'.`;
53 }
54
55 console.error(message);
56 }
57 }; // We need to run the effect on intial render/dep changes if the screen is focused
58
59
60 if (navigation.isFocused()) {
61 cleanup = callback();
62 isFocused = true;
63 }
64
65 const unsubscribeFocus = navigation.addListener('focus', () => {
66 // If callback was already called for focus, avoid calling it again
67 // The focus event may also fire on intial render, so we guard against runing the effect twice
68 if (isFocused) {
69 return;
70 }
71
72 if (cleanup !== undefined) {
73 cleanup();
74 }
75
76 cleanup = callback();
77 isFocused = true;
78 });
79 const unsubscribeBlur = navigation.addListener('blur', () => {
80 if (cleanup !== undefined) {
81 cleanup();
82 }
83
84 cleanup = undefined;
85 isFocused = false;
86 });
87 return () => {
88 if (cleanup !== undefined) {
89 cleanup();
90 }
91
92 unsubscribeFocus();
93 unsubscribeBlur();
94 };
95 }, [effect, navigation]);
96}
97//# sourceMappingURL=useFocusEffect.js.map
\No newline at end of file