Skip to content

WrathChaos/react-navigation-helpers

Repository files navigation

React Navigation Helpers

Battle Tested âś…

Helpers for React Navigation

npm version npm expo-compatible Platform - Android and iOS License: MIT

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

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