react-navigation-helpers

Installation

Add the dependency:

React Native:

npm i react-navigation-helpers

Peer Dependencies

Works with React Navigation

• v6
• v5
• v4

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

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

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

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

NavigationService Usage

Navigate Example

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

NavigationService.navigate("home");

Push Example

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

NavigationService.push("home");

Pop Example

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

NavigationService.pop();

PopToTop Example

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

NavigationService.popToTop();

Back Example

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

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

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

Push

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?

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.

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

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

<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    isReadyRef.current = true;
  }}
>
  <Stack.Navigator {...navigationListenerProps}>
      {/* Rest of your code */}
  </Stack.Navigator>
</NavigationContainer>;

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

Example in a component:

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 (
        <Text>Hello world!</Text>
    )
}

Roadmap

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

Author

FreakyCoder, [e-mail]

License

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