Easy to use React Navigation with these helpers for React Navigation on React Native
npm install react-navigation-helpers




!expo-compatible
!Platform - Android and iOS

Add the dependency:
``ruby`
npm i react-navigation-helpers
Works with React Navigation
- v6
- v5
- v4
`json`
"@react-navigation/native": ">= 4.x.x"
| Version | Supported React Navigation Version |
| ----------- | ---------------------------------- |
| _2.0.0 >_ | _v6_ |
| 1.1.1 | v5 |
| < 0.1.0 | v4 |
Set the global level navigation reference into the NavigationContainer
`jsx
import { isReadyRef, navigationRef } from "react-navigation-helpers";
useEffect((): any => {
return () => (isReadyRef.current = false);
}, []);
onReady={() => {
isReadyRef.current = true;
}}
>
{/ Rest of your code /}
;
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.navigate("home");
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.push("home");
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.pop();
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.popToTop();
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.back();
`
The usage does not change. Simply put your prop as the secondary prop as same as React Navigation itself.
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.navigate("home", { data: myData, myId: "d1f01df1" });
`
`js
import * as NavigationService from "react-navigation-helpers";
NavigationService.push("home", { data: myData, myId: "d1f01df1" });
`
`js`
const { data, id } = this.props.route.params;
| 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 |
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);
}, []);
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 (
)
}
``
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
FreakyCoder, kurayogun@gmail.com
React Navigation Helpers Library is available under the MIT license. See the LICENSE file for more info.