├── .circleci
    └── config.yml
├── .editorconfig
├── .gitignore
├── .prettierrc
├── .release-it.json
├── LICENSE.md
├── README.md
├── __mocks__
    └── react.js
├── babel.config.js
├── jest-setup.js
├── jest.config.js
├── package.json
├── src
    ├── Hooks.ts
    └── __tests__
    │   └── Hooks.test.tsx
├── tsconfig.json
├── tslint.json
└── yarn.lock


/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | 
 3 | defaults: &defaults
 4 |   docker:
 5 |     - image: circleci/node:8
 6 |   working_directory: ~/project
 7 | 
 8 | jobs:
 9 |   install-dependencies:
10 |     <<: *defaults
11 |     steps:
12 |       - checkout
13 |       - attach_workspace:
14 |           at: ~/project
15 |       - restore_cache:
16 |           keys:
17 |             - v1-dependencies-{{ checksum "package.json" }}
18 |             - v1-dependencies-
19 |       - restore_cache:
20 |           keys:
21 |             - v1-dependencies-example-{{ checksum "example/package.json" }}
22 |             - v1-dependencies-example-
23 |       - run: |
24 |           yarn install
25 |           yarn install --cwd example
26 |       - save_cache:
27 |           key: v1-dependencies-{{ checksum "package.json" }}
28 |           paths: node_modules
29 |       - save_cache:
30 |           key: v1-dependencies-example-{{ checksum "example/package.json" }}
31 |           paths: example/node_modules
32 |       - persist_to_workspace:
33 |           root: .
34 |           paths: .
35 |   lint:
36 |     <<: *defaults
37 |     steps:
38 |       - attach_workspace:
39 |           at: ~/project
40 |       - run: |
41 |           yarn run lint
42 |   unit-tests:
43 |     <<: *defaults
44 |     steps:
45 |       - attach_workspace:
46 |           at: ~/project
47 |       - run: yarn test -- --coverage
48 |       - store_artifacts:
49 |           path: coverage
50 |           destination: coverage
51 | 
52 | workflows:
53 |   version: 2
54 |   build-and-test:
55 |     jobs:
56 |       - install-dependencies
57 |       - lint:
58 |           requires:
59 |             - install-dependencies
60 |       - unit-tests:
61 |           requires:
62 |             - install-dependencies
63 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # we recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # XDE
 6 | .expo/
 7 | 
 8 | # VSCode
 9 | .vscode/
