react-universal-navigation
Universal access to navigation properties and methods for different react navigators including react-navigation (for react-native) and connected-react-router for react-redux.
Installation
Install with npm:
npm install react-universal-navigation
Or with yarn:
yarn add react-universal-navigation
Basic Usage
Import
;
Getting a parameter of the navigation
;
Navigating back to the previous screen
;
Navigating to a new screen (unwinding the stack if the screen is already in the stack and the platform supports stacks)
;
You can also pass parameters to navigate() that will then be available via getParam().
;
Navigating to a new screen (always pushing to the stack)
;
You can also pass parameters to push() that will then be available via getParam().
;
connected-react-router
UniversalNavigation will auto-configure for most react navigation libraries, but for connected-react-router you need to call useConnectedReactRouter() passing some redux actions and dispatch() for it to work correctly.
;; //... ; // Configure universalNavigation to use connected-react-router.universalNavigation.useConnectedReactRouterstore.dispatch, goBack, push;
Javascript Usage
react-universal-navigation works just as well with Javascript as Typescript. All you need to do is remove the type information from the above examples.
Here are the basic usage examples in plain Javascript:
Import
;
Getting a parameter of the navigation
const MyComponent = { const navigation = ; const id = navigation; // Will get id from the navigation's parameters, or '' if it has not been provided. // ...};
Navigating back to the previous screen
;
Navigating to a new screen (unwinding the stack if the screen is already in the stack and the platform supports stacks)
const MyComponent = { const navigation = ; navigation; // ...};
You can also pass parameters to navigate() that will then be available via getParam().
const MyComponent = { const navigation = ; navigation; // ...};
Navigating to a new screen (always pushing to the stack)
const MyComponent = { const navigation = ; navigation; // ...};
You can also pass parameters to push() that will then be available via getParam().
const MyComponent = { const navigation = ; navigation; // ...};
Typescript
This project is written in typescript and comes with its own bindings.
License
Licensed under the MIT license.