Installation

Add the dependency:

React Native:

1npm i react-navigation-helpers

Peer Dependencies

Works with React Navigation

• v6
• v5
• v4

1"@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

1import { isReadyRef, navigationRef } from "react-navigation-helpers";
2
3useEffect((): any => {
4  return () => (isReadyRef.current = false);
5}, []);
6
7<NavigationContainer
8  ref={navigationRef}
9  onReady={() => {
10    isReadyRef.current = true;
11  }}
12>
13  {/* Rest of your code */}
14</NavigationContainer>;

NavigationService Usage

Navigate Example

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.navigate("home");

Push Example

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.push("home");

Pop Example

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.pop();

PopToTop Example

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.popToTop();

Back Example

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.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

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.navigate("home", { data: myData, myId: "d1f01df1" });

Push

1import * as NavigationService from "react-navigation-helpers";
2
3NavigationService.push("home", { data: myData, myId: "d1f01df1" });

How to receive the passed props from navigation or push functions?

1const { 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.

1import { isReadyRef, navigationRef, navigationListenerProps } from "react-navigation-helpers";
2
3useEffect((): any => {
4  return () => (isReadyRef.current = false);
5}, []);
6
7<NavigationContainer
8  ref={navigationRef}
9  onReady={() => {
10    isReadyRef.current = true;
11  }}
12>
13  <Stack.Navigator {...navigationListenerProps}>
14      {/* Rest of your code */}
15  </Stack.Navigator>
16</NavigationContainer>;

you can then listen to stack navigation events anywhere in your app.

Example in a component:

1import React, {useEffect} from "react"
2import {addNavigationListener} from "react-navigation-helpers"
3// or as a whole
4import * as NavigationService from "react-navigation-helpers";
5
6const MyComponent = () => {
7    
8    useEffect(() => {
9        return addNavigationListener("transitionEnd", () => {
10            // transition ended
11        })
12    })
13
14    // or like this
15    useEffect(() => {
16        return NavigationService.addNavigationListener("transitionEnd", () => {
17            // transition ended
18        })
19    })
20    
21    return (
22        <Text>Hello world!</Text>
23    )
24}

Roadmap

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