10 | jsconfig.json
11 | 
12 | # Xcode
13 | #
14 | build/
15 | *.pbxuser
16 | !default.pbxuser
17 | *.mode1v3
18 | !default.mode1v3
19 | *.mode2v3
20 | !default.mode2v3
21 | *.perspectivev3
22 | !default.perspectivev3
23 | xcuserdata
24 | *.xccheckout
25 | *.moved-aside
26 | DerivedData
27 | *.hmap
28 | *.ipa
29 | *.xcuserstate
30 | project.xcworkspace
31 | 
32 | # Android/IJ
33 | #
34 | .idea
35 | *.iml
36 | .gradle
37 | local.properties
38 | 
39 | # node.js
40 | #
41 | node_modules/
42 | npm-debug.log
43 | yarn-debug.log
44 | yarn-error.log
45 | 
46 | # BUCK
47 | buck-out/
48 | \.buckd/
49 | android/app/libs
50 | android/keystores/debug.keystore
51 | 
52 | # Test
53 | coverage/
54 | .jest/
55 | **/__snapshots__/**
56 | 
57 | # Build
58 | dist/
59 | 
60 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "semi": true,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "useTabs": false,
7 |   "bracketSpacing": true,
8 |   "jsxBracketSameLine": false
9 | }


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "increment": "conventional:angular",
 3 |   "changelogCommand": "conventional-changelog -p angular | tail -n +3",
 4 |   "safeBump": false,
 5 |   "src": {
 6 |     "commitMessage": "chore: release %s",
 7 |     "tagName": "v%s"
 8 |   },
 9 |   "npm": {
10 |     "publish": true
11 |   },
12 |   "github": {
13 |     "release": true
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 React Native Community
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Navigation Hooks (v3/v4 only)
  2 | 
  3 | [![npm version](https://badge.fury.io/js/react-navigation-hooks.svg)](https://badge.fury.io/js/react-navigation-hooks) [![npm downloads](https://img.shields.io/npm/dm/react-navigation-hooks.svg)](https://www.npmjs.com/package/react-navigation-hooks) [![CircleCI badge](https://circleci.com/gh/react-navigation/hooks/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/hooks/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
  4 | 
  5 | 🏄‍♀️ Surfing the wave of React Hook hype with a few convenience hooks for `@react-navigation/core` v3/v4. Destined to work on web, server, and React Native. Contributions welcome!
  6 | 
  7 | ## Only for react-navigation v3 / v4 (not v5)
  8 | 
  9 | [react-navigation v5](https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html) is officially released as stable, and includes similar, but rewritten hooks (it should be easy to upgrade from v4 to v5). 
 10 | 
 11 | If you use react-navigation v5, you should import hooks from react-navigation v5 directly, and should not add this project.
 12 | 
 13 | 
 14 | ## Docs
 15 | 
 16 | `yarn add react-navigation-hooks`
 17 | 
 18 | `import { useNavigation, useNavigationParam, ... } from 'react-navigation-hooks'`
 19 | 
 20 | ### useNavigation()
 21 | 
 22 | This is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using `withNavigation`.
 23 | 
 24 | You can use the navigate functionality anywhere in your app:
 25 | 
 26 | ```js
 27 | function MyLinkButton() {
 28 |   // be careful to never call useNavigation in the press callback. Call hooks directly from the render function!
 29 |   const { navigate } = useNavigation();
 30 |   return (
 31 |     <Button
 32 |       onPress={() => {
 33 |         navigate('Home');
 34 |       }}
 35 |       title="Go Home"
 36 |     />
 37 |   );
 38 | }
 39 | ```
 40 | 
 41 | ### useNavigationParam(paramName)
 42 | 
 43 | Access a param for the current navigation state
 44 | 
 45 | ```js
 46 | function MyScreen() {
 47 |   const name = useNavigationParam('name');
 48 |   return <p>name is {name}</p>;
 49 | }
 50 | ```
 51 | 
 52 | Literally the same as `useNavigation().getParam(paramName)`
 53 | 
 54 | ### useNavigationState()
 55 | 
 56 | Access the navigation state of the current route, or if you're in a navigator view, access the navigation state of your sub-tree.
 57 | 
 58 | ```js
 59 | function MyScreen() {
 60 |   const { routeName } = useNavigationState();
 61 |   return <p>My route name is {routeName}</p>;
 62 | }
 63 | ```
 64 | 
 65 | Literally the same as `useNavigation().state`
 66 | 
 67 | ### useNavigationKey()
 68 | 
 69 | Convenient way to access the key of the current route.
 70 | 
 71 | Literally the same as `useNavigationState().key`
 72 | 
 73 | ### useNavigationEvents(handler)
 74 | 
 75 | Subscribe to navigation events in the current route context.
 76 | 
 77 | ```js
 78 | function ReportNavigationEvents() {
 79 |   const [events, setEvents] = useState([]);
 80 |   useNavigationEvents(evt => {
 81 |     // latest state on evt.state
 82 |     // prev state on evt.lastState
 83 |     // triggering navigation action on evt.action
 84 | 
 85 |     setEvents(events => [...events, evt]);
 86 |   });
 87 |   // evt.type is [will/did][Focus/Blur]
 88 |   return (
 89 |     <>
 90 |       {events.map(evt => (
 91 |         <p>{evt.type}</p>
 92 |       ))}
 93 |     </>
 94 |   );
 95 | }
 96 | ```
 97 | 
 98 | The event payload will be the same as provided by `addListener`, as documented here: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
 99 | 
100 | ### useIsFocused()
101 | 
102 | Convenient way to know if the screen currently has focus.
103 | 
104 | ```js
105 | function MyScreen() {
106 |   const isFocused = useIsFocused();
107 |   return <Text>{isFocused ? 'Focused' : 'Not Focused'}</Text>;
108 | }
109 | ```
110 | 
111 | ### useFocusEffect(callback)
112 | 
113 | Permit to execute an effect when the screen takes focus, and cleanup the effect when the screen loses focus.
114 | 
115 | ```js
116 | function MyScreen() {
117 |   useFocusEffect(useCallback(() => {
118 |     console.debug("screen takes focus");
119 |     return () => console.debug("screen loses focus");
120 |   }, []));
121 |   return <View>...</View>;
122 | }
123 | ```
124 | 
125 | **NOTE**: To avoid the running the effect too often, it's important to wrap the callback in useCallback before passing it to `useFocusEffect` as shown in the example. The effect will re-execute everytime the callback changes if the screen is focused.
126 | 
127 | `useFocusEffect` can be helpful to refetch some screen data on params changes:
128 | 
129 | ```js
130 | function Profile({ userId }) {
131 |   const [user, setUser] = useState(null);
132 | 
133 |   const fetchUser = useCallback(() => {
134 |     const request = API.fetchUser(userId).then(
135 |       data => setUser(data),
136 |       error => alert(error.message)
137 |     );
138 | 
139 |     return () => request.abort();
140 |   }, [userId]);
141 | 
142 |   useFocusEffect(fetchUser);
143 | 
144 |   return <ProfileContent user={user} />;
145 | }
146 | ```
147 | 
148 | 
149 | `useFocusEffect` can be helpful to handle hardware back behavior on currently focused screen:
150 | 
151 | ```js 
152 | const useBackHandler = (backHandler: () => boolean) => {
153 |   useFocusEffect(() => {
154 |     const subscription = BackHandler.addEventListener('hardwareBackPress', backHandler);
155 |     return () => subscription.remove();
156 |   });
157 | };
158 | ```
159 | 
160 | 
161 | 
162 | 
163 | ### useFocusState()
164 | 
165 | **deprecated**: this hook does not exist in v5, you should rather use `useIsFocused`
166 | 
167 | 
168 | Convenient way of subscribing to events and observing focus state of the current screen.
169 | 
170 | ```js
171 | function MyScreen() {
172 |   const focusState = useFocusState();
173 |   return <Text>{focusState.isFocused ? 'Focused' : 'Not Focused'}</Text>;
174 | }
175 | ```
176 | 
177 | One (always, and only one) of the following values will be true in the focus state:
178 | 
179 | - isFocused
180 | - isBlurring
181 | - isBlurred
182 | - isFocusing
183 | 
184 | ## Web example
185 | 
186 | See an example web app which uses react-navigation and hooks on the client and the server:
187 | 
188 | https://github.com/react-navigation/web-server-example
189 | 
190 | 


--------------------------------------------------------------------------------
/__mocks__/react.js:
--------------------------------------------------------------------------------
1 | // Right now is not a way to trigger useEffect from Jest
2 | // see: https://github.com/facebook/react/issues/14050
3 | // TODO: Remove this module mock when solved
4 | import * as React from 'react';
5 | module.exports = { ...React, useEffect: React.useLayoutEffect };
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['module:metro-react-native-babel-preset'],
3 | };
4 | 


--------------------------------------------------------------------------------
/jest-setup.js:
--------------------------------------------------------------------------------
1 | // nothing
2 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   preset: 'react-native',
 3 |   setupFiles: ['<rootDir>/jest-setup.js'],
 4 |   coveragePathIgnorePatterns: ['jest-setup.js'],
 5 |   modulePathIgnorePatterns: ['<rootDir>/example/'],
 6 |   transformIgnorePatterns: [
 7 |     'node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)',
 8 |   ],
 9 |   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
10 |   testRegex: '/__tests__/.*\\.(test|spec)\\.(js|tsx?)$',
11 |   testEnvironment: 'node',
12 |   transform: {
13 |     '^.+\\.(js|ts|tsx)$': 'babel-jest',
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-navigation-hooks",
 3 |   "version": "1.1.0",
 4 |   "description": "React hooks for convenient react-navigation use",
 5 |   "main": "dist/commonjs/Hooks.js",
 6 |   "module": "dist/module/Hooks.js",
 7 |   "react-native": "dist/module/Hooks.js",
 8 |   "types": "dist/typescript/Hooks.d.ts",
 9 |   "files": [
10 |     "dist/",
11 |     "src/",
12 |     "LICENSE.md",
13 |     "README.md"
14 |   ],
15 |   "scripts": {
16 |     "test": "jest",
17 |     "lint": "tslint --project tsconfig.json",
18 |     "build": "bob build",
19 |     "prepare": "yarn build",
20 |     "release": "release-it",
21 |     "precommit": "lint-staged"
22 |   },
23 |   "publishConfig": {
24 |     "registry": "https://registry.npmjs.org/"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "git+https://github.com/react-navigation/react-navigation-hooks.git"
29 |   },
30 |   "author": "",
31 |   "license": "MIT",
32 |   "bugs": {
33 |     "url": "https://github.com/react-navigation/react-navigation-hooks/issues"
34 |   },
35 |   "homepage": "https://github.com/react-navigation/react-navigation-hooks#readme",
36 |   "@react-native-community/bob": {
37 |     "source": "src",
38 |     "output": "dist",
39 |     "targets": [
40 |       "commonjs",
41 |       "module",
42 |       "typescript"
43 |     ]
44 |   },
45 |   "devDependencies": {
46 |     "@react-native-community/bob": "^0.6.1",
47 |     "@react-navigation/core": "^3.0.0",
48 |     "@react-navigation/native": "^3.0.2",
49 |     "@types/jest": "^23.3.9",
50 |     "@types/react": "^16.7.7",
51 |     "@types/react-native": "^0.57.14",
52 |     "@types/react-test-renderer": "^16.0.3",
53 |     "babel-jest": "^24.7.1",
54 |     "conventional-changelog-cli": "^2.0.5",
55 |     "husky": "^0.14.3",
56 |     "jest": "^24.7.1",
57 |     "lint-staged": "^8.1.0",
58 |     "prettier": "^1.8.2",
59 |     "pretty-quick": "^1.8.0",
60 |     "react": "^16.8.0",
61 |     "react-native": "^0.57.7",
62 |     "react-navigation": "^3.11.1",
63 |     "react-test-renderer": "^16.8.0",
64 |     "release-it": "^7.6.1",
65 |     "tslint": "^5.11.0",
66 |     "tslint-config-airbnb": "^5.11.1",
67 |     "tslint-config-prettier": "^1.16.0",
68 |     "tslint-react": "^3.6.0",
69 |     "typescript": "^3.5.3"
70 |   },
71 |   "peerDependencies": {
72 |     "@react-navigation/core": "^3.0.0",
73 |     "react": "^16.8.0",
74 |     "react-native": "*"
75 |   },
76 |   "lint-staged": {
77 |     "{src}/**/*.ts*": [
78 |       "prettier --write",
79 |       "git add"
80 |     ]
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/src/Hooks.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   useState,
  3 |   useContext,
  4 |   useEffect,
  5 |   useLayoutEffect,
  6 |   useRef,
  7 |   useCallback,
  8 | } from 'react';
  9 | 
 10 | import {
 11 |   NavigationContext,
 12 |   NavigationScreenProp,
 13 |   NavigationRoute,
 14 |   NavigationParams,
 15 |   NavigationEventCallback,
 16 |   NavigationEventPayload,
 17 |   EventType,
 18 | } from 'react-navigation';
 19 | 
 20 | export function useNavigation<S>(): NavigationScreenProp<S & NavigationRoute> {
 21 |   const navigation = useContext(NavigationContext) as any; // TODO typing?
 22 |   if (!navigation) {
 23 |     throw new Error(
 24 |       "react-navigation hooks require a navigation context but it couldn't be found. " +
 25 |         "Make sure you didn't forget to create and render the react-navigation app container. " +
 26 |         'If you need to access an optional navigation object, you can useContext(NavigationContext), which may return'
 27 |     );
 28 |   }
 29 |   return navigation;
 30 | }
 31 | 
 32 | export function useNavigationParam<T extends keyof NavigationParams>(
 33 |   paramName: T
 34 | ) {
 35 |   return useNavigation().getParam(paramName);
 36 | }
 37 | 
 38 | export function useNavigationState() {
 39 |   return useNavigation().state;
 40 | }
 41 | 
 42 | export function useNavigationKey() {
 43 |   return useNavigation().state.key;
 44 | }
 45 | 
 46 | // Useful to access the latest user-provided value
 47 | const useGetter = <S>(value: S): (() => S) => {
 48 |   const ref = useRef(value);
 49 |   useLayoutEffect(() => {
 50 |     ref.current = value;
 51 |   });
 52 |   return useCallback(() => ref.current, [ref]);
 53 | };
 54 | 
 55 | export function useNavigationEvents(callback: NavigationEventCallback) {
 56 |   const navigation = useNavigation();
 57 | 
 58 |   // Closure might change over time and capture some variables
 59 |   // It's important to fire the latest closure provided by the user
 60 |   const getLatestCallback = useGetter(callback);
 61 | 
 62 |   // It's important to useLayoutEffect because we want to ensure we subscribe synchronously to the mounting
 63 |   // of the component, similarly to what would happen if we did use componentDidMount
 64 |   // (that we use in <NavigationEvents/>)
 65 |   // When mounting/focusing a new screen and subscribing to focus, the focus event should be fired
 66 |   // It wouldn't fire if we did subscribe with useEffect()
 67 |   useLayoutEffect(() => {
 68 |     const subscribedCallback: NavigationEventCallback = event => {
 69 |       const latestCallback = getLatestCallback();
 70 |       latestCallback(event);
 71 |     };
 72 | 
 73 |     const subs = [
 74 |       // TODO should we remove "action" here? it's not in the published typedefs
 75 |       navigation.addListener('action' as any, subscribedCallback),
 76 |       navigation.addListener('willFocus', subscribedCallback),
 77 |       navigation.addListener('didFocus', subscribedCallback),
 78 |       navigation.addListener('willBlur', subscribedCallback),
 79 |       navigation.addListener('didBlur', subscribedCallback),
 80 |     ];
 81 |     return () => {
 82 |       subs.forEach(sub => sub.remove());
 83 |     };
 84 |   }, [navigation.state.key]);
 85 | }
 86 | 
 87 | export interface FocusState {
 88 |   isFocused: boolean;
 89 |   isBlurring: boolean;
 90 |   isBlurred: boolean;
 91 |   isFocusing: boolean;
 92 | }
 93 | 
 94 | const emptyFocusState: FocusState = {
 95 |   isFocused: false,
 96 |   isBlurring: false,
 97 |   isBlurred: false,
 98 |   isFocusing: false,
 99 | };
