🏄♀️ 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!
See an example web app which uses react-navigation and hooks on the client and the server:
https://github.com/react-navigation/web-server-example
yarn add react-navigation-hooks
import * from 'react-navigation-hooks'
This is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using withNavigation
.
You can use the navigate functionality anywhere in your app:
function MyLinkButton() {
// be careful to never call useNavigation in the press callback. Call hooks directly from the render function!
const { navigate } = useNavigation();
return (
<Button
onPress={() => {
navigate('Home');
}}
title="Go Home"
/>
);
}
Access a param for the current navigation state
function MyScreen() {
const name = useNavigationParam('name');
return <p>name is {name}</p>;
}
Literally the same as useNavigation().getParam(paramName)
Access the navigation state of the current route, or if you're in a navigator view, access the navigation state of your sub-tree.
function MyScreen() {
const { routeName } = useNavigationState();
return <p>My route name is {routeName}</p>;
}
Literally the same as useNavigation().state
Convenient way to access the key of the current route.
Literally the same as useNavigationState().key
Subscribe to navigation events in the current route context.
function ReportNavigationEvents() {
const [events, setEvents] = useState([]);
useNavigationEvents(evt => {
// latest state on evt.state
// prev state on evt.lastState
// triggering navigation action on evt.action
setEvents(events => [...events, evt]);
});
// evt.type is [will/did][Focus/Blur]
return (
<>
{events.map(evt => (
<p>{evt.type}</p>
))}
</>
);
}
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
Convenient way of subscribing to events and observing focus state of the current screen.
function MyFocusTag() {
return <p>{useFocusState().isFocused ? 'Focused' : 'Not Focused'}</p>;
}
One (always, and only one) of the following values will be true in the focus state:
- isFocused
- isBlurring
- isBlurred
- isFocusing