react-navigation-helpers



!expo-compatible
!Platform - Android and iOS

Installation

Add the dependency:

$3

``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

$3

Set the global level navigation reference into the NavigationContainer

`jsx
import { isReadyRef, navigationRef } from "react-navigation-helpers";

useEffect((): any => {
return () => (isReadyRef.current = false);
}, []);

ref={navigationRef}
onReady={() => {
isReadyRef.current = true;
}}
>
{/ Rest of your code /}
;
`

NavigationService Usage

$3

`js
import * as NavigationService from "react-navigation-helpers";

NavigationService.navigate("home");
`

$3

`js
import * as NavigationService from "react-navigation-helpers";

NavigationService.push("home");
`

$3

`js
import * as NavigationService from "react-navigation-helpers";

NavigationService.pop();
`

$3

`js
import * as NavigationService from "react-navigation-helpers";

NavigationService.popToTop();
`

$3

`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.

$3

`js
import * as NavigationService from "react-navigation-helpers";

NavigationService.navigate("home", { data: myData, myId: "d1f01df1" });
`

$3

`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;
`

$3

| 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 |

$3

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);
}, []);

ref={navigationRef}
onReady={() => {
isReadyRef.current = true;
}}
>

{/ Rest of your code /}

;
`

you can then listen to stack navigation 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!
)
}
``

$3

- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Navigation Helpers Library is available under the MIT license. See the LICENSE file for more info.