100 | const didFocusState: FocusState = { ...emptyFocusState, isFocused: true };
101 | const willBlurState: FocusState = { ...emptyFocusState, isBlurring: true };
102 | const didBlurState: FocusState = { ...emptyFocusState, isBlurred: true };
103 | const willFocusState: FocusState = { ...emptyFocusState, isFocusing: true };
104 | 
105 | function nextFocusState(
106 |   eventName: EventType,
107 |   currentState: FocusState
108 | ): FocusState {
109 |   switch (eventName) {
110 |     case 'willFocus':
111 |       return {
112 |         ...willFocusState,
113 |         // /!\ willFocus will fire on screen mount, while the screen is already marked as focused.
114 |         // In case of a new screen mounted/focused, we want to avoid a isFocused = true => false => true transition
115 |         // So we don't put the "false" here and ensure the attribute remains as before
116 |         // Currently I think the behavior of the event system on mount is not very well specified
117 |         // See also https://twitter.com/sebastienlorber/status/1166986080966578176
118 |         isFocused: currentState.isFocused,
119 |       };
120 |     case 'didFocus':
121 |       return didFocusState;
122 |     case 'willBlur':
123 |       return willBlurState;
124 |     case 'didBlur':
125 |       return didBlurState;
126 |     default:
127 |       // preserve current state for other events ("action"?)
128 |       return currentState;
129 |   }
130 | }
131 | 
132 | export function useFocusState() {
133 |   const navigation = useNavigation();
134 | 
135 |   const [focusState, setFocusState] = useState<FocusState>(() => {
136 |     return navigation.isFocused() ? didFocusState : didBlurState;
137 |   });
138 | 
139 |   useNavigationEvents((e: NavigationEventPayload) => {
140 |     setFocusState(currentFocusState =>
141 |       nextFocusState(e.type, currentFocusState)
142 |     );
143 |   });
144 | 
145 |   return focusState;
146 | }
147 | 
148 | type EffectCallback = (() => void) | (() => () => void);
149 | 
150 | // Inspired by same hook from react-navigation v5
151 | // See https://github.com/react-navigation/hooks/issues/39#issuecomment-534694135
152 | export const useFocusEffect = (callback: EffectCallback) => {
153 |   const navigation = useNavigation();
154 | 
155 |   useEffect(() => {
156 |     let isFocused = false;
157 |     let cleanup: (() => void) | void;
158 | 
159 |     if (navigation.isFocused()) {
160 |       cleanup = callback();
161 |       isFocused = true;
162 |     }
163 | 
164 |     const focusSubscription = navigation.addListener('willFocus', () => {
165 |       // If callback was already called for focus, avoid calling it again
166 |       // The focus event may also fire on intial render, so we guard against runing the effect twice
167 |       if (isFocused) {
168 |         return;
169 |       }
170 | 
171 |       cleanup && cleanup();
172 |       cleanup = callback();
173 |       isFocused = true;
174 |     });
175 | 
176 |     const blurSubscription = navigation.addListener('willBlur', () => {
177 |       cleanup && cleanup();
178 |       cleanup = undefined;
179 |       isFocused = false;
180 |     });
181 | 
182 |     return () => {
183 |       cleanup && cleanup();
184 |       focusSubscription.remove();
185 |       blurSubscription.remove();
186 |     };
187 |   }, [callback, navigation]);
188 | };
189 | 
190 | export const useIsFocused = () => {
191 |   const navigation = useNavigation();
192 |   const getNavigation = useGetter(navigation);
193 |   const [focused, setFocused] = useState(navigation.isFocused);
194 | 
195 |   useEffect(() => {
196 |     const nav = getNavigation();
197 |     const focusSubscription = nav.addListener('willFocus', () =>
198 |       setFocused(true)
199 |     );
200 |     const blurSubscription = nav.addListener('willBlur', () =>
201 |       setFocused(false)
202 |     );
203 |     return () => {
204 |       focusSubscription.remove();
205 |       blurSubscription.remove();
206 |     };
207 |   }, [getNavigation]);
208 | 
209 |   return focused;
210 | };
211 | 


