react-navigation-helpers

Installation

Add the dependency:

React Native:

npm i react-navigation-helpers

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x.x",
"react-navigation": ">= 5.x.x"

React Navigation Versions

• Use v0.2.0+ for ReactNavigation v5
• Use v0.1.0+ for ReactNavigation v4

Usage

Global Level Navigator

Set the global level navigation reference into the NavigationContainer

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

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

<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    isReadyRef.current = true;
  }}
>
  {/* ... */}
</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

ToDos

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