Skip to content
This repository was archived by the owner on Dec 3, 2022. It is now read-only.

Commit 2c73c6b

Browse files
ericvicentiericvicenti
committed
Hooks are a blast 🤯
0 parents  commit 2c73c6b

File tree

14 files changed

+9261
-0
lines changed

14 files changed

+9261
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎.circleci/config.yml

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
version: 2
2+
3+
defaults: &defaults
4+
docker:
5+
- image: circleci/node:7.10
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

‎.editorconfig

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
dist/
3+
jest-setup.js

‎.eslintrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"extends": "eslint-config-satya164",
3+
4+
"plugins": ["react-native-globals"],
5+
6+
"env": {
7+
"es6": true,
8+
"react-native-globals/all": true,
9+
},
10+
11+
"rules": {
12+
"import/no-unresolved": "off",
13+
"react/sort-comp": "off",
14+
"jest/no-disabled-tests": "off",
15+
}
16+
}

‎.gitignore

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# XDE
6+
.expo/
7+
8+
# VSCode
9+
.vscode/
10+
tsconfig.json
11+
jsconfig.json
12+
13+
# Xcode
14+
#
15+
build/
16+
*.pbxuser
17+
!default.pbxuser
18+
*.mode1v3
19+
!default.mode1v3
20+
*.mode2v3
21+
!default.mode2v3
22+
*.perspectivev3
23+
!default.perspectivev3
24+
xcuserdata
25+
*.xccheckout
26+
*.moved-aside
27+
DerivedData
28+
*.hmap
29+
*.ipa
30+
*.xcuserstate
31+
project.xcworkspace
32+
33+
# Android/IJ
34+
#
35+
.idea
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+
# Build
53+
dist/

‎.release-it.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
}

‎LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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.

‎README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# React Navigation Hooks
2+
3+
[![npm version](https://badge.fury.io/js/react-navigation-hooks.svg)](https://badge.fury.io/js/react-navigation-hooks) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation-hooks/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation-hooks/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
4+
5+
## Docs
6+
7+
🏄‍♀️ Surfing the wave of React Hook hype with a few convenience hooks for `@react-navigation/core` v3. Destined to work on web, server, and React Native. Contributions welcome!
8+
9+
### useNavigation
10+
11+
This is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using `withNavigation`.
12+
13+
You can use the navigate functionality anywhere in your app:
14+
15+
```js
16+
function MyLinkButton() {
17+
// be careful to never call useNavigation in the press callback. Call hooks directly from the render function!
18+
const { navigate } = useNavigation();
19+
return (
20+
<Button
21+
onPress={() => {
22+
navigate('Home');
23+
}}
24+
title="Go Home"
25+
/>
26+
);
27+
}
28+
```
29+
30+
### useNavigationParam
31+
32+
Access a param for the current navigation state
33+
34+
```js
35+
function MyScreen() {
36+
const { routeName } = useNavigationState();
37+
return <p>My route name is {routeName}</p>;
38+
}
39+
```
40+
41+
Literally the same as `useNavigation().getParam(paramName)`
42+
43+
### useNavigationState
44+
45+
Access the navigation state of the current route, or if you're in a navigator view, access the navigation state of your sub-tree.
46+
47+
```js
48+
function MyScreen() {
49+
const { routeName } = useNavigationState();
50+
return <p>My route name is {routeName}</p>;
51+
}
52+
```
53+
54+
Literally the same as `useNavigation().state`
55+
56+
### useNavigationKey
57+
58+
Convenient way to access the key of the current route.
59+
60+
Literally the same as `useNavigationState().key`
61+
62+
### useNavigationEvents
63+
64+
Subscribe to navigation events in the current route context.
65+
66+
```js
67+
function ReportNavigationEvents() {
68+
const [events, setEvents] = useState([]);
69+
useNavigationEvents(evt => {
70+
// latest state on evt.state
71+
// prev state on evt.lastState
72+
// triggering navigation action on evt.action
73+
74+
setEvents(events => [...events, evt.type]);
75+
// evt.type is [will/did][Focus/Blur]
76+
});
77+
return (
78+
<>
79+
{events.map(evt => (
80+
<p>{evt.type}</p>
81+
))}
82+
</>
83+
);
84+
}
85+
```
86+
87+
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
88+
89+
### useFocusState
90+
91+
Convenient way of subscribing to events and observing focus state of the current screen.
92+
93+
```js
94+
function MyFocusTag() {
95+
return <p>{useFocusState().isFocused ? 'Focused' : 'Not Focused'}</p>;
96+
}
97+
```
98+
99+
One of the following values will always be true in the focus state:
100+
101+
- isFocused
102+
- isBlurring
103+
- isBlurred
104+
- isFocusing

‎jest-setup.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* eslint-env jest
3+
*/
4+
5+
// No setup
6+
7+
import React from 'react';

0 commit comments

Comments
 (0)