--------------------------------------------------------------------------------
/src/__tests__/Hooks.test.tsx:
--------------------------------------------------------------------------------
  1 | import { default as React, useState } from 'react';
  2 | import * as renderer from 'react-test-renderer';
  3 | 
  4 | import {
  5 |   createSwitchNavigator,
  6 |   createAppContainer,
  7 |   NavigationEventPayload,
  8 |   NavigationActions,
  9 | } from 'react-navigation';
 10 | 
 11 | import {
 12 |   useNavigation,
 13 |   useNavigationParam,
 14 |   useNavigationState,
 15 |   useNavigationKey,
 16 |   useNavigationEvents,
 17 |   useFocusState,
 18 | } from '../Hooks';
 19 | 
 20 | interface DetailsScreenParams {
 21 |   from: string;
 22 | }
 23 | 
 24 | const HomeScreen = () => {
 25 |   const { navigate } = useNavigation();
 26 |   const params: DetailsScreenParams = { from: 'Home' };
 27 |   return navigate('Details', params);
 28 | };
 29 | 
 30 | const DetailsScreen = () => {
 31 |   const from = useNavigationParam('from');
 32 |   return <p>{from}</p>;
 33 | };
 34 | 
 35 | const OtherScreen = () => {
 36 |   const { routeName } = useNavigationState();
 37 |   return <p>{routeName}</p>;
 38 | };
 39 | 
 40 | const KeyScreen = () => {
 41 |   const key = useNavigationKey();
 42 |   return <p>{key}</p>;
 43 | };
 44 | 
 45 | const EventScreen = () => {
 46 |   const [events, setEvents] = useState([] as NavigationEventPayload[]);
 47 |   useNavigationEvents(evt => {
 48 |     // latest state on evt.state
 49 |     // prev state on evt.lastState
 50 |     // triggering navigation action on evt.action
 51 | 
 52 |     setEvents(events => [...events, evt]);
 53 |   });
 54 |   // evt.type is [will/did][Focus/Blur]
 55 |   return (
 56 |     <>
 57 |       {events.map((evt, i) => (
 58 |         <p key={i}>{evt.type}</p>
 59 |       ))}
 60 |     </>
 61 |   );
 62 | };
 63 | 
 64 | const FocusScreen = () => (
 65 |   <p>{useFocusState().isFocused ? 'Focused' : 'Not Focused'}</p>
 66 | );
 67 | 
 68 | const AppNavigator1 = createSwitchNavigator(
 69 |   {
 70 |     Home: HomeScreen, // { nav: { "index": 0 ...
 71 |     Details: DetailsScreen, // { nav: { "index": 1 ...
 72 |     Other: OtherScreen, // { nav: { "index": 2 ...
 73 |   },
 74 |   {
 75 |     initialRouteName: 'Home',
 76 |   }
 77 | );
 78 | 
 79 | const AppNavigator2 = createSwitchNavigator(
 80 |   {
 81 |     Other: OtherScreen,
 82 |     Key: KeyScreen,
 83 |     Event: EventScreen,
 84 |     Focus: FocusScreen,
 85 |   },
 86 |   {
 87 |     initialRouteName: 'Other',
 88 |   }
 89 | );
 90 | 
 91 | describe('AppNavigator1 Stack', () => {
 92 |   const App = createAppContainer(AppNavigator1);
 93 |   let navigationContainer: any;
 94 |   beforeEach(() => {
 95 |     navigationContainer = renderer.create(<App />);
 96 |   });
 97 | 
 98 |   it('useNavigation: Navigating to "DetailsScreen"', () => {
 99 |     const instance = navigationContainer.getInstance();
100 |     expect(instance.state.nav).toMatchObject({ index: 1 });
101 |   });
102 | 
103 |   it('useNavigationParam: Get passed parameter', () => {
104 |     const children = navigationContainer.toJSON().children;
105 |     expect(children).toContain('Home');
106 |   });
107 | 
108 |   afterEach(() => {
109 |     navigationContainer.unmount();
110 |   });
111 | });
112 | 
113 | describe('AppNavigator2 Stack', () => {
114 |   const App = createAppContainer(AppNavigator2);
115 |   let navigationContainer: any;
116 |   beforeEach(() => {
117 |     navigationContainer = renderer.create(<App />);
118 |   });
119 | 
120 |   const eventTypes = ['willFocus', 'didFocus', 'willBlur', 'didBlur', 'action'];
121 | 
122 |   it('usenNavigationState: Get current route name', () => {
123 |     const children = navigationContainer.toJSON().children;
124 |     expect(children).toContain('Other');
125 |   });
126 | 
127 |   it('usenNavigationKey: Get current key name', () => {
128 |     const instance = navigationContainer.getInstance();
129 |     instance.dispatch(NavigationActions.navigate({ routeName: 'Key' }));
130 |     const children = navigationContainer.toJSON().children;
131 |     expect(children).toContain('Key');
132 |   });
133 | 
134 |   it('useNavigationEvents: Get current subscribed events', () => {
135 |     const instance = navigationContainer.getInstance();
136 |     instance.dispatch(NavigationActions.navigate({ routeName: 'Event' }));
137 |     const elems = navigationContainer.toJSON();
138 |     expect(eventTypes).toContain(elems[0].children.toString());
139 |     expect(eventTypes).toContain(elems[1].children.toString());
140 |   });
141 | 
142 |   it('useFocusState: Get focus state', () => {
143 |     const instance = navigationContainer.getInstance();
144 |     instance.dispatch(NavigationActions.navigate({ routeName: 'Focus' }));
145 |     const children = navigationContainer.toJSON().children;
146 |     expect(children).toContain('Focused');
147 |   });
148 | 
149 |   afterEach(() => {
150 |     navigationContainer.unmount();
151 |   });
152 | });
153 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowUnreachableCode": false,
 4 |     "allowUnusedLabels": false,
 5 |     "alwaysStrict": true,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "jsx": "react",
 9 |     "lib": ["esnext"],
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "noFallthroughCasesInSwitch": true,
13 |     "noImplicitAny": true,
14 |     "noImplicitReturns": true,
15 |     "noImplicitThis": true,
16 |     "noImplicitUseStrict": false,
17 |     "noStrictGenericChecks": false,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "resolveJsonModule": true,
21 |     "skipLibCheck": true,
22 |     "strict": true,
23 |     "target": "esnext",
24 |     "plugins": [{ "name": "typescript-tslint-plugin" }]
25 |   },
26 |   "typeAcquisition": {
27 |     "enable": true,
28 |     "include": ["react", "react-native"]
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "tslint:recommended",
 4 |     "tslint-config-prettier",
 5 |     "tslint-config-airbnb",
 6 |     "tslint-react"
 7 |   ],
 8 |   "defaultSeverity": "error",
 9 |   "jsRules": {},
