Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-navigation-helpers
Helpers for React Navigation
https://github.com/wrathchaos/react-navigation-helpers
android freakycoder helpers ios library mobile navigation react react-native react-navigation reactjs
Last synced: 8 days ago
JSON representation
Helpers for React Navigation
- Host: GitHub
- URL: https://github.com/wrathchaos/react-navigation-helpers
- Owner: WrathChaos
- License: mit
- Created: 2019-08-09T10:44:21.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T02:24:45.000Z (15 days ago)
- Last Synced: 2024-10-25T16:59:18.562Z (14 days ago)
- Topics: android, freakycoder, helpers, ios, library, mobile, navigation, react, react-native, react-navigation, reactjs
- Language: Java
- Homepage: https://www.freakycoder.com
- Size: 22.4 MB
- Stars: 60
- Watchers: 3
- Forks: 6
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-navigation-helpers)
[](https://github.com/WrathChaos/react-navigation-helpers)
[](https://www.npmjs.com/package/react-navigation-helpers)
[](https://www.npmjs.com/package/react-navigation-helpers)
[](https://opensource.org/licenses/MIT)
## Installation
Add the dependency:
### React Native:
```ruby
npm i react-navigation-helpers
```
## Peer Dependencies
Works with React Navigation
- **v6**
- v5
- v4
```json
"@react-navigation/native": ">= 4.x.x"
```
## React Navigation Versions
| Version | Supported React Navigation Version |
| ----------- | ---------------------------------- |
| _**2.0.0 >**_ | _**v6**_ |
| 1.1.1 | v5 |
| < 0.1.0 | v4 |
## Usage
### Global Level Navigator
Set the global level navigation reference into the `NavigationContainer`
```jsx
import { isReadyRef, navigationRef } from "react-navigation-helpers";
useEffect((): any => {
return () => (isReadyRef.current = false);
}, []);
{
isReadyRef.current = true;
}}
>
{/* Rest of your code */}
;
```
## NavigationService Usage
### Navigate Example
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.navigate("home");
```
### Push Example
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.push("home");
```
### Pop Example
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.pop();
```
### PopToTop Example
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.popToTop();
```
### Back Example
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.back();
```
## How to pass prop with this library?
The usage does not change. Simply put your prop as the secondary prop **as same as React Navigation** itself.
### Navigate
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.navigate("home", { data: myData, myId: "d1f01df1" });
```
### Push
```js
import * as NavigationService from "react-navigation-helpers";
NavigationService.push("home", { data: myData, myId: "d1f01df1" });
```
## How to receive the passed props from navigation or push functions?
```js
const { data, id } = this.props.route.params;
```
### Configuration - Props
| Property | Type | Default | Description |
| -------- | :------: | :------: | ------------------------------- |
| navigate | function | function | navigate the selected screen |
| push | function | function | push the selected screen |
| goBack | function | function | back the previous screen |
| pop | function | function | pop the previous screen |
| popToTop | function | function | pop the top level of the screen |
| reset | function | function | reset the navigator |
### Global Stack Navigator Events
To listen to the Stack navigator events from anywhere, you need to import `navigationListenerProps` and spread it as props. It is currently limited to a single stack navigator.
```jsx
import { isReadyRef, navigationRef, navigationListenerProps } from "react-navigation-helpers";
useEffect((): any => {
return () => (isReadyRef.current = false);
}, []);
{
isReadyRef.current = true;
}}
>
{/* Rest of your code */}
;
```
you can then listen to [stack navigation events](https://reactnavigation.org/docs/stack-navigator#events) anywhere in your app.
Example in a component:
```jsx
import React, {useEffect} from "react"
import {addNavigationListener} from "react-navigation-helpers"
// or as a whole
import * as NavigationService from "react-navigation-helpers";
const MyComponent = () => {
useEffect(() => {
return addNavigationListener("transitionEnd", () => {
// transition ended
})
})
// or like this
useEffect(() => {
return NavigationService.addNavigationListener("transitionEnd", () => {
// transition ended
})
})
return (
Hello world!
)
}
```
### Roadmap
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, [email protected]
## License
React Navigation Helpers Library is available under the MIT license. See the LICENSE file for more info.