A utility library for easier use of react-native-navigation library.
npm install use-react-native-navigation
yarn add use-react-native-navigation
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
Step 2 - Register your screen with HOC
// index.js// Register your screens with wrapRNNScreen HOC.Navigation.registerComponent'App',wrapRNNScreenApp
Step 3 - Using useNavigation hook
That's it! Now you should be able to
dismissOverlay from anywhere in the component tree.
Immediate availability of tracked componentId
As the library relies on the Navigation events, specifically
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.
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.
Create a single layout
// Vanilla RNNNavigation.push'screenComponentId',NavigationUtility.setLayoutComponent// useNavigationnavigation.pushNavigationUtility.setLayoutComponent
Create a stack layout
// Vanilla RNNNavigation.setRoot// useNavigationnavigation.setRoot