use-react-native-navigation (Experimental)
A utility library for easier use of react-native-navigation library.
Installation
npm: npm install use-react-native-navigation
yarn: yarn add use-react-native-navigation
Prerequisite
This library assumes that your React-Native project has integrated the following libraries:
How to get started
When you are registering your RNN screen, you need to wrap your screen with a HOC to add useTrackNavigation
to hook into RNN event listener.
Step 1 - Create a HOC with useTrackNavigation hook
// HOC.tsx
Step 2 - Register your screen with HOC
// index.js // Register your screens with wrapRNNScreen HOC.Navigation.registerComponent'App',wrapRNNScreenApp
Step 3 - Using useNavigation hook
// App.tsx
That's it! Now you should be able to push
, pop
, dismissModal
and dismissOverlay
from anywhere in the component tree.
Limitation
Immediate availability of tracked componentId
As the library relies on the Navigation events, specifically componentDidAppear
, componentDidDisappear
and modalDismissed
, emitted from React-Native-Navigation, the most recent componentId
will only be available after the screen is visible/invisible to the user.
For example, if you try to perform navigation before the screen is visible to the user, you might encounter an unexpected behaviour.
// App.tsx
NavigationUtility
These navigation utility functions aim to abstract some of the RNN Layout boilerplate required. These functions are also compatible with the vanilla RNN navigation functions.
setLayoutComponent
Create a single layout component
.
// Vanilla RNN Navigation.push 'screenComponentId', NavigationUtility.setLayoutComponent // useNavigation navigation.push NavigationUtility.setLayoutComponent
setLayoutStackComponents
Create a stack layout component
.
// Vanilla RNN Navigation.setRoot // useNavigation navigation.setRoot