How do I navigate between routes without using navigation prop? - react-native

Question

I'm currently trying to call the DrawerOpen route(Example #1) from a screen(Example #3) that is inside a StackNavigator that is rendered as <ProductStack> inside a component(Example #3).
Inside that Stack, I need that a button that can be able to access the DrawerOpen, but the navigation that I have on that page, can't access that DrawerOpen route.
Is there any way to access (and call) any route from any component of my app without depending on the navigation prop?
Here is my drawer component (Example #1):
import React, { Component } from 'react'
import { DrawerNavigator } from 'react-navigation'
import ProductEntryScreen from './../productEntry/screen'
import InvoiceInScreen from './../invoiceIn/screen'
const InvoiceInEntry = { screen: InvoiceInScreen}
const ProductEntry = {
screen: ProductEntryScreen,
navigationOptions: {
title: 'Entrada de produto'
}
}
const Drawer = DrawerNavigator({
ProductEntry,
InvoiceInEntry
})
export default Drawer
Here is the wrapper component (Example #2, also it is imported on #1 as ProductEntryScreen):
import React, { Component } from 'react'
import {
StackNavigator,
} from 'react-navigation'
import InfoScreen from './info/screen'
/* Other imports omitted due to brevity */
import * as ProductEntryActions from './actions'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
const Info = {
screen: InfoScreen,
navigationOptions: {
title: 'Entrada de produto'
}
}
/* Other routes omitted due to brevity */
const ProductStack = StackNavigator({
Info,
/* Other routes omitted due to brevity */
},{
initialRouteName: 'Info',
})
class ProductEntryScreen extends Component {
componentDidMount() {
this.props.getBlocks()
}
render() {
return (
<ProductStack />
)
}
}
const mapDispatchToProps = dispatch => bindActionCreators(ProductEntryActions, dispatch)
export default connect(null, mapDispatchToProps)(ProductEntryScreen)
Now the screen (Example #3):
import React, { Component } from 'react'
/* Imports ommited */
export default class ProductEntryScreen extends Component {
static navigationOptions = ({navigation, screenProps}) => ({
headerLeft: (
<MenuButton
onClick={() => {
// This used to work without wrapping ProductStack in a component
// but I need it to be a component
navigation.navigate('DrawerOpen')
}
/>
),
})
render() {
return (
<View></View>
)
}
}
If I export default ProductStack on #2 without creating a component (also losing that function on componentDidMount), the navigation to DrawerOpen on #3 works like charm. But I need to call that function, and also know a way to call DrawerOpen without having to depend on the navigation prop.

Answer 1

If you're using redux or something similar then you can create an action to route for you. If not you can use NavigationActions:
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
});
this.props.navigation.dispatch(navigateAction);