ExNavigation - Access navigator from parent component or from renderRight

Question

I'm using ExNavigation in my Exponent project.

How can I do the navigation from outside the route components?

So from the same place I create

<NavigationProvider router={router}>
    <StackNavigation initialRoute={router.getRoute('First')}/>
</NavigationProvider>

I want access to a navigator so that I can push and pop.

Another option is to push from inside First component, but I'm doing that in renderRight component, which is declared inside my static route so I don't have access to this.props.navigator.

I also want a way to pass props to the route components from the parent (who declares the <NavigationProvider>...).

Is any of this possible?

Note: I do not wanna use the Redux store for this. Obviously I can achieve anything with a global function.

Answer 1

Another option is to push from inside First component, but I'm doing that in renderRight component, which is declared inside my static route so I don't have access to this.props.navigator.

You can access this.props.navigator by using @withNavigation decorator. Here's an example of LogoutButton button, which you can use in renderRight.

import React, {Component} from "react";
import {AsyncStorage, Button} from "react-native";
import Router from "../../Router";
import {withNavigation} from "@exponent/ex-navigation/src/ExNavigationComponents";

@withNavigation
export default class LogoutButton extends React.Component {
  render() {
    return (
        <Button
            title='Log out'
            onPress={()=>{this.doLogout()}}/>
    )
  }

  doLogout() {
    AsyncStorage.clear();
    this.props.navigator.immediatelyResetStack([Router.getRoute('login')], 0)
  }
}