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, [email protected]

License

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