10 |   "rules": {
11 |     "quotemark": [false],
12 |     "ordered-imports": false,
13 |     "object-literal-sort-keys": false,
14 |     "arrow-parens": [true, "ban-single-arg-parens"],
15 |     "ter-arrow-parens": false,
16 |     "no-console": [false],
17 |     "no-unused-expression": [true, "allow-fast-null-checks"],
18 |     "comment-format": false,
19 |     "semicolon": [false, "never", "ignore-interfaces"],
20 |     "trailing-comma": [
21 |       true,
22 |       {
23 |         "multiline": {
24 |           "objects": "always",
25 |           "arrays": "always",
26 |           "functions": "ignore",
27 |           "typeLiterals": "ignore"
28 |         }
29 |       }
30 |     ],
31 |     "no-shadowed-variable": false,
32 |     "align": false,
33 |     "ban": false,
34 |     "class-name": true,
35 |     "curly": true,
36 |     "eofline": true,
37 |     "forin": true,
38 |     "indent": [true, "spaces", 2],
39 |     "interface-name": [true, "never-prefix"],
40 |     "jsdoc-format": true,
41 |     "jsx-no-lambda": false,
42 |     "jsx-no-multiline-js": false,
43 |     "label-position": true,
44 |     "max-line-length": [true, 120],
45 |     "member-ordering": false,
46 |     "no-empty": false,
47 |     "no-any": false,
48 |     "no-arg": true,
49 |     "no-switch-case-fall-through": true,
50 |     "switch-default": true,
51 |     "triple-equals": [true, "allow-null-check"],
52 |     "typedef": [true, "parameter", "property-declaration"],
53 |     "typedef-whitespace": [
54 |       true,
55 |       {
56 |         "call-signature": "nospace",
57 |         "index-signature": "nospace",
58 |         "parameter": "nospace",
59 |         "property-declaration": "nospace",
60 |         "variable-declaration": "nospace"
61 |       }
62 |     ],
63 |     "variable-name": [
64 |       true,
65 |       "ban-keywords",
66 |       "check-format",
67 |       "allow-leading-underscore",
68 |       "allow-pascal-case"
69 |     ],
70 |     "whitespace": [
71 |       true,
72 |       "check-branch",
73 |       "check-decl",
74 |       "check-module",
75 |       "check-operator",
76 |       "check-separator",
77 |       "check-type",
78 |       "check-typecast"
79 |     ]
80 |   },
81 |   "rulesDirectory": []
82 | }
83 | 


--------------------------------------------------------------------------------