4

I need to be able to navigate and reset navigation stack from modules that are not necessarily screen components. It means, I can't use: 

const {navigate} = this.props.navigation;

In my case, I need to properly redirect user to the right screen when he taps on push notification. I only have a callback:

onNotification: function(notification) {
    // show correct screen and reset navigation stack
}

I just need more flexibility with navigation. So how can I do it for my case?

Andrei
  • 42,814
  • 35
  • 154
  • 218

2 Answers2

5

Here is my solution. I implemented base class for all screens. With this I always know what screen I am at and can always get navigation object to redirect user whenever needed:

import React, {Component} from 'react';

export default class Base extends Component {
    static screen;

    constructor(props) {
        super(props);
        Base.screen = this; 
    }

    nav() {
        return this.props.navigation;
    }
}

In some other component/module I can just call this to navigate to a different screen:

Base.screen.nav().navigate(...);
Andrei
  • 42,814
  • 35
  • 154
  • 218
1

I have created a navigation aware screen component to take care of it on screens.

For outside the screen you can directly access store.navigation. I have used it with redux in my example. See if this helps you.

https://github.com/aajiwani/react-navigation-aware-helper

aajiwani
  • 121
